站长资源
全栈工程师站点

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

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

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

需求分析:

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>


在线演示  
×

站长资源极速下载通道: 点击按钮发送短信验证码并倒计时的功能实现详解

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 点击按钮发送短信验证码并倒计时的功能实现详解

评论 抢沙发

评论前必须登录!