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

本文介绍了一种在网页上实现验证码倒计时功能的方法,使用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值