如何用JS實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用

如何用JS實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

WEB開發(fā)中經(jīng)常會(huì)用到倒計(jì)時(shí)來限制用戶對(duì)表單的操作，比如希望用戶在一定時(shí)間內(nèi)看完相關(guān)協(xié)議信息才允許用戶繼續(xù)下一步操作，又比如在收取手機(jī)驗(yàn)證碼時(shí)允許用戶在一定時(shí)間過后（未收到驗(yàn)證碼的情況下）再次獲取驗(yàn)證碼。那么今天我來給大家介紹下如何使用Javascript來實(shí)現(xiàn)這一簡(jiǎn)單應(yīng)用。

應(yīng)用場(chǎng)景1：用戶注冊(cè)時(shí)閱讀完相關(guān)協(xié)議信息后才能激活按鈕

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

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

假設(shè)有上面這樣一個(gè)表單，表單的其他部分我們省略，只有一個(gè)提交按鈕，初始時(shí)按鈕不可用，當(dāng)顯示30秒倒計(jì)時(shí)結(jié)束后，按鈕就會(huì)顯示“我同意”，并且可以點(diǎn)擊激活。

我們用原生的js來實(shí)現(xiàn)這一效果：

<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 = "請(qǐng)認(rèn)真查看 (" + printnr +")"; } } </script>

我們?cè)O(shè)置時(shí)間為30秒，當(dāng)然你也可以設(shè)置你想要的時(shí)間，將按鈕禁用，也就是不可點(diǎn)擊，然后循環(huán)30秒，通過window.setTimeout調(diào)用update()函數(shù)，將當(dāng)前秒與倒計(jì)時(shí)對(duì)比，如果已經(jīng)倒計(jì)時(shí)完成則顯示“我同意”，并激活按鈕。

應(yīng)用場(chǎng)景2：用戶激活短信通道向用戶手機(jī)發(fā)送驗(yàn)證碼短信以驗(yàn)明正身

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

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

上面的表單在按鈕上添加了一個(gè)onclick事件，調(diào)用了showtime()函數(shù)。

<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 =" 重新發(fā)送 "; document.myform.phone.disabled=false; } else { printnr = t-num; document.myform.phone.value = " (" + printnr +")秒后重新發(fā)送"; } } </script>

和場(chǎng)景1一樣，當(dāng)點(diǎn)擊按鈕后，按鈕狀態(tài)為禁用，通過調(diào)用window.setTimeout的update_p()顯示倒計(jì)時(shí)，當(dāng)?shù)褂?jì)時(shí)完成后，按鈕顯示“重新發(fā)送”，這時(shí)按鈕狀態(tài)為可用。

看完上述內(nèi)容，你們掌握如何用JS實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！