按钮:点击发送短信按钮60秒内不能再次点击的功能

实现功能:点击按钮后,该按钮60秒内不能再次点击,防止重复发送短信

① 按钮点击之后,会禁用按钮(disabled为true)

② 同时按钮里面的内容会有变化,注意button里面的内容通过innerHTML修改

③ 里面秒数是有变化的,因此需要用到定时器

④ 定义一个变量,在定时器里面,不断递减

⑤ 如果变量为0说明到了时间,需要停止定时器(否则会继续递减,出现负值),并且复原按钮初始状态。

<script>
    var btn = document.querySelector('button');
    var time = 60;   // 定义剩下的秒数
    btn.addEventListener('click', function() {
        btn.disabled = true;
        var timer = setInterval(function() {
            if (time == 0) {
                // 清除定时器和复原按钮
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 60;   // 剩余时间需要从新开始
            }
            btn.innerHTML = '还剩下' + time + '';
            time--;
        }, 1000);
    });
</script>
原文地址:https://www.cnblogs.com/zcy9838/p/12951877.html