js发送短信验证码，点击按钮倒计时案例-CFANZ编程社区

js发送短信验证码，点击按钮倒计时案例

这个案例只做了按钮模块没有关于表单实现功能是点击按钮之后禁用三秒倒计时结束后则按钮恢复原来状态定时器清楚类似一般常见的获取验证码

思路：先让按钮设置点击之后禁用再写定时器倒计时

<body>
    <input type="text">
    <button>发送</button>

    <script>
        var btn = document.querySelector('button');
        var times = 3;
        btn.addEventListener('click', function() {
            btn.disabled = true; //按钮禁用
            var clear = setInterval(function() {
                if (times == 0) { //当定时器时间为0的时候
                    times = 3;
                    btn.disabled = false; //解除按钮禁用
                    btn.innerHTML = '发送';
                    clearInterval(clear) //清除定时器
                } else {
                    btn.innerHTML = '还剩' + times + '秒';
                    times--; //自减
                }
            }, 1000)
        })
    </script>
</body>

0 条评论