JavaScript 实现短信验证码倒计时功能详解

作者:拾光

时间:2026-10-22

浏览:401

本文介绍如何使用 JavaScript 实现短信验证码发送后的倒计时功能。通过正则表达式校验手机号格式,利用 setInterval 设置定时器,在倒计时结束后重置按钮状态并允许重新获取。代码包含完整的错误处理与状态标志位控制,适用于常见 Web 开发场景。

文章目录

短信验证码倒计时代码实现

以下是实现短信验证码倒计时的具体代码示例:


$(function() {
    var phone_num = /^1\d{10}$/;
    var flag = 1; //短信发送时标志位
    $(".getcode").click(function() {
     if($("#phone").val() == "") {
      alert("请输入电话号码!");
      return false;
     };
     if(!phone_num.test($("#phone").val().trim())) {
      alert("电话号码有误,请输入11位手机号!");
      return false;
     };
     if(flag == 1) {
      var i = 59;
      flag = 0;
      var n = setInterval(function() {
       var j = i + 's';
       $('.getcode').html(j);
       i--;
       if(i < -1) {
        clearInterval(n);
        flag = 1;
        $('.getcode').html('重新获取').prop("disabled", false);
       }
      }, 1000);
     }
    })
   });

上述内容展示了基于 JavaScript 的短信验证码倒计时实现方案,旨在为开发者提供参考。若在使用过程中遇到任何问题,欢迎留言交流,作者将及时回复。同时,感谢读者对本站的支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章