js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果

更新時(shí)間：2021年01月28日 11:09:24 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果，這種效果大家經(jīng)常遇到，示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

網(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)文章

js窗口關(guān)閉提示信息（兼容IE和firefox）
這篇文章主要介紹了當(dāng)關(guān)閉窗口的時(shí)候，顯示窗口提示信息，友好的進(jìn)行提示，防止丟失重要信息，需要的朋友可以參考一下
2015-10-10
XMLHTTP 亂碼的解決方法（UTF8,GB2312 編碼解碼）
XMLHTTP 亂碼的解決方法（UTF8,GB2312 編碼解碼）（附帶解決DHTMLX不能用中文的問題）
2011-01-01
javascript中的prototype屬性使用說明(函數(shù)功能擴(kuò)展)
一說到prototype很多人可能第一個(gè)想到的是著名的prototype.js框架，當(dāng)然我們今天說的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。
2010-08-08
js實(shí)現(xiàn)圖片無縫循環(huán)輪播
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片無縫循環(huán)輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
配置eslint規(guī)范項(xiàng)目代碼風(fēng)格
這篇文章主要介紹了配置eslint規(guī)范項(xiàng)目代碼風(fēng)格，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
webpack3之loader全解析
這篇文章主要介紹了webpack3之loader全解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
詳解TypeScript編譯TSX文件的方法
因?yàn)槭褂?nbsp;Cycle.js 的 Vite + TSX 所以想詳細(xì)的探索 TSX 在 TS 配置中的編譯情況,本文主要講解 tsconfig 和 tsx 編譯與配置,以常見的框架 PReact 的虛擬 DOM + TSX 組合、snabbdom + TSX 組合不同的配置以及編譯輸出
2023-09-09
前端開發(fā)TypeScript入門基礎(chǔ)教程
這篇文章主要為大家介紹了前端開發(fā)TypeScript的入門基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-02-02
js制作簡(jiǎn)單的音樂播放器的示例代碼
本篇文章主要介紹了js制作簡(jiǎn)單的音樂播放器的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08