js实现60秒内不能重复点击按钮

最新推荐文章于 2022-05-03 10:51:11 发布

caoPengFlying

最新推荐文章于 2022-05-03 10:51:11 发布

阅读量4.3k

点赞数

分类专栏： html/css 文章标签： js计时器

本文链接：https://blog.csdn.net/caoPengFlying/article/details/79120589

版权

html/css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在网页中经常看到一个发送验证码的按钮，点击之后变成60s递减一直到了0秒后又变成文字发送验证码。并且才能继续点击。这个利用到了 js当中的定时器。我这里就改成了5s后才能再次点击。其道理是一样的。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn_send">发送验证码</button>
</body>
<script src="jquery-1.9.1.min.js"></script>
<script>
    var time = 5;
    $("#btn_send").on('click',function () {
        $(this).attr("disabled",true);
        alert("234");
            var timer = setInterval(function () {
                if(time == 0){
                    $("#btn_send").removeAttr("disabled");
                    $("#btn_send").html("重新发送");
                    clearInterval(timer);
                }else {
                    $("#btn_send").html(time);
                    time--;
                }
            },1000);
    });
</script>
</html>

caoPengFlying

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现60秒内不能重复点击按钮

在网页中经常看到一个发送验证码的按钮，点击之后变成60s递减一直到了0秒后又变成文字发送验证码。并且才能继续点击。这个利用到了 js当中的定时器。我这里就改成了5s后才能再次点击。其道理是一样的。代码如下：html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body>button id
复制链接

扫一扫