AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
js重新发送短信,js倒计时重新发送短信,js倒计时发送短信,js发送短信

本文实例讲述了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


js重新发送短信,js倒计时重新发送短信,js倒计时发送短信,js发送短信  
上一篇:thinkjs之页面跳转同步异步操作  下一篇:解决微信内置浏览器返回上一页强制刷新问题方法