JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)_网络技术

JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

发布时间 - 2026-01-11 02:14:31 点击率：次

应用场景

在开发“发送短信验证”功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时，发送ajax请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时”。如果就这样不对倒计时存储做处理，那么当刷新页面，会出现倒计时失效，按钮可点击。提供以下解决方案：

利用cookie存储倒计时
利用HTML5的localStorage 存储倒计时

利用cookie存储倒计时

发送成功后把剩余倒计时存储到cookie，当页面刷新时，检查cookie 是否还存储着剩余倒计时？，如果有，发送按钮则保持倒计时状态，不可点击，否则发送按钮可点击。

HTML代码

<input type="button" id="btn" disabled="disabled" value="获取验证码">

jQuery代码

<!--引入jquery.cookie.js 插件-->
<script src="http:jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<!--逻辑功能代码 -->
<script>
  $(function(){
   if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒计时
     timekeeping();
   }else{//cookie 没有倒计时
     $('#btn').attr("disabled", false);
   }
   function timekeeping(){
    //把按钮设置为不可以点击
    $('#btn').attr("disabled", true);
    var interval=setInterval(function(){//每秒读取一次cookie
     //从cookie 中读取剩余倒计时
     total=$.cookie("total");
     //在发送按钮显示剩余倒计时
     $('#btn').val('请等待'+total+'秒');
     //把剩余总倒计时减掉1
     total--;
     if(total==0){//剩余倒计时为零，则显示 重新发送，可点击
     //清除定时器
     clearInterval(interval);
     //删除cookie
     total=$.cookie("total",total, { expires: -1 });
     //显示重新发送
     $('#btn').val('重新发送');
     //把发送按钮设置为可点击
     $('#btn').attr("disabled", false);
     }else{//剩余倒计时不为零
     //重新写入总倒计时
     $.cookie("total",total);
     }
    },1000);
   }
   //绑定发送按钮
    $('#btn').click(function(event) {
   /* Act on the event */
   // alert($("#btn").val());
   //校验手机号码
   var phone=$('#phone').val();
   var pre=/^[1][358][0-9]{9}$/;
   if(phone==''){
     layer.open({
       content: '手机号码不能为空',
       time: 2
     });
     return this;
   }else{
     var pre=/^[1][358][0-9]{9}$/;
     if(!pre.test(phone)){
      layer.open({
        content: '手机号码格式有误！',
        time: 2
      });
       return this;
     }
   }
   $.ajax({
    url: '',//服务器发送短信
    type: 'GET',
    dataType: 'json',
    data: {phone: phone},
   })
   .done(function(re) {
      var str="发送短信验证码成功，请注意查看您的手机";
      // console.log(re);
      if(re){
        $.cookie("total",60);
        timekeeping();
      }else{
        switch (re[0]) {
         case '160038':
          str="短信验证码发送过频繁";
          break; 
         case '160034':
          str="号码黑名单";
          break; 
         case '160000':
          str="系统错误";
          break;
         case '000000':
          str="发送成功";
          break;
         case '112300':
          str="接收短信的手机号码为空";
          break; 
         case '160040':
          str="验证码超出发送上限";
          break;
         case '160042':
          str="号码格式有误";
          break; 
         default:
          str="发送验证码失败";
          break;
        }
      }
      layer.open({
         content: str,
         time: 2
       });
   })
   .fail(function() {
    console.log("error");
   })
   .always(function() {
    console.log("complete");
   });
  });
  })
</script>

以上所述是小编给大家介绍的JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js发送短信验证码倒计时 # JS+HTML5实现获取手机验证码倒计时按钮 # JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】 # Angular.js实现获取验证码倒计时60秒按钮的简单方法 # 点击按钮出现60秒倒计时的简单js代码(推荐) # js代码实现点击按钮出现60秒倒计时 # JS自动倒计时30秒后按钮才可用(两种场景) # JS按钮倒计时并跳转到新地址的实现代码 # 倒计时 # 验证码 # 发送短信 # 设置为 # 小编 # 为零 # 为空 # 您的 # 在此 # 不可以 # 给大家 # 请注意 # 一个问题 # 所述 # 绑定 # 给我留言 # 感谢大家 # 则把 # 疑问请 # 有任何

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Tigervnc在Debian上的性能瓶颈分析

下一篇：马鞍山网站建设：打造本地化数字门户新体验

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Tigervnc在Debian上的性能瓶颈分析

下一篇：马鞍山网站建设：打造本地化数字门户新体验