javascript強制閱讀註冊協議指定時間程式碼例項

antzone發表於2017-04-08
JavaScript協議

在很多網站進行使用者註冊的時候，都會強制要求閱讀註冊協議。

通常的措施就是隻有經過指定時間之後，註冊按鈕才是可用的，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var count=10;
var timer=null;
 
function CountDown(){
  var btnReg=document.getElementById("btnReg");
  if(btnReg){
    if(count<=0){
      btnReg.disabled=false;
      btnReg.value="下一步進行註冊";
      clearTimeout(timer);
    }
    else{
      btnReg.value="請仔細閱讀協議(還剩"+count+"秒)";
      count--;
    }
  }
  setTimeout(CountDown,1000);
}
 
window.onload=function(){
  CountDown();
}
</script>
</head>
<body>
<textarea>請同意本站的協議</textarea><br />
<input id="btnReg" type="button" value="同意" disabled="disabled" />
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var count=10，規定倒數計時的秒數。

（2）.var timer=null，作為定時器函式的標識。

（3）.function CountDown(){}，此方法實現了具體的倒數計時功能。

（4）.var btnReg=document.getElementById("btnReg")，獲取按鈕元素物件。

（5）.if(btnReg){

  if(count<=0){

    btnReg.disabled=false;

    btnReg.value="下一步進行註冊";

    clearTimeout(timer);

  }

  else{

    btnReg.value="請仔細閱讀協議(還剩"+count+"秒)";

    count--;

  }

}如果存在指定的按鈕，並且count的值小於等於0，那麼就意味著倒數計時完成，那麼就將按鈕修改為可用，並且修改按鈕的value屬性值，最後停止定時器函式的執行。如果count依然大於0，那麼就只改變按鈕的value屬性值，其實就是實現了倒數計時效果。

（6）.setTimeout(CountDown,1000)，遞迴方式呼叫CountDown()方法。

二.相關閱讀:

（1）.disabled屬性可以參閱javascript button.disabled屬性一章節。

（2）.clearTimeout()方法可以參閱clearTimeout()一章節。

（3）.setTimeout()方法可以參閱setTimeout()一章節。

相關文章