手机验证码倒计时js

最近在写手机验证码倒计时的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; //重置时间
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值