JS 實現獲取驗證碼 倒計時功能
更新時間：2018年10月29日 10:01:01 投稿：mrr
這篇文章主要介紹了JS 實現獲取驗證碼 倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
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>
總結
以上所述是小編給大家介紹的JS 實現獲取驗證碼 倒計時功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了微信小程序實戰(zhàn)之上拉加載、分頁加載效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了微信小程序實現無限滾動列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了JS實現無限級網頁折疊菜單(類似樹形菜單)效果代碼,涉及JavaScript基于鼠標事件實現針對頁面元素結點的遍歷及樣式操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
有一組數據，大概10萬個左右，每一單位的值不會大于30000，要求按照由大到小的順序不重復輸出。2010-07-07
這篇文章主要介紹了JavaScript將一個數組插入到另一個數組的方法,涉及javascript中Array.prototype.push.apply方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
最近看了一本書，發(fā)現了個計算代碼執(zhí)行時間的方法，感覺還挺有用的，所以這篇文章主要給大家介紹了關于Javascript利用console計算代碼運行時間的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-09-09
這篇文章主要介紹了微信小程序模板消息限制實現無限制主動推送的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了JavaScript發(fā)起HTTP請求的多種方式,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11
Discuz 公告效果效果代碼，可以自動換行和無間隙滾動2009-03-03
二分查找也稱折半查找,它是一種效率較高的查找方法,本文主要介紹了JS實現二分查找的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-11-11