js按钮点击禁用时间,刷新怎么保留倒计时

你可以使用 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);

注意，以上代码仅供参考，具体实现需要根据实际情况进行调整。