倒计时发送短信案例

案例分析：

①按钮点击之后，会禁用按钮 disabled=true;

②同时按钮里面的内容会变化，注意button 里面的内容是通过 innerHTML修改

③里面秒数是变化的，因此需要用到定时器

④定义一个变量，在定时器里面，不断递减

⑤如果变量为0，说明到了时间，需要停止定时器，并且复原按钮初始状态

1,第一步：按钮点击之后，禁用按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
手机号码： <input type="number"> <button>发送</button>
<script>
    // 按钮点击之后，会禁用 disabled 为true
    // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
    // 里面秒数是有变化的，因此需要用到定时器
    // 定义一个变量，在定时器里面，不断递减
    // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
    var btn=document.querySelector("button");
    btn.addEventListener('click',function(){
        btn.disabled=true;
    })
</script>
</body>
</html>

2，第二步: 按钮里面的内容改为 “ 还剩下 5，4，3，2，1 秒”

var btn=document.querySelector("button");
btn.addEventListener('click',function(){
    var time=5;
    timer=setInterval(function(){
    btn.disabled=true;
    btn.innerHTML="还剩下"+time+"秒“;
    time--;
  },1000)
})

3,第三步，当时间变成0秒，要清除定时器，并且按钮恢复到原来的状态

扫描二维码关注公众号，回复： 7232222 查看本文章

timer=setInterval(function(){
  if(time==0)
   {
      clearInterval(timer);
      btn.disabled=false;
      btn.innerHTML="发送";
      time=5;
    }
   else{
         btn.innerHTML=”还剩下"+time"+“秒";
         time--;
    }
},1000)

一个bug：

当时间变为0之后，按钮恢复到原来的状态，如果想要再次点击”发送“按钮，就需要把时间重新设置为" time=5", 可是这行代码放在时间为0的判断下，到了0之后，不需要点击，自动就会从5开始倒计时

原因：定时器没有清除掉，clearInterval(timer) 中的timer写错了，写成了time 。。。。。

倒计时发送短信案例

猜你喜欢