js实现5秒倒计时重新发送短信功能

2024-05-06 16:34:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现倒计时重新发送短信验证码功能的方法。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>js-手机发送短信倒计时</title>  <style>    button{      width: 100px;      height: 30px;      border: none;    }    input{      outline: none;    }  </style>  <script>      window.onload = function(){      function $(id){ return document.getElementById(id); }       $('btn').onclick = function(){        clearInterval(timer); //清除计时器          var that = this;        that.disabled = true;        var count = 5;        var timer = setInterval(function(){          if(count>0){            count--;            that.innerHTML = "剩余时间"+ count +"s";          }else{            that.innerHTML ="重新发送短信";            that.disabled = false;            clearInterval(timer); //清除计时器          }        },1000);      }    }  </script></head><body>  <div class="box">    <input type="text" id="txt">    <button id="btn" >点击发送短信</button>  </div></body></html>

或者使用setTimeout来模拟，一般情况下，还是推荐使用setTimeout，更安全一些。当使用setInterval(fn,1000)时，程序是间隔1s执行一次，但是每次程序执行是需要3s，那么就要等程序执行完才能执行下一次，即实际间隔时间为（间隔时间和程序执行时间两者的最大值）。而setTimeout（fn，1000）,代表的是，延迟1s再执行程序，且仅执行一次。每次程序执行是需要3s，所以实际时间为 1s+3s=4s。可以使用setTimeout递归调用来模拟setInterval。

<script>      window.onload = function(){      function $(id){ return document.getElementById(id); }       $('btn').onclick = function(){        var that = this;        that.disabled = true;        var count = 5;        var timer = setTimeout(fn,1000);        function fn(){          count--;          if(count>0){            that.innerHTML = "剩余时间"+ count +"s";            setTimeout(fn,1000);           }else{            that.innerHTML ="重新发送短信";            that.disabled = false;           }        }      }    }  </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：解决微信内置浏览器返回上一页强制刷新问题方法

下一篇：JS前端开发判断是否是手机端并跳转操作（小结）