JS設(shè)置手機(jī)驗(yàn)證碼60s等待實(shí)現(xiàn)代碼

更新時(shí)間：2017年06月14日 11:08:47 作者：OileDie

本文給大家分享JS設(shè)置手機(jī)驗(yàn)證碼60s等待實(shí)現(xiàn)代碼，需要的朋友參考下吧

html:

<div class="input">
  <input class="tel input_all" type="text" name="tel" placeholder="手機(jī)號(hào)">
</div>
<div class="input huoqu">
  <input class="yzm input_all" type="text" name="code" placeholder="驗(yàn)證碼">
  <button class="btn1">獲取驗(yàn)證碼</button>
</div>
<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='手機(jī)號(hào)不能為空!';
    return;
  } 
  else {
    if (!(/^1[3|4|5|7|8]\d{9}$/.test(name))) {
      error.innerHTML='手機(jī)號(hào)格式有誤.';
       return;
    }
  }
  var timer = setInterval(function(){    
    time--;
    btn1.innerHTML = time + "秒";
    btn1.disabled = true;
    if (time==0) {
      time = 60;
      clearInterval(timer); 
      btn1.innerHTML = "獲取驗(yàn)證碼";
      btn1.disabled = false;
    }
  },1000);
}

以上所述是小編給大家介紹的JS設(shè)置手機(jī)驗(yàn)證碼60s等待實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

關(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)
下面小編就為大家?guī)硪黄P(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡實(shí)例分析
這篇文章主要介紹了微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡,結(jié)合實(shí)例形式分析了微信小程序事件、冒泡、數(shù)據(jù)獲取相關(guān)機(jī)制、原理與操作注意事項(xiàng),需要的朋友可以參考下
2020-06-06
js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
js使用removeChild方法動(dòng)態(tài)刪除div元素
本節(jié)為大家介紹了js使用removeChild方法動(dòng)態(tài)刪除div元素,需要的朋友可以參考下
2014-08-08
JavaScript模板引擎應(yīng)用場(chǎng)景及實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript模板引擎應(yīng)用場(chǎng)景及實(shí)現(xiàn)原理,結(jié)合實(shí)例形式詳細(xì)分析了javascript模版引擎的具體應(yīng)用場(chǎng)景、實(shí)現(xiàn)原理、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-12-12
Bootstrap組件(一)之菜單
本文主要給大家介紹bootstrap組件的知識(shí)，涉及到bootstrap, 組件, 字體圖標(biāo), 上拉菜單的相關(guān)知識(shí)，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
不同js異步函數(shù)同步的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄煌琷s異步函數(shù)同步的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
Vuejs通過拖動(dòng)改變?cè)貙挾葘?shí)現(xiàn)自適應(yīng)
這篇文章主要介紹了Vuejs通過拖動(dòng)改變?cè)貙挾葘?shí)現(xiàn)自適應(yīng),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果的方法,涉及click事件相應(yīng)、animate方法等使用技巧,需要的朋友可以參考下
2015-01-01
Javascript使用uploadify來實(shí)現(xiàn)多文件上傳
本篇文章主要介紹了Javascript使用uploadify來實(shí)現(xiàn)多文件上傳，具有一定的參考價(jià)值，有需要的可以了解一下。
2016-11-11