展示效果圖：

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

    查看演示 下載源碼

應用場景1：用戶注冊時閱讀完相關(guān)協(xié)議信息后才能激活按鈕

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

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

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

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

<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秒，當然你也可以設置你想要的時間，將按鈕禁用，也就是不可點擊，然后循環(huán)30秒，通過window.setTimeout調(diào)用update()函數(shù)，將當前秒與倒計時對比，如果已經(jīng)倒計時完成則顯示“我同意”，并激活按鈕。

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

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

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

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

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

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

以上通過兩種場景給大家展示了js實現(xiàn)自動倒計時30秒后按鈕才可用，希望對大家有所幫助。

最新評論