JS自動倒計時30秒後按鈕才可用(兩種情境)，js倒計時

JS自動倒計時30秒後按鈕才可用(兩種情境)，js倒計時

展示：

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

    查看示範 下載源碼

應用情境1：使用者註冊時閱讀完相關協議資訊後才能啟用按鈕

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

<form action="http://www.bkjia.com/" method="post" name="agree">  <input type="submit" class="button" value="請認真查看<服務條款和聲明> ()" name="agreeb"> </form> 

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

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

<script> var secs = ; document.agree.agreeb.disabled=true; for(var i=;i<=secs;i++) {  window.setTimeout("update(" + i + ")", i * ); } 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.bkjia.com/" method="post" name="myform">  <input type="button" class="button" value="擷取手機驗證碼" name="phone" onclick="showtime()"> </form> 

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

<script> function showtime(t){  document.myform.phone.disabled=true;  for(i=;i<=t;i++) {  window.setTimeout("update_p(" + i + ","+t+")", i * );  }  } 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秒後按鈕才可用，希望對大家有所協助。