发送短信验证码倒计时&&防止刷新

最新推荐文章于 2023-09-20 16:51:35 发布

weixin_34178244

最新推荐文章于 2023-09-20 16:51:35 发布

阅读量481

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/13708834/2353244

本文介绍了一种在网页上实现验证码倒计时功能的方法，使用HTML、JavaScript和jQuery库。通过设置按钮不可点击状态、读取和更新Cookie中的倒计时值，实现了防止重复发送验证码的功能，并确保了页面刷新后倒计时状态的正确恢复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<input type="button" id="btn" class="sms-btn" onclick="sendPh()" value='获取验证码' />

js代码倒计时
function timekeeping(){
//把按钮设置为不可以点击
$('#btn').attr("disabled", true);
var interval=setInterval(function(){//每秒读取一次cookie
//从cookie 中读取剩余倒计时
total=$.cookie("total"); 存入Cookie 防止页面刷新
//在发送按钮显示剩余倒计时
$('#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);
}

function sendPh(){
phone=$('#mobile_phone').val();
$.post(phone_url, {mobile:phone}, function(data, textStatus, xhr) {
$.cookie("total",60);
timekeeping();
});
}

防刷新 html中加入js
<script type="text/javascript">
$(function(){
if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){
timekeeping();
}else{
$('#btn').attr("disabled", false);
}
});
</script>

转载于:https://blog.51cto.com/13708834/2353244