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>
更多關(guān)于倒計時的文章請查看專題:《倒計時功能》
利用setInterval和clearIntervaljs實現(xiàn)js點擊獲取驗證碼倒計時效果,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug
這篇文章主要介紹了kindeditor編輯器點中圖片滾動條往上頂?shù)腷ug的相關(guān)資料,需要的朋友可以參考下2015-07-07關(guān)于JavaScript中高階函數(shù)的魅力詳解
高階函數(shù):英文叫Higher-order function。JavaScript的函數(shù)其實都指向某個變量。下面這篇文章主要給大家介紹了關(guān)于JavaScript中高階函數(shù)的魅力,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-09-09JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別
這篇文章主要給大家介紹了關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05