按钮倒计时指定秒数可用代码实例

按钮倒计时指定秒数可用代码实例:
有时候为了防止连续的点击按钮，可以采用这样的措施，当点击按钮之后，可以讲按钮禁用一段时间，并且以倒计时方式实现按钮的可用，下面就是一段能够实现此功能的代码实例，希望能够给需要的朋友带来帮助。
代码如下:

<!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()函数可以参阅setInterval()函数用法详解一章节。
2.attr()函数可以参阅jQuery的attr()方法一章节。
3.removeAttr()函数可以参阅jQuery的removeAttr()方法一章节。
4.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12602

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]