JS实现button点击之后60秒后才可以再次点击-适用获取验证码发送短信等

原创于 2019-03-04 11:07:28 发布 · 5.0k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#js #setTimeout

javascript 专栏收录该内容

83 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的防止按钮在60秒内被重复点击的方法。通过设置一个计时器，当按钮被首次点击后，将在60秒内禁用该按钮并显示倒计时，直到计时结束按钮才可再次被点击。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
    <title>JS实现button点击之后60秒后才可以再次点击</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <style type="text/css">
    .cen {
     text-align: center
    }
    </style>
</head>
<body>
<div class="cen">
<button id='test'>免费获取验证码</button>
</div>
<script type="text/javascript">
   var waitTime = 60;
    document.getElementById("test").onclick = function() {
        time(this);
    }
    function time(ele) {
        if (waitTime == 0) {
            ele.disabled=false;
            ele.innerHTML = "免费获取验证码";
            waitTime = 60;// 恢复计时
        } else {
            ele.disabled=true;
            ele.innerHTML = waitTime + "秒后可以重新发送";
            waitTime--;
            setTimeout(function() {
                time(ele)// 关键处-定时循环调用
            }, 1000)
        }
    }
</script>
</body>
</html>