一口气补笔记而不是当时立马写的坏处就是,我现在找不到那时候参考的大佬的链接了……
那篇里面的基本上开始倒计时,按钮失效,60秒后可再次点击的功能都是有的。但是我希望能够如果调用接口失败的话,不需要再等待完60秒,而是可以直接重新发送。所以在那篇的代码基础上做了一点微小的改动。
按钮功能:
点下发送验证码,同时开始60秒倒计时,期间按钮失效,避免用户重复发送。
60秒结束后,显示“重新发送验证码”。可以再次点击。
如果60秒倒计时已经开始,但是某些原因后端报错发送失败,按钮恢复成可用的“重新发送验证码”,方便用户立刻重新发送。
正常使用codeButton(0);
如果有特殊报错需要中断按钮倒计时使用codeButton(1);
<input type="button" class="btn" id="code" value="发送验证码" onclick="sendPin(this)">
function codeButton(state){
if(state == 1){
//直接倒计时清零重新可以按
code.attr("disabled",false).val("重新发送验证码");
clearInterval(set);
}else{
code.attr("disabled","disabled");
setTimeout(function(){
code.css("opacity","0.8");
},1000)
var time = 60;
set=setInterval(function(){
code.val("在("+--time+")秒后重试");
}, 1000);
setTimeout(function(){
code.attr("disabled",false).val("重新发送验证码");
clearInterval(set);
}, 60000);
}
}
一只小菜鸟的踩坑笔记XD