js实现按钮禁用倒计时

    <button type="button">测试</button>
        var btn = document.querySelector('button');
        var timer = null;
        btn.onclick = (function() {
            this.disabled = true;
            var n = 10;
            timer = setInterval(function() {
                this.innerText = '距下次点击还剩' + n + '秒';
                n--;
                if (n < 0) {
                    clearInterval(timer);
                    this.disabled = false;
                    this.innerText = '测试';
                }
                console.log(this);
            }.bind(this), 1000);
            //这里使用bind可以用来在不同作用域中调整this指向
        })
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你可以使用 JavaScript 中的定时器 setInterval() 来实现按钮点击禁用时间和计时功能。具体实现如下: 1. 定义一个计时器变量,用于存储定时器的 ID。 ``` var timer; ``` 2. 给按钮添加点击事件,点击按钮禁用按钮并开始计时。 ``` document.getElementById("btn").onclick = function() { // 禁用按钮 document.getElementById("btn").disabled = true; // 设置计时时间 var seconds = 60; // 启动定时器 timer = setInterval(function() { // 更新计时时间 seconds--; // 显示计时时间 document.getElementById("countdown").innerHTML = seconds + "秒"; // 计时结束,清除定时器 if (seconds <= 0) { clearInterval(timer); // 恢复按钮 document.getElementById("btn").disabled = false; // 清除计时显示 document.getElementById("countdown").innerHTML = ""; } }, 1000); } ``` 3. 页面刷新后,需要保留计时时间。可以使用浏览器的本地存储(localStorage)来实现。在页面加载时,读取本地存储中的计时时间,如果存在则恢复计时,否则不进行操作。 ``` window.onload = function() { // 从本地存储中读取计时时间 var seconds = localStorage.getItem("countdownSeconds"); // 如果计时时间存在,恢复计时 if (seconds) { // 禁用按钮 document.getElementById("btn").disabled = true; // 启动定时器 timer = setInterval(function() { // 更新计时时间 seconds--; // 显示计时时间 document.getElementById("countdown").innerHTML = seconds + "秒"; // 计时结束,清除定时器 if (seconds <= 0) { clearInterval(timer); // 恢复按钮 document.getElementById("btn").disabled = false; // 清除计时显示 document.getElementById("countdown").innerHTML = ""; // 移除本地存储中的计时时间 localStorage.removeItem("countdownSeconds"); } else { // 更新本地存储中的计时时间 localStorage.setItem("countdownSeconds", seconds); } }, 1000); } } ``` 4. 在定时器中更新本地存储中的计时时间,以便在页面刷新后恢复计时。 ``` // 更新本地存储中的计时时间 localStorage.setItem("countdownSeconds", seconds); ``` 注意,以上代码仅供参考,具体实现需要根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鳕鱼&羚羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值