应用场景

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

1. 利用cookie存储倒计时

2. 利用HTML5的localStorage 存储倒计时

利用cookie存储倒计时

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

HTML代码

JQuery代码

$(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");  });});})

关键字：JavaScript, html, jquery, 倒计时

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！