JS 實現(xiàn)獲取驗證碼 倒計時功能
更新時間：2018年10月29日 10:01:01 投稿：mrr
這篇文章主要介紹了JS 實現(xiàn)獲取驗證碼 倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
setInterval 一個定時器搞定
<style>
button{
background: #45BCF9;
color: #fff;
padding: 4px 10px;
border: none;
outline: none;
cursor: pointer;
}
button:hover{
background: #00a8fe;
}
button.disabled{
background: #000;
cursor: auto;
}
button.disabled:hover{
background: #000;
}
</style>
<button type="button" onclick="fn()">獲取驗證碼</button>
<script>
function fn(){
var oBtn = document.getElementsByTagName('button')[0];
var time = 60;
var timer = null;
oBtn.innerHTML = time + '秒后重新發(fā)送';
oBtn.setAttribute('disabled', 'disabled'); // 禁用按鈕
oBtn.setAttribute('class', 'disabled'); // 添加class 按鈕樣式變灰
timer = setInterval(function(){
// 定時器到底了 兄弟們回家啦
if(time == 1){
clearInterval(timer);
oBtn.innerHTML = '獲取驗證碼';
oBtn.removeAttribute('disabled');
oBtn.removeAttribute('class');
}else{
time--;
oBtn.innerHTML = time + '秒后重新發(fā)送';
}
}, 1000)
}
</script>
總結(jié)
以上所述是小編給大家介紹的JS 實現(xiàn)獲取驗證碼 倒計時功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript中實現(xiàn)跨標(biāo)簽頁通信的方法詳解
跨標(biāo)簽頁通信是指在瀏覽器中的不同標(biāo)簽頁之間進行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家介紹了一下常見的跨標(biāo)簽頁通信方式,感興趣的小伙伴可以了解下2023-11-11
這篇文章主要通過一張圖讓你看懂JavaScript各類型的關(guān)系，需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了原生js實現(xiàn)電子時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要給大家介紹了如何通過一行JavaScript代碼實現(xiàn)瀑布流布局的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript實現(xiàn)動態(tài)網(wǎng)頁時鐘
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)網(wǎng)頁時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
javascript 解決表單仍然提交即使監(jiān)聽處理函數(shù)返回false
解決表單依舊提交即使監(jiān)聽處理函數(shù)返回false2010-03-03
JS來動態(tài)的修改url實現(xiàn)對url的增刪查改
通過get方式提交post表單等方式來動態(tài)修改url存在諸多的不妥，因此，想到了通過JS來動態(tài)的修改url，來實現(xiàn)對url的增刪查改2014-09-09
ES6中引入了一些新的數(shù)組方法,例如:Array.of(),Array.from()等,下面這篇文章主要給大家介紹了關(guān)于es6處理數(shù)組的方法匯總,需要的朋友可以參考下2023-06-06
如何使Chrome控制臺支持多行js模式——意外發(fā)現(xiàn)
一直以來，Chrome控制臺都缺少象IE調(diào)試臺那樣的多行執(zhí)行模式,今天意外發(fā)現(xiàn)Chrome其實也支持多行模式2013-06-06
這篇文章主要介紹了JS基于正則表達式實現(xiàn)的密碼強度驗證功能,涉及javascript事件響應(yīng)及基于正則的字符遍歷、判斷等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09