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