按鈕倒數計時指定秒數可用程式碼例項

admin發表於2017-03-10

有時候為了防止連續的點選按鈕，可以這樣類似措施，當點選按鈕之後，可以將按鈕禁用一段時間，並且以倒數計時方式實現按鈕的可用，下面就是一段能夠實現此功能的程式碼例項，希望能夠給需要的朋友帶來幫助。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
var nn=30; 
var tipId; 
function show(){ 
  tipId=setInterval("start()",1000); 
} 
function start(){ 
  if(nn>0){ 
    var vv="距離可用還有:(" + nn + ")"; 
    $("#btn").attr("disabled", "disabled");
    $("#btn").attr("value", vv);
    nn--; 
  } 
  else{ 
    nn=30; 
    $("#btn").removeAttr("disabled");
    $("#btn").attr("value", "點下我");
    clearInterval(tipId);
  } 
} 
$(document).ready(function(){
  $("#btn").click(function(){
    show()
  })
})
</script> 
</head> 
<body> 
<form> 
<input type="button" value="檢視效果" id="btn"/> 
</form> 
</body> 
</html>

點選按鈕可以禁用按鈕，並且倒數計時30秒後才能夠再可以點選。

相關閱讀：

（1）.setInterval()方法參閱JavaScript setInterval()一章節。

（2）.attr()方法參閱jQuery attr()一章節。 

（3）.removeAttr()方法參閱jQuery removeAttr()一章節。 

（4）.clearInterval()方法參閱clearInterval()一章節。 

相關文章