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

应用场景

在开发“发送短信验证”功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时，发送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实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)网站的支持！

来源：http://blog.csdn.net/k469785635/article/details/74662682