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

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

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

如果觉得定时器里的if判断复杂 可以先让按钮禁用之后 写个定时器自减 实现倒计时效果 实现之后再进行判断 为0的时候怎么怎么

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

    <script>
        var btn = document.querySelector('button');
        var times = 3;
        btn.addEventListener('click', function() {
            btn.disabled = true; //按钮禁用
            // setInterval(function() {
            //     btn.innerHTML = '还剩' + times + '秒';
            //     times--;
            // }, 1000)
            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>

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

上一篇:Maya绑定开发学习记录(1)


下一篇:十一、天气案例————温开水的复习笔记