javascript實現的按鈕間隔指定時間再能點選

螞蟻小編發表於2017-03-26
JavaScript

在很多應用中，按鈕不能夠連續點選兩次，也就是說按鈕在點選一次後，就處於不能夠用的狀態，隔指定的時間以後才能夠再用，最典型的一個例子就是，手機驗證碼的傳送，通常都是有一定的時間間隔，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var obt=document.getElementById("bt");
  var count=60;
  var timer=null;
  obt.onclick=function(){
    var _that=this;
    _that.disabled=true;
    _that.value="還剩"+count+"可用";
    timer=setInterval(function(){
      if(count>0){
        count=count-1;
        _that.value="還剩"+count+"可用";
      }
      else{        
        _that.disabled=false;
        _that.value="檢視效果";
        count=60;
        clearInterval(timer)
      }
    },1000)
  }
}
</script>
</head>
<body>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

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

一.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

2.var obt=document.getElementById("bt")，獲取按鈕物件。

3.var count=60，設定倒數計時時間。

4.var timer=null，宣告此變數，作為定時器函式的標識。

5.obt.onclick=function(){}，為按鈕註冊點選事件處理函式。

6.var _that=this，this是指向按鈕物件，將按鈕物件的引用賦值給變數_that，這是為了在以後的程式碼中隨心所欲的使用按鈕物件，應為this可能在其他的地方就不指向按鈕物件。

7._that.disabled=true，將按鈕設定為不可用。

8._that.value="還剩"+count+"可用"，重新設定按鈕的value屬性值。

9.timer=setInterval(function(){},1000)，使用定時器函式進行倒數計時。

10.if(count>0){count=count-1;_that.value="還剩"+count+"可用";}，如果count大於0，那麼count的值就會每執行一次減一，然後再設定按鈕的value屬性值。

11.else{_that.disabled=false;clearInterval(timer)}，否則將按鈕設定為可用，然後停止倒數計時函式。

二.相關閱讀:

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

2.value屬性可以參閱javascript button.value一章節。

3.setInterval()函式可以參閱setInterval()一章節。

4.clearInterval()函式可以參閱window.clearInterval()一章節。

相關文章