JQuery实现倒计时按钮的效果

 
更多

一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下:

<html>
<head> 
<title>test count down button</title> 
<script src="http://www.phpernote.com/js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#btn').click(function () { 
var count = 3; 
var countdown = setInterval(CountDown, 1000); 

function CountDown() { 
$("#btn").attr("disabled", true); 
$("#btn").val("Please wait " + count + " seconds!"); 
if (count == 0) { 
$("#btn").val("Submit").removeAttr("disabled"); 
clearInterval(countdown); 
} 
count--; 
} 
}) 
}); 
</script> 
</head> 
<body> 
<input type="button" id="btn" value="Submit" /> 
</body>
</html>
打赏

本文固定链接: https://www.cxy163.net/archives/4291 | 绝缘体

该日志由 绝缘体.. 于 2013年05月23日 发表在 未分类 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: JQuery实现倒计时按钮的效果 | 绝缘体
关键字: , , , ,

JQuery实现倒计时按钮的效果:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter