0
点赞
收藏
分享

微信扫一扫

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

mm_tang 2022-02-06 阅读 54

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

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

<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 条评论