如何用JS實現自動倒計時30秒后按鈕才可用，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創新互聯是一家專注于成都網站設計、成都做網站與策劃設計,隆林網站建設哪家好?成都創新互聯做網站,專注于網站建設十載,網設計領域的專業建站公司;建站業務涵蓋:隆林等地區。隆林做網站價格咨詢:18980820575

WEB開發中經常會用到倒計時來限制用戶對表單的操作，比如希望用戶在一定時間內看完相關協議信息才允許用戶繼續下一步操作，又比如在收取手機驗證碼時允許用戶在一定時間過后（未收到驗證碼的情況下）再次獲取驗證碼。那么今天我來給大家介紹下如何使用Javascript來實現這一簡單應用。

應用場景1：用戶注冊時閱讀完相關協議信息后才能激活按鈕

某些網站注冊時要求用戶同意所謂的用戶協議之類的信息，如果協議內容非常重要，有些網站會要求新注冊的用戶一定要閱讀完相關協議信息才能激活下一步按鈕提交表單。為了讓用戶能閱讀完協議信息（實際用戶有沒有真正閱讀咱不知道），開發者會設計一個倒計時比如30秒，30秒過后，表單提交按鈕才會激活生效，下面來看具體如何實現。

<form action="http://www.xuebuyuan.com/" method="post" name="agree"> <input type="submit" class="button" value="請認真查看 (30)" name="agreeb"> </form>

假設有上面這樣一個表單，表單的其他部分我們省略，只有一個提交按鈕，初始時按鈕不可用，當顯示30秒倒計時結束后，按鈕就會顯示“我同意”，并且可以點擊激活。

我們用原生的js來實現這一效果：

<script> var secs = 30; document.agree.agreeb.disabled=true; for(var i=1;i<=secs;i++) { window.setTimeout("update(" + i + ")", i * 1000); } function update(num) { if(num == secs) { document.agree.agreeb.value =" 我 同 意 "; document.agree.agreeb.disabled=false; } else { var printnr = secs-num; document.agree.agreeb.value = "請認真查看 (" + printnr +")"; } } </script>

我們設置時間為30秒，當然你也可以設置你想要的時間，將按鈕禁用，也就是不可點擊，然后循環30秒，通過window.setTimeout調用update()函數，將當前秒與倒計時對比，如果已經倒計時完成則顯示“我同意”，并激活按鈕。

應用場景2：用戶激活短信通道向用戶手機發送驗證碼短信以驗明正身

很多網站在驗證用戶身份的時候需要提高用戶信息的安全性，這樣就會與用戶手機綁定，于是就會向用戶手機發送驗證碼信息，如果用戶填寫了正確的驗證碼提交后臺，那么操作才會成功。而發送驗證碼也可能由于各種原因有發送不成功的情況，又不能讓用戶不停點擊發送。如此開發者使用倒計時來處理這類問題，用戶激活短信后，如果30秒后未收到驗證碼短信則可以再允許點擊發送短信。

<form action="http://www.xuebuyuan.com/" method="post" name="myform"> <input type="button" class="button" value="獲取手機驗證碼"  name="phone" onclick="showtime(30)"> </form>

上面的表單在按鈕上添加了一個onclick事件，調用了showtime()函數。

<script> function showtime(t){ document.myform.phone.disabled=true; for(i=1;i<=t;i++) { window.setTimeout("update_p(" + i + ","+t+")", i * 1000); } } function update_p(num,t) { if(num == t) { document.myform.phone.value =" 重新發送 "; document.myform.phone.disabled=false; } else { printnr = t-num; document.myform.phone.value = " (" + printnr +")秒后重新發送"; } } </script>

和場景1一樣，當點擊按鈕后，按鈕狀態為禁用，通過調用window.setTimeout的update_p()顯示倒計時，當倒計時完成后，按鈕顯示“重新發送”，這時按鈕狀態為可用。

看完上述內容，你們掌握如何用JS實現自動倒計時30秒后按鈕才可用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

本文標題：如何用JS實現自動倒計時30秒后按鈕才可用-創新互聯
網站URL：http://m.newbst.com/article38/jgpsp.html

成都網站建設公司_創新互聯，為您提供服務器托管、搜索引擎優化、用戶體驗、電子商務、微信小程序、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯