JS實現自動倒計時30秒後按鈕纔可用

倒計時功能在許多的網站註冊處會用到，如註冊以前有一個協義閱讀或註冊獲取手機驗證碼功能，這些都會用到倒計時功能了，下面小編介紹的是一篇JS實現自動倒計時30秒後按鈕纔可用例子，效果以下。

WEB開發中常常會用到倒計時來限制用戶對錶單的操做，好比但願用戶在必定時間內看完相關協議信息才容許用戶繼續下一步操做，又好比在收取手機驗證碼時容許用戶在必定時間事後（未收到驗證碼的狀況下）再次獲取驗證碼。那麼今天我來給你們介紹下如何使用Javascript來實現這一簡單應用。

應用場景1：用戶註冊時閱讀完相關協議信息後才能激活按鈕
某些網站註冊時要求用戶贊成所謂的用戶協議之類的信息，若是協議內容很是重要，有些網站會要求新註冊的用戶必定要閱讀完相關協議信息才能激活下一步按鈕提交表單。爲了讓用戶能閱讀完協議信息（實際用戶有沒有真正閱讀咱不知道），開發者會設計一個倒計時好比30秒，30秒事後，表單提交按鈕纔會激活生效，下面來看具體如何實現。

<form action="http://www.javaweb.cc" 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) {
//http://www.javaweb.cc整理
if(num == secs) {

document.agree.agreeb.value =" 我 同 意 ";
document.agree.agreeb.disabled=false;

}
else {

var printnr = secs-num;
document.agree.agreeb.value = "請認真查看<服務條款和聲明> (" + printnr +")";

}
}
</script>