javascript實現表單可點選倒數計時程式碼

admin發表於2017-03-09
JavaScript

為了防止按鈕的重複點選,可以瀏覽者點選以後間隔一定時間才能再點選，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<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) 
  } 
} 
window.onload=function(){
  var bt=document.getElementById("btn");
  bt.onclick=function(){
    time(this);
  } 
}
</script> 
</head> 
<body> 
<input type="button" id="btn" value="免費獲取驗證碼" /> 
</body> 
</html>

以上程式碼當點選按鈕的時候，按鈕被設定為不可用，倒數計時60秒之後才能夠再點選。下面簡單介紹一下實現過程:

一.實現原理:

當點選按鈕的時候，將按鈕通過setAttribute()函式設定為不可用，然後利用定時器函式開始倒數計時效果，當倒數計時完成時，再將按鈕設定為可用，就這麼簡單。

二.程式碼註釋:

1.var wait=60，設定倒數計時事件。

2.function time(o){}，宣告一個函式用來用來處理按鈕是否可用和倒數計時效果。

3.if(wait==0) {}，判斷倒數計時是否到達0，如果到達零的話就通過removeAttribute()函式移除按鈕的disabled屬性，並且將按鈕的value屬性值設定為“免費獲取驗證碼”，然後再將wait重置為60。

4.else{}，如果到時沒有到達零，通過setAttribute()函式將按鈕設定為不可用，並且將value屬性值設定為"秒後可以重新傳送",然後wait值減一，並且使用定時器函式setInterval()不斷重複呼叫函式time，以實現倒數計時效果。

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

6.var bt=document.getElementById("btn")，獲取id屬性值為btn的物件。

7.bt.onclick=function(){}，點選按鈕觸發事件執行事件處理函式。

相關文章