使用原生js实现一个60秒倒计时验证码

使用原生js实现一个60秒倒计时验证码

let getCode = document.querySelector('.getCode');

    let tel = document.querySelector('.tel');

    let error = document.querySelector('.error');

    let time = 60;

    let timer;

    getCode.onclick = function(){

       let name = tel.value; 

       if (name == "") {

           error.innerHTML='手机号不能为空!';

           setTimeout(function(){

           error.innerHTML='';

           }, 3000);

           return;

       }

       else {

       if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(name))) {

         error.innerHTML='手机号格式有误.';

         setTimeout(function(){

           error.innerHTML='';

           }, 3000);

           return;

       }

    }

     clearInterval(timer);

     timer = setInterval(function(){   

       time--;

       getCode.innerHTML = time + "秒后重试";

       getCode.style.background="url('images/login/retry.png')";

       getCode.disabled = true;

       if (time==0) {

           time = 60;

           clearInterval(timer);

           getCode.innerHTML = "获取验证码";

           getCode.disabled = false;

       }

       },1000);

    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值