網(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í)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Bootstrap Img 圖片樣式(推薦)
Bootstrap提供了四種用于<img>類的樣式，在本文給大家詳細(xì)介紹，需要的朋友可以參考下
2016-12-12
用JS生成UUID的方法實(shí)例
下面小編就為大家?guī)?lái)一篇用JS生成UUID的方法實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-03-03
uniapp使用高德地圖的超詳細(xì)步驟
使用uni-app框架開(kāi)發(fā)微信小程序,可以使用高德地圖開(kāi)發(fā)地圖選點(diǎn)、搜索位置、定位、獲取詳細(xì)的地址信息、碼值等信息,下面這篇文章主要給大家介紹了關(guān)于uniapp使用高德地圖的超詳細(xì)步驟,需要的朋友可以參考下
2022-12-12
js操作瀏覽器的參數(shù)方法
下面小編就為大家?guī)?lái)一篇js操作瀏覽器的參數(shù)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
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ù)的魅力，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2018-09-09
JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別
這篇文章主要給大家介紹了關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
Javascript打印局部頁(yè)面實(shí)例
這篇文章主要分享一個(gè)Javascript打印局部頁(yè)面實(shí)例,需要的朋友可以參考下。
2016-06-06
JS代碼同步文本框內(nèi)容的實(shí)例方法
這篇文章介紹了JS代碼同步文本框內(nèi)容的方法，有需要的朋友可以參考一下
2013-07-07
JavaScript實(shí)現(xiàn)修改偽類樣式
這篇文章主要介紹了JavaScript實(shí)現(xiàn)修改偽類樣式的方法以及代碼實(shí)現(xiàn)過(guò)程，一起學(xué)習(xí)參考下吧。
2017-11-11