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

陈政宽~
Lepaskan: 2017-06-28 12:44:45
asal
1469 orang telah melayarinya

本文给大家分享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>
Salin selepas log masuk

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);
}
Salin selepas log masuk

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

Atas ialah kandungan terperinci javascript设置手机验证码60s等待代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!