使用定时器写一个发送验证码倒计时

最新推荐文章于 2023-03-14 11:56:42 发布

caicai1171523597

最新推荐文章于 2023-03-14 11:56:42 发布

阅读量566

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/caicai1171523597/article/details/86642541

版权

web前端专栏收录该内容

27 篇文章 5 订阅

订阅专栏

实际开发中一般为60s或者120s有效时间，此例为了演示假设为6，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
      button{
          display: block;
          margin: 50px auto;
          width: 150px;
          height: 40px;
          line-height: 36px;
          border: 2px solid #0742fe;
          border-radius: 5px;
          font-size: 18px;
          text-align: center;
          background-color: transparent;
      }
  </style>
</head>
<body>
<button type="button" id="sendSms" class="send-sms" onclick="sendSmsCode()">发送验证码</button>
<script type="text/javascript"  src="//code.jquery.com/jquery-1.8.2.min.js" ></script>
<script>
  /**校验手机号*/
  function checkPhone(tel){
      if(/^1(3[0-9]|4[57]|5[0-35-9]|7[0-9]|8[0-9]|9[8-9]|66)\d{8}$/.test(tel)){
          return true;
      }
      return false;
  }
  /**发送验证码*/
  function sendSmsCode(){
      if($("#sendSms").attr("disabled")){
          return;
      }
      var phone = "18212345678";
      if (!checkPhone(phone)) {
          alert("请输入正确手机号");
          return;
      }
      $.ajax({
          url:"请求地址",
          type:"post",
          dataType:"json",
          data : {
              phone : phone
          },
          success:function(data){
              if (data.code != 1) {
                  /*接口返回错误信息*/
                  alert(data.msg);
              }else{
                /**发送验证码成功，启动定时器 */
                  var index = 6;
                  $("#sendSms").text(index + 'S');
                  /*使按钮不可点，也可加自定义属性进行控制*/
                  $("#sendSms").attr("disabled",true);
                  var timer = setInterval(function () {
                      if (--index <= 0) {
                          $("#sendSms").text('发送验证码');
                          $("#sendSms").attr("disabled",false);
                          /*清除定时器*/
                          clearInterval(timer)
                      } else {
                          $("#sendSms").text(index + 'S');
                      }
                  }, 1000);
              }
          }
      });
  }
</script>
</body>
</html>

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。