js實現(xiàn)點擊獲取驗證碼倒計時效果
更新時間：2021年01月28日 11:09:24 投稿：lijiao
這篇文章主要為大家詳細介紹了js實現(xiàn)點擊獲取驗證碼倒計時效果，這種效果大家經常遇到，示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
網(wǎng)站中為了防止惡意獲取驗證短信、驗證郵箱，都會在點擊獲取驗證碼的按鈕上做個倒計時的效果。實現(xiàn)這個功能，一個setInterval和一個clearInterval就能搞定了，不需要太多的代碼。實例效果和代碼如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type="button" style="height:32px;width:120px;" value="點擊發(fā)送驗證碼" onclick="sendCode(this)" />
<script type="text/javascript">
var clock = '';
var nums = 10;
var btn;
function sendCode(thisBtn)
{
btn = thisBtn;
btn.disabled = true; //將按鈕置為不可點擊
btn.value = nums+'秒后可重新獲取';
clock = setInterval(doLoop, 1000); //一秒執(zhí)行一次
}
function doLoop()
{
nums--;
if(nums > 0){
btn.value = nums+'秒后可重新獲取';
}else{
clearInterval(clock); //清除js定時器
btn.disabled = false;
btn.value = '點擊發(fā)送驗證碼';
nums = 10; //重置時間
}
}
</script>
更多關于倒計時的文章請查看專題：《倒計時功能》
利用setInterval和clearIntervaljs實現(xiàn)js點擊獲取驗證碼倒計時效果，希望對大家的學習有所幫助。
相關文章
這篇文章主要介紹了當關閉窗口的時候，顯示窗口提示信息，友好的進行提示，防止丟失重要信息，需要的朋友可以參考一下2015-10-10
XMLHTTP 亂碼的解決方法（UTF8,GB2312 編碼 解碼）
XMLHTTP 亂碼的解決方法（UTF8,GB2312 編碼 解碼）（附帶解決DHTMLX不能用中文的問題）2011-01-01
javascript中的prototype屬性使用說明(函數(shù)功能擴展)
一說到prototype很多人可能第一個想到的是著名的prototype.js框架，當然我們今天說的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。2010-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片無縫循環(huán)輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了配置eslint規(guī)范項目代碼風格，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了webpack3之loader全解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)時間倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
因為使用 Cycle.js 的 Vite + TSX 所以想詳細的探索 TSX 在 TS 配置中的編譯情況,本文主要講解 tsconfig 和 tsx 編譯與配置,以常見的框架 PReact 的虛擬 DOM + TSX 組合、snabbdom + TSX 組合不同的配置以及編譯輸出2023-09-09
這篇文章主要為大家介紹了前端開發(fā)TypeScript的入門基礎教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-02-02
本篇文章主要介紹了js制作簡單的音樂播放器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08