防止按钮在短时间内被多次点击并且倒计时

最新推荐文章于 2024-07-23 01:00:12 发布

一位不愿透露姓名的大英俊

最新推荐文章于 2024-07-23 01:00:12 发布

阅读量2.8k

点赞数 1

分类专栏：每天一道小菜

本文链接：https://blog.csdn.net/wjy199506/article/details/59058775

版权

每天一道小菜专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>防止按钮在短时间内被多次点击并且倒计时</title>
    <script src="js/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<form>
    <div>
        <input type="button" value="点下我" id="btn"/>
    </div>
    <script type="text/javascript">
        var num = 5;
        var tipId;
        $('#btn').bind('click', function () {
            tipId = window.setInterval("start()", 1000); //每隔1秒调用一次start()方法
            $(this).unbind("click");//解绑单击事件
        });
        function start() {
            if (num > 0) {
                var vv = "点下我(" + num + ")";
                $("#btn").attr("disabled", "disabled"); //使按钮不能被点击
                $("#btn").attr("value", vv); //更改按钮上的文字
                num--;
            } else {
                num = 5;
                $("#btn").removeAttr("disabled"); //使按钮能够被点击
                $("#btn").attr("value", "点下我"); //更改按钮上的文字
                window.clearInterval(tipId); //清除循环事件
                $(this).bind("click",function () {//重新绑定单击事件
                    tipId = window.setInterval("start()", 1000); //每隔1秒调用一次start()方法
                    $(this).unbind("click");
                });
            }
        }
    </script>
</form>
</body>
</html>

4月17修改
因为老是用到，我还是封装一下吧…
这里是html页面

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>封装</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
    <script src="2.js"></script>
</head>
<body>
<form>
    <div>
        <input type="button" value="点下我" id="btn"/>
    </div>
</form>
<script>
    $("#btn").Count1(60);
</script>
</body>
</html>

封装成自定义jq对象插件就是2.js

if (!window.jQuery){
    throw new Error("必须提前引入jquery.js");
}
jQuery.fn.Count=function(a){
    var num = a;
    var tipId;
    var self=this;
    this.bind('click', function () {
        var bid=this.id;
        tipId = setInterval(start(bid),1000); //每隔1秒调用一次start()方法
        self.unbind("click");//解绑单击事件
    });
    function start(bid) {
        return function () {
            if (num > 0) {
                var vv = "点下我(" + num + ")";
                $("#"+bid).attr("disabled", "disabled"); //使按钮不能被点击
                $("#"+bid).attr("value", vv); //更改按钮上的文字
                num--;
            } else {
                num = a;
                $("#"+bid).removeAttr("disabled"); //使按钮能够被点击
                $("#"+bid).attr("value", "点下我"); //更改按钮上的文字
                clearInterval(tipId); //清除循环事件
                $("#"+bid).bind("click",function () {//重新绑定单击事件
                    tipId = setInterval(start(bid), 1000); //每隔1秒调用一次start()方法
                    $("#"+bid).unbind("click");
                });
            }
        }
    }
}