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实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
