设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 535|回复: 0

[高手进阶] jquery点击执行倒计时后才能再次点击

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2015-2-4 13:33:36 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jquery点击执行倒计时后才能再次点击,可用于验证码限制点击过快等。

代码截图:
代码截图.png
应用案例:
应用案例.png

代码如下:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jquery点击执行倒计时后才能再次点击</title>
  6. </head>
  7. <body>
  8. <img src="psb.jpg" width="300px" id="btn">
  9. <input type="button" id="btn2" value="获取" />
  10. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  11. <script>
  12. $(function () {

  13.         $('#btn').on('click',function KeyRefresh(){
  14.                     var count=3,countdown=setInterval(Refresh,1000);
  15.                     $('#btn').off('click');//点击就移除ID绑定
  16.                     function Refresh(){
  17.                             $("#btn2").val(count + " 秒后重新获取");//显示倒计时用
  18.                             if (count == 0){
  19.                             $('#btn').on('click',KeyRefresh);//判断倒计时为0 重新绑定ID
  20.                             $("#btn2").val("获取");//重新绑定后按钮
  21.                             clearInterval(countdown);
  22.                     }
  23.                     count--;
  24.                     }
  25.         });

  26. });
  27. </script>
  28. </body>
  29. </html>
复制代码


更多用途请自行发挥拓展。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表