当前位置:Gxlcms > JavaScript > JS设置手机验证码60s等待实现代码

JS设置手机验证码60s等待实现代码

时间:2021-07-01 10:21:17 帮助过:3人阅读

 html:

  1. <div class="input">
  2. <input class="tel input_all" type="text" name="tel" placeholder="手机号">
  3. </div>
  4. <div class="input huoqu">
  5. <input class="yzm input_all" type="text" name="code" placeholder="验证码">
  6. <button class="btn1">获取验证码</button>
  7. </div>
  8. <span class="error"></span>

JavaScript:

  1. var btn1 = document.querySelector('.btn1');
  2. var tel = document.querySelector('.tel');
  3. var error = document.querySelector('.error');
  4. var time = 60;
  5. btn1.onclick = function(){
  6. var name = tel.value;
  7. if (name == "") {
  8. error.innerHTML='手机号不能为空!';
  9. return;
  10. }
  11. else {
  12. if (!(/^1[3|4|5|7|8]\d{9}$/.test(name))) {
  13. error.innerHTML='手机号格式有误.';
  14. return;
  15. }
  16. }
  17. var timer = setInterval(function(){
  18. time--;
  19. btn1.innerHTML = time + "秒";
  20. btn1.disabled = true;
  21. if (time==0) {
  22. time = 60;
  23. clearInterval(timer);
  24. btn1.innerHTML = "获取验证码";
  25. btn1.disabled = false;
  26. }
  27. },1000);
  28. }

以上所述是小编给大家介绍的JS设置手机验证码60s等待实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

人气教程排行