JS定时器：发送短信验证码案例

最新推荐文章于 2023-08-16 20:39:19 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2023-08-16 20:39:19 发布

阅读量596

点赞数

本文链接：https://blog.csdn.net/tuzi007a/article/details/105447928

版权

<!DOCTYPE HTML>
<html>
 <head>
  <title>定时器：发送短信验证码案例</title>
  <meta charset="utf-8" />
  <style>
  </style>
 </head>
 <body>
  <div>
   <input type="text" />
   <button id="btn">发送</botton>
  </div>
  <script>
   var btn = document.getElementById('btn');
     var num = 5;//设置一个全局变量
   btn.addEventListener("click",function(){
    this.disabled = true;//变成不可点击
  
    var timer = null;//设置一个全局变量
    timer = setInterval(function(){
    
     if( num == -1) {
     clearTimeout(timer);
     btn.innerHTML = '发送';
     btn.disabled = false;//变成可点击
     num = 5;//这里需要把计时器还原，不然就不能重复使用了
    }
     else {
     btn.innerHTML = '还有' + num + '秒可以再次点击'; 
     num--;
     }
     }, 1000);//每秒调用一次自减

   })

   
  </script>
 </body>
</html>