js定时器以及验证码倒计时案例_settimeout实现验证码倒计时-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53958083/article/details/124578965

本文介绍了JavaScript中的setTimeout()和setInterval()定时器的使用，包括如何设置和停止定时器。同时，提供了验证码倒计时的具体案例，帮助理解定时器在实际场景中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定时器

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(要关闭的定时器名字);
clearinterval()同理; 下文案例有实际操作

setinterval()定时器

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

 <script>
      //语法规范 setInterval(调用函数,毫秒);
      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>