原生js 实现点击按钮完成60秒倒计时，倒计时时按钮不可用

最新推荐文章于 2023-02-11 10:27:46 发布

原创最新推荐文章于 2023-02-11 10:27:46 发布 · 7.9k 阅读

14 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种基于JavaScript的倒计时验证码发送机制，通过设置定时器实现每秒刷新，控制按钮状态，以防止重复点击，确保验证码发送的准确性。

倒计时60秒，设置一个定时器，每秒刷新一次

<input type="button" value="获取验证码" class="btn" onclick="settime(this)">
<!--给btn设置一个方法-->

 var countdown=60;        //初始值
    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value="获取验证码";
            countdown = 60;                     
            return false;
        } else {
            val.setAttribute("disabled", true);
            val.value="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {   //设置一个定时器，每秒刷新一次
            settime(val);
        },1000);
    }