首页 > 其他 > 详细

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

时间:2020-05-24 19:43:10      阅读:125      评论:0      收藏:0      [点我收藏+]

实现功能:点击按钮后,该按钮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>

 

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

原文:https://www.cnblogs.com/zcy9838/p/12951877.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!