JavaScript實現(xiàn)10秒后再次獲取驗證碼
JavaScript網(wǎng)頁制作?10秒后再次獲取驗證碼，供大家參考，具體內(nèi)容如下
通常在注冊或者登陸頁面時，都會需要短信驗證碼，在點擊按鈕獲取驗證碼后會有一段時間無法點擊按鈕，避免短時間內(nèi)大量的獲取驗證碼。今天制作這樣一個功能。
功能實現(xiàn)：
1、點擊獲取驗證碼后禁用按鈕2、按鈕中的文字內(nèi)容改變，每一秒都改變3、按鈕倒計時變?yōu)?時恢復(fù)按鈕，改回文字，重置倒計時t
代碼實現(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>再次獲取驗證碼</title></head><body> <input type='text'> <button>獲取驗證碼</button> <script> var btn = document.querySelector(’button’); var t = 10; //設(shè)置監(jiān)聽事件，按下按鈕后禁用按鈕 btn.addEventListener(’click’,function(){ btn.disabled = true; //添加定時器，時間間隔為一秒 var time = setInterval(function(){if(t==0){//如果倒計時等于0了，清除計時器，恢復(fù)按鈕，將t重置為10，否則按鈕中文字改變，t遞減。 clearInterval(time); btn.disabled=false; btn.innerHTML=’獲取驗證碼’; t=10;}else{btn.innerHTML=’您可以在’+t+’秒后再次獲取’;t--;} }, 1000); }) </script></body></html>
頁面預(yù)加載后出現(xiàn)獲取驗證碼的按鈕
按下獲取驗證碼的按鈕后，按鈕禁用，倒計時，計時結(jié)束后恢復(fù)
這個程序看起來不是很難，但是在自己寫的時候?qū)τ趧偨佑|語言的同學(xué)們來說，邏輯的實現(xiàn)還是得好好想一想。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備