jQuery實現的按鈕可用倒數計時效果

antzone發表於2017-03-24
jQuery

在很多效果中，並不是一開始就希望按鈕是可用的，比如在很多網站的註冊效果中，會強制使用者去閱讀註冊協議，需要等待規定的時間才能夠點選按鈕，下面就通過程式碼例項介紹一下如何利用jquery實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var leftSeconds = 10;
var intervalId;
$(function(){
  $("#btn_reg").attr("disabled",true);
  $("#btn_reg").val("請仔細閱讀10秒");
  intervalId = setInterval("CountDown()",1000);
});
function CountDown(){
  if(leftSeconds<=0){
    $("#btn_reg").val("點選註冊");
    $("#btn_reg").attr("disabled",false);
    clearInterval(intervalId);
    return;
  }
  leftSeconds--;
  $("#btn_reg").val("請仔細閱讀"+leftSeconds+"秒");
}
</script>
</head>
<body>
<input type="button" value="點選註冊" id="btn_reg" />
</body>
</html>

上面的程式碼實現了我們的要求，只有倒數計時10秒之後才能夠使用按鈕。

一.程式碼註釋:

1.var leftSeconds=10，設定倒數計時間。2.var intervalId，宣告一個變數用作定時器函式的標識。

3.$(function(){})，當文件結構載入完畢再去執行函式中的程式碼。

4.$("#btn_reg").attr("disabled",true)，設定按鈕為不可用。

5.$("#btn_reg").val("請仔細閱讀10秒")，一開始設定按鈕的值，如果不設定此值，倒數計時開始會給人延時的感覺。

6.intervalId = setInterval("CountDown()",1000)，每隔一秒執行一次函式CountDown()。

7.function CountDown(){}，此函式沒執行一次，秒數減一，當然還有其他相關的操作。

8.if(leftSeconds<=0){

  $("#btn_reg").val("點選註冊");

  $("#btn_reg").attr("disabled",false);

  clearInterval(intervalId);

  return;

}

如果倒數計時小於等於0，就會將按鈕的value值設定為"點選註冊"，並且使其可用，同時停止定時器函式的執行。

9.leftSeconds--，否則的話倒數計時減一。

10.$("#btn_reg").val("請仔細閱讀"+leftSeconds+"秒")，顯示倒數計時相關內容。

二.相關閱讀:

1.attr()函式可以參閱jQuery attr()一章節。

2.setInterval()函式可以參閱setInterval()函式用法詳解一章節。

相關文章