js按鈕點選後需要倒數計時才能可能用程式碼例項

admin發表於2017-04-06
JS

在不少的需要有手機或者郵箱驗證功能的網站，當點選按鈕給你傳送驗證碼以後，會在一定的時間內，按鈕是不可用的，需要倒數計時一定時間之後才能夠再次點選傳送，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
var wait=60; 
function time(ele) { 
  if (wait == 0) { 
    ele.removeAttribute("disabled");      
    ele.value="免費獲取驗證碼"; 
    wait = 60; 
  } 
  else { 
    ele.setAttribute("disabled", true); 
    ele.value=wait+"秒後可以重新傳送"; 
    wait--; 
    setTimeout(function() { 
      time(ele) 
    },1000) 
  } 
} 
  
window.onload=function(){
  var ele=document.getElementById("btn");
  ele.onclick=function(){
    time(this);
  }
}
</script> 
</head> 
<body> 
<input type="button" id="btn" value="免費獲取驗證碼" /> 
</body> 
</html>

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

一.程式碼註釋:

（1）.var wait=60，設定倒數計時時間。

（2）.function time(ele){}，此方法實現了倒數計時功能，引數是按鈕物件。

（3）.if (wait == 0) {

  ele.removeAttribute("disabled");

  ele.value="免費獲取驗證碼";

  wait = 60;

}，如果wait等於0的話，那麼就刪除disabled屬性，value屬性孩子設定為"免費獲取驗證碼"，wait再重置為60。

（4）.else{ 

  ele.setAttribute("disabled", true); 

  ele.value=wait+"秒後可以重新傳送"; 

  wait--; 

  setTimeout(function() { 

    time(ele) 

  },1000) 

}，如果wait沒有等於0，那麼就將按鈕設定為不可用。同時設定按鈕的value值。

wait--，wait值減一。

setTimeout(function() { 

  time(ele) 

},1000)，採用遞迴的方式呼叫time(ele)方法。

二.相關閱讀:

（1）.removeAttribute()方法可以參閱removeAttribute()一章節。

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

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

相關文章