按钮:点击发送短信按钮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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM