JS設(shè)置手機驗證碼60s等待實現(xiàn)代碼
更新時間：2017年06月14日 11:08:47 作者：OileDie
本文給大家分享JS設(shè)置手機驗證碼60s等待實現(xiàn)代碼，需要的朋友參考下吧
html:
<div class="input"> <input class="tel input_all" type="text" name="tel" placeholder="手機號"> </div> <div class="input huoqu"> <input class="yzm input_all" type="text" name="code" placeholder="驗證碼"> <button class="btn1">獲取驗證碼</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='手機號不能為空!';
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);
}
以上所述是小編給大家介紹的JS設(shè)置手機驗證碼60s等待實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
關(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)
下面小編就為大家?guī)硪黄P(guān)于js二維數(shù)組和多維數(shù)組的定義聲明(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡實例分析
這篇文章主要介紹了微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡,結(jié)合實例形式分析了微信小程序事件、冒泡、數(shù)據(jù)獲取相關(guān)機制、原理與操作注意事項,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易計算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
js使用removeChild方法動態(tài)刪除div元素
本節(jié)為大家介紹了js使用removeChild方法動態(tài)刪除div元素,需要的朋友可以參考下2014-08-08
JavaScript模板引擎應(yīng)用場景及實現(xiàn)原理詳解
這篇文章主要介紹了JavaScript模板引擎應(yīng)用場景及實現(xiàn)原理,結(jié)合實例形式詳細(xì)分析了javascript模版引擎的具體應(yīng)用場景、實現(xiàn)原理、相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-12-12
本文主要給大家介紹bootstrap組件的知識，涉及到bootstrap, 組件, 字體圖標(biāo), 上拉菜單的相關(guān)知識，非常具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
下面小編就為大家?guī)硪黄煌琷s異步函數(shù)同步的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
Vuejs通過拖動改變元素寬度實現(xiàn)自適應(yīng)
這篇文章主要介紹了Vuejs通過拖動改變元素寬度實現(xiàn)自適應(yīng),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了js實現(xiàn)點擊左右按鈕輪播圖片效果的方法,涉及click事件相應(yīng)、animate方法等使用技巧,需要的朋友可以參考下2015-01-01
Javascript使用uploadify來實現(xiàn)多文件上傳
本篇文章主要介紹了Javascript使用uploadify來實現(xiàn)多文件上傳，具有一定的參考價值，有需要的可以了解一下。2016-11-11