JavaScript實(shí)現(xiàn)10秒后再次獲取驗(yàn)證碼
JavaScript網(wǎng)頁(yè)制作–10秒后再次獲取驗(yàn)證碼，供大家參考，具體內(nèi)容如下
通常在注冊(cè)或者登陸頁(yè)面時(shí)，都會(huì)需要短信驗(yàn)證碼，在點(diǎn)擊按鈕獲取驗(yàn)證碼后會(huì)有一段時(shí)間無(wú)法點(diǎn)擊按鈕，避免短時(shí)間內(nèi)大量的獲取驗(yàn)證碼。今天制作這樣一個(gè)功能。
功能實(shí)現(xiàn)：
1、點(diǎn)擊獲取驗(yàn)證碼后禁用按鈕
2、按鈕中的文字內(nèi)容改變，每一秒都改變
3、按鈕倒計(jì)時(shí)變?yōu)?時(shí)恢復(fù)按鈕，改回文字，重置倒計(jì)時(shí)t
代碼實(shí)現(xiàn)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>再次獲取驗(yàn)證碼</title>
</head>
<body>
<input type="text">
<button>獲取驗(yàn)證碼</button>
<script>
var btn = document.querySelector('button');
var t = 10;
//設(shè)置監(jiān)聽(tīng)事件，按下按鈕后禁用按鈕
btn.addEventListener('click',function(){
btn.disabled = true;
//添加定時(shí)器，時(shí)間間隔為一秒
var time = setInterval(function(){
if(t==0){//如果倒計(jì)時(shí)等于0了，清除計(jì)時(shí)器，恢復(fù)按鈕，將t重置為10，否則按鈕中文字改變，t遞減。
clearInterval(time);
btn.disabled=false;
btn.innerHTML='獲取驗(yàn)證碼';
t=10;
}else{
btn.innerHTML='您可以在'+t+'秒后再次獲取';
t--;
}
}, 1000);
})
</script>
</body>
</html>
頁(yè)面預(yù)加載后出現(xiàn)獲取驗(yàn)證碼的按鈕
按下獲取驗(yàn)證碼的按鈕后，按鈕禁用，倒計(jì)時(shí)，計(jì)時(shí)結(jié)束后恢復(fù)
這個(gè)程序看起來(lái)不是很難，但是在自己寫(xiě)的時(shí)候?qū)τ趧偨佑|語(yǔ)言的同學(xué)們來(lái)說(shuō)，邏輯的實(shí)現(xiàn)還是得好好想一想。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用Javascript正則表達(dá)式來(lái)格式化XML內(nèi)容
本篇文章是對(duì)使用Javascript正則表達(dá)式來(lái)格式化XML內(nèi)容的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
JavaScript進(jìn)制數(shù)之間的互相轉(zhuǎn)換
這篇文章主要介紹了JavaScript進(jìn)制數(shù)之間的互相轉(zhuǎn)換，進(jìn)制轉(zhuǎn)換是人們利用符號(hào)來(lái)計(jì)數(shù)的方法，下文基于JavaScript實(shí)現(xiàn)進(jìn)制數(shù)之間的轉(zhuǎn)換，有一定的知識(shí)性參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了解決javascript 全局變量失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-04-04
JavaScript 替換Html標(biāo)簽實(shí)現(xiàn)代碼
這種技術(shù)被廣泛應(yīng)用于表單驗(yàn)證，語(yǔ)法高亮和危險(xiǎn)字符過(guò)濾中。一段話如果很長(zhǎng)，如果不想像下面那樣替換，我們得想些辦法了。2009-10-10
js檢測(cè)離開(kāi)或刷新頁(yè)面時(shí)表單數(shù)據(jù)是否更改的方法
這篇文章主要介紹了js檢測(cè)離開(kāi)或刷新頁(yè)面時(shí)表單數(shù)據(jù)是否更改的方法,涉及javascript表單操作及事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下2016-08-08
分割字符串的方法有很多，下面為大家介紹下使用JScript簡(jiǎn)單實(shí)現(xiàn)下，喜歡的朋友可以參考下2013-09-09
這篇文章主要介紹了ES11屢試不爽的新特性,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
JavaScript位置參數(shù)實(shí)現(xiàn)原理及過(guò)程解析
這篇文章主要介紹了JavaScript位置參數(shù)實(shí)現(xiàn)原理及過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JS返回上一頁(yè)實(shí)例代碼通過(guò)圖片和按鈕分別實(shí)現(xiàn)
返回上一頁(yè)的方法有很多，本代碼通過(guò)圖片和按鈕分別實(shí)現(xiàn)，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
js前端加密庫(kù)Crypto-js進(jìn)行MD5/SHA256/BASE64/AES加解密的方法與示例
js加密解密可以使用crypto-js它可以進(jìn)行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,這是一個(gè)對(duì)稱加密的庫(kù),可以使用 AES、DES、但沒(méi)有rsa等非對(duì)稱加密的方法2023-12-12