点击按钮发送短信验证码并倒计时的功能实现详解

现在有这样一个需求，点击按钮发送短信，然后按钮上面出现倒计时。相信只要用到短信接口的应用都会有这个需求，但是这个需求对新手来说却要挠头了，今天就给大家讲解如何用嘴简单，最容易理解的方式来完成这项功能。

需求分析：

1,按钮禁用，这个我们很容易想到使用按钮的disabled属性。

2,倒计时，我们想到的是JS的定时器，推荐使用setTimeout

3,完善，倒计时结束后，按钮要回归可用

那么下面我们来看如何用最少的代码实现上述需求

首先按钮禁用及还原，我们使用setAttribute，以及removeAttribute

obj.setAttribute("disabled", true);
obj.removeAttribute("disabled");

核心倒计时的实现，现定义一个变量，记录我们需要倒计时的时间

var countdown=60;

然后我们在循环体中让该时间递减，即

countdown–;

再循环到countdown=0时，我们需要重置按钮状态

if (countdown == 0) {
.....
return;
}

相信到这里所有同学应该明白了其运行的基本原理了，附上完整代码：

<input type="button" id="btn" value="点击发送验证码" onclick="settime(this)">

<script>
var countdown=60;
function settime(obj) {
  if (countdown == 0) {
    obj.removeAttribute("disabled");
    obj.value="点击发送验证码";
    countdown = 60;
    return;
  } else {
    obj.setAttribute("disabled", true);
    obj.value="重新发送(" + countdown + ")";
    countdown--;
  }
setTimeout(function() {
  settime(obj) }
  ,1000)
}
</script>