看一個註冊擷取驗證倒計時效果
在手機或郵件擷取驗證碼常用例子
| 代碼如下 |
複製代碼 |
<input type="button" id="btn" value="免費擷取驗證碼" />
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免費擷取驗證碼";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新發送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").onclick=function(){time(this);}
</script> |
使用者註冊倒計時效果
html代碼
| 代碼如下 |
複製代碼 |
<div style="width:350px; text-align:center;">
<form name="regForm" method="post" action="">
<input type="submit" value="請先閱讀服務條款 (0)" disabled="disabled" id="reg_btn">
<input id="BtnClose" type="button" value=" 我不同意 " onclick="window.close();">
</form>
</div>
js代碼 <script language="javascript">
<!--
var wait_time = 8; //設定秒數(單位秒)
var secs_time = 0;
for(var i=1;i<=wait_time;i++)
{
window.setTimeout("sTimer("+i+")",i*1000);
}
function sTimer(num)
{
if(num==wait_time)
{
document.getElementById("reg_btn").value=" 同意註冊 ";
document.getElementById("reg_btn").disabled=false;
}
else
{
secs_time=wait_time-num;
document.getElementById("reg_btn").value="請先閱讀服務條款 ("+secs_time+")";
}
}
//-->
</script> |
友情提示，這樣可以實現一個假的倒計時效果如果使用者重新整理頁面又可以重複點擊了，當然這個需要在伺服器程式端進行判斷了，這個就就不在這裡介紹了。
