前端定时器案例-发送验证码

山里没有wifi

已于 2024-01-17 09:42:18 修改

阅读量362

点赞数 7

分类专栏： DOM 文章标签：前端

于 2024-01-17 09:40:22 首次发布

本文链接：https://blog.csdn.net/Prague_Cze/article/details/135641581

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端开发中常见的短信验证码倒计时发送功能，可以使用循环定时器来开发此功能，一个简单的案例如下：

<body>
  <p>
    请输入验证码：
    <input type = 'text' id = 'ipt' disabled>
    <button id = 'btn'>点击发送验证码</button>
  </p>
  <script>
    var ipt = document.querySelector('#ipt');
    var btn = document.querySelector('#btn');
    btn.onclick = function(){
      ipt.disabled = false;
      btn.disabled = true;
      var num = 6;
      function fn(){
        num--;
        btn.textContent = num +'秒之后重新发送';
        if(num <= 0){
          clearInterval(timer);
          btn.disabled = false;
          btn.textContent = '重新发送验证码';
        }
      }
      fn();
      var timer = setInterval(fn,1000)
    }
  </script>
</body>