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)簽頁之間進(jìn)行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家介紹了一下常見的跨標(biāo)簽頁通信方式,感興趣的小伙伴可以了解下
2023-11-11
JavaScript各類型的關(guān)系圖解
這篇文章主要通過一張圖讓你看懂JavaScript各類型的關(guān)系，需要的朋友可以參考下
2015-10-10
原生js實現(xiàn)電子時鐘
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)電子時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
一行JavaScript代碼如何實現(xiàn)瀑布流布局
這篇文章主要給大家介紹了如何通過一行JavaScript代碼實現(xiàn)瀑布流布局的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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)頁時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
javascript 解決表單仍然提交即使監(jiān)聽處理函數(shù)返回false
解決表單依舊提交即使監(jiān)聽處理函數(shù)返回false
2010-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ù)組的方法匯總(非常詳細(xì))
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基于正則表達(dá)式實現(xiàn)的密碼強度驗證功能示例
這篇文章主要介紹了JS基于正則表達(dá)式實現(xiàn)的密碼強度驗證功能,涉及javascript事件響應(yīng)及基于正則的字符遍歷、判斷等相關(guān)操作技巧,需要的朋友可以參考下
2017-09-09