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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 解析原生JS getComputedStyle2. CSS3中Transition屬性詳解以及示例分享3. 通過(guò)CSS數(shù)學(xué)函數(shù)實(shí)現(xiàn)動(dòng)畫(huà)特效4. 利用CSS3新特性創(chuàng)建透明邊框三角5. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案6. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)7. IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案8. XML入門(mén)的常見(jiàn)問(wèn)題(二)9. XML入門(mén)的常見(jiàn)問(wèn)題(一)10. 阿里前端開(kāi)發(fā)中的規(guī)范要求
網(wǎng)公網(wǎng)安備