欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-08 15:39:16
本文实例讲述了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>

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