JQuery实现按钮倒计时的方法

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

  1. <html> 
  2. <head>  
  3. <title>test count down button</title>  
  4. <script src="http://www.daimajiayuan.com/templets/skins/js/jquery-1.8.1.min.js" type="text/javascript"></script>  
  5. <script type="text/javascript">  
  6. $(function () {  
  7. $('#btn').click(function () {  
  8. var count = 3;  
  9. var countdown = setInterval(CountDown, 1000);  
  10.  
  11. function CountDown() {  
  12. $("#btn").attr("disabled", true);  
  13. $("#btn").val("Please wait " + count + " seconds!");  
  14. if (count == 0) {  
  15. $("#btn").val("Submit").removeAttr("disabled");  
  16. clearInterval(countdown);  
  17. }  
  18. count--;  
  19. }  
  20. })  
  21. });  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <input type="button" id="btn" value="Submit" />  
  26. </body> 
  27. </html> 

转载请注明:代码家园 » JQuery实现按钮倒计时的方法

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)