javascript sets mobile phone verification code 60s waiting code

This article will share with you JS settings for mobile phonesVerification code60s waiting to implement the code, friends who need it can refer to it

html:

<p class="input">
  <input class="tel input_all" type="text" name="tel" placeholder="手机号">
</p>
<p class="input huoqu">
  <input class="yzm input_all" type="text" name="code" placeholder="验证码">
  <button class="btn1">获取验证码</button>
</p>
<span class="error"></span>

JavaScript:

var btn1 = document.querySelector('.btn1');
var tel = document.querySelector('.tel');
var error = document.querySelector('.error');
var time = 60;
btn1.onclick = function(){
  var name = tel.value;  
  if (name == "") {
    error.innerHTML='手机号不能为空!';
    return;
  } 
  else {
    if (!(/^1[3|4|5|7|8]\d{9}$/.test(name))) {
      error.innerHTML='手机号格式有误.';
       return;
    }
  }
  var timer = setInterval(function(){    
    time--;
    btn1.innerHTML = time + "秒";
    btn1.disabled = true;
    if (time==0) {
      time = 60;
      clearInterval(timer); 
      btn1.innerHTML = "获取验证码";
      btn1.disabled = false;
    }
  },1000);
}

The above is the JS code introduced by the editor to set the mobile phone verification code for 60s and wait for implementation. I hope it will be helpful to everyone. If you If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank you all for your support of the Script House website!

The above is the detailed content of javascript sets mobile phone verification code 60s waiting code. For more information, please follow other related articles on the PHP Chinese website!