最近在写手机验证码倒计时的js demo,之前编写的类似下面的代码:
var countdown = 60;
function setTime(val) {
if(countdown == 0) {
val.removeAttribute("disabled");
val.value = "获取验证码";
countdown = 60;
} else {
val.setAttribute("disabled", true);
val.value = "重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
setTime(val)
}, 1000)
}
但这段代码有个bug,在倒计时结束时没有停止,反而重新开始倒计时!在寻找更好的写法时在网上看到这个文章http://www.jb51.net/article/74160.htm
大部分代码逻辑相似,只是多加了一个清除js定时器,根据这个文章代码,再加入对手机号码的验证,修改如下,作为学习之用,
var clock = '';
var nums = 60;
var btn;
var phone = /^1([38]\d|4[57]|5[0-35-9]|7[06-8]|8[89])\d{8}$/;
function sendCode(thisBtn) {
if(!phone.test($("#login_phone").val())) {
mui.toast("请填写正确的手机号码!");
} else {
btn = thisBtn;
btn.disabled = true;
btn.value = '| 重新发送' + nums + 's';
btn.style.color = '#999';
mui.toast("验证码已发送!");
clock = setInterval(doLoop, 1000);
}
}
function doLoop() {
nums--;
if(nums > 0) {
btn.value = '| 重新发送' + nums + 's';
} else {
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = '| 获取验证码';
btn.style.color = '#f00';
nums = 60; //重置时间
}
}