JavaScript實現10秒后再次獲取驗證碼
JavaScript網頁制作?10秒后再次獲取驗證碼，供大家參考，具體內容如下
通常在注冊或者登陸頁面時，都會需要短信驗證碼，在點擊按鈕獲取驗證碼后會有一段時間無法點擊按鈕，避免短時間內大量的獲取驗證碼。今天制作這樣一個功能。
功能實現：
1、點擊獲取驗證碼后禁用按鈕2、按鈕中的文字內容改變，每一秒都改變3、按鈕倒計時變為0時恢復按鈕，改回文字，重置倒計時t
代碼實現：
<!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; //設置監聽事件，按下按鈕后禁用按鈕 btn.addEventListener(’click’,function(){ btn.disabled = true; //添加定時器，時間間隔為一秒 var time = setInterval(function(){if(t==0){//如果倒計時等于0了，清除計時器，恢復按鈕，將t重置為10，否則按鈕中文字改變，t遞減。 clearInterval(time); btn.disabled=false; btn.innerHTML=’獲取驗證碼’; t=10;}else{btn.innerHTML=’您可以在’+t+’秒后再次獲取’;t--;} }, 1000); }) </script></body></html>
頁面預加載后出現獲取驗證碼的按鈕
按下獲取驗證碼的按鈕后，按鈕禁用，倒計時，計時結束后恢復
這個程序看起來不是很難，但是在自己寫的時候對于剛接觸語言的同學們來說，邏輯的實現還是得好好想一想。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. css代碼優化的12個技巧2. .NET SkiaSharp 生成二維碼驗證碼及指定區域截取方法實現3. jsp網頁實現貪吃蛇小游戲4. CentOS郵件服務器搭建系列—— POP / IMAP 服務器的構建（ Dovecot ）5. MyBatis JdbcType 與Oracle、MySql數據類型對應關系說明6. 在JSP中使用formatNumber控制要顯示的小數位數方法7. 存儲于xml中需要的HTML轉義代碼8. ASP中實現字符部位類似.NET里String對象的PadLeft和PadRight函數9. ASP中if語句、select 、while循環的使用方法10. ASP基礎入門第八篇（ASP內建對象Application和Session）
網公網安備