javascript设置手机验证码60s等待代码

陈政宽~
풀어 주다: 2017-06-28 12:44:45
원래의
1414명이 탐색했습니다.

本文给大家分享JS设置手机验证码60s等待实现代码,需要的朋友参考下吧

 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(&#39;.btn1&#39;);
var tel = document.querySelector(&#39;.tel&#39;);
var error = document.querySelector(&#39;.error&#39;);
var time = 60;
btn1.onclick = function(){
  var name = tel.value;  
  if (name == "") {
    error.innerHTML=&#39;手机号不能为空!&#39;;
    return;
  } 
  else {
    if (!(/^1[3|4|5|7|8]\d{9}$/.test(name))) {
      error.innerHTML=&#39;手机号格式有误.&#39;;
       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);
}
로그인 후 복사

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

위 내용은 javascript设置手机验证码60s等待代码의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!