admin 发表于 2015-2-4 13:33:36

jquery点击执行倒计时后才能再次点击

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

代码截图:

应用案例:


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

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

});
</script>
</body>
</html>

更多用途请自行发挥拓展。
页: [1]
查看完整版本: jquery点击执行倒计时后才能再次点击