zoukankan      html  css  js  c++  java
  • 按钮:点击发送短信按钮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>
  • 相关阅读:
    toString的本质 以及String.valueOf()
    css3选择符
    HTML5标签
    css3-动画
    2D功能函数
    css过度
    css渐变
    BFC-块级格式化上下文
    表单补充
    表格补充:
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12951877.html
Copyright © 2011-2022 走看看