js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
網(wǎng)站中為了防止惡意獲取驗(yàn)證短信、驗(yàn)證郵箱,都會(huì)在點(diǎn)擊獲取驗(yàn)證碼的按鈕上做個(gè)倒計(jì)時(shí)的效果。實(shí)現(xiàn)這個(gè)功能,一個(gè)setInterval和一個(gè)clearInterval就能搞定了,不需要太多的代碼。實(shí)例效果和代碼如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:32px;width:120px;" value="點(diǎn)擊發(fā)送驗(yàn)證碼" onclick="sendCode(this)" /> <script type="text/javascript"> var clock = ''; var nums = 10; var btn; function sendCode(thisBtn) { btn = thisBtn; btn.disabled = true; //將按鈕置為不可點(diǎn)擊 btn.value = nums+'秒后可重新獲取'; clock = setInterval(doLoop, 1000); //一秒執(zhí)行一次 } function doLoop() { nums--; if(nums > 0){ btn.value = nums+'秒后可重新獲取'; }else{ clearInterval(clock); //清除js定時(shí)器 btn.disabled = false; btn.value = '點(diǎn)擊發(fā)送驗(yàn)證碼'; nums = 10; //重置時(shí)間 } } </script>
更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專題:《倒計(jì)時(shí)功能》
利用setInterval和clearIntervaljs實(shí)現(xiàn)js點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果,希望對(duì)大家的學(xué)習(xí)有所幫助。
- JS 倒計(jì)時(shí)實(shí)現(xiàn)代碼(時(shí)、分,秒)
- JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- 簡(jiǎn)單易用的倒計(jì)時(shí)js代碼
- 2種簡(jiǎn)單的js倒計(jì)時(shí)方式
- 原生JS實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)功能示例
- js幾秒以后倒計(jì)時(shí)跳轉(zhuǎn)示例
- 一個(gè)不錯(cuò)的js html頁(yè)面倒計(jì)時(shí)可精確到秒
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
- js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫
相關(guān)文章
kindeditor編輯器點(diǎn)中圖片滾動(dòng)條往上頂?shù)腷ug
這篇文章主要介紹了kindeditor編輯器點(diǎn)中圖片滾動(dòng)條往上頂?shù)腷ug的相關(guān)資料,需要的朋友可以參考下2015-07-07關(guān)于JavaScript中高階函數(shù)的魅力詳解
高階函數(shù):英文叫Higher-order function。JavaScript的函數(shù)其實(shí)都指向某個(gè)變量。下面這篇文章主要給大家介紹了關(guān)于JavaScript中高階函數(shù)的魅力,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-09-09JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別
這篇文章主要給大家介紹了關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05