js定时器以及验证码倒计时案例-CFANZ编程社区

js定时器以及验证码倒计时案例

定时器

setTimeout()定时器

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

   <script>
    //setTimeout 语法规范
    //1.window在调用时可以省略,时间单位ms
    //2.页面中可能有很多的定时器，给定时器加名字
    function ab () {
      alert("timoeout")
    }

     var t1=setTimeout(ab ,2000);
     var t2=setTimeout(ab ,2000);
     var t3=setTimeout(ab ,2000);


    </script>

这个函数也叫回调函数

停止setTimeout()

clearTimeout(关闭的定时器 ID);

setinterval()定时器

重复调用一个函数，每隔一次毫秒数调用一次。

 <script>
      //语法规范
      setInterval(function() {
        console.log("woshi帅哥");
      },1000);
 

    </script>

验证码倒计时案例

<body>
  定时验证码<input type="text"><button> 获取</button>
  <script>
    var time=5; //倒计时时间全局变量

    var bt=document.querySelector('button'); //给按钮定义对象

    //给按钮绑定点击事件
    bt.addEventListener('click',function() {
      bt.disabled = true;  //禁用按钮

      //倒计时
      var dingshi = setInterval(function() {

      //倒计时结束清除定时器，重置按钮
      if(time==0) {
        clearInterval(dingshi);
        bt.disabled=false;
        bt.innerHTML="获取";
        time=5;


      }
      //未结束时进行读秒倒计时
      else {
        bt.innerHTML ="剩余"+time+"秒";
        time--;

      }

      },1000);

    })
  </script>



</body>

0 条评论