如何实现按钮点击后禁用指定时长并自动恢复，且页面刷新保持状态？

你的核心问题是没用时间戳记录按钮的禁用截止时间，而是用了剩余秒数，导致页面刷新后无法准确判断是否还在禁用期，同时原代码的定时器逻辑在刷新后会失效。下面是修正后的代码，完美解决刷新后保持禁用的问题：

// 获取所有目标按钮
const btns = document.querySelectorAll('.btn');
// 禁用时长（单位：毫秒，示例为10秒，可改为24*60*60*1000即24小时）
const DISABLE_DURATION = 10 * 1000;

// 初始化按钮状态
function initBtnStates() {
  btns.forEach(btn => {
    const disableUntil = localStorage.getItem(`btn_disable_until_${btn.id}`);
    if (disableUntil) {
      const now = Date.now();
      if (now < parseInt(disableUntil)) {
        // 未到解禁时间，禁用按钮并设置恢复定时器
        btn.disabled = true;
        const remainingTime = parseInt(disableUntil) - now;
        setTimeout(() => {
          enableBtn(btn);
        }, remainingTime);
      } else {
        // 已过解禁时间，清除存储并恢复按钮
        enableBtn(btn);
      }
    }
  });
}

// 恢复按钮可用状态
function enableBtn(btn) {
  btn.disabled = false;
  localStorage.removeItem(`btn_disable_until_${btn.id}`);
}

// 绑定按钮点击事件
function bindBtnEvents() {
  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      const disableUntil = Date.now() + DISABLE_DURATION;
      // 存储禁用截止时间戳
      localStorage.setItem(`btn_disable_until_${btn.id}`, disableUntil);
      btn.disabled = true;
      alert('Your next vote will be available in 10s'); // 文案可根据实际时长修改
      // 设置定时器到期后恢复按钮
      setTimeout(() => {
        enableBtn(btn);
      }, DISABLE_DURATION);
    });
  });
}

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', () => {
  initBtnStates();
  bindBtnEvents();
});

对应的HTML：

<button class="btn" id="myBtn" onclick="add1()">Click for +1</button>

关键改进点 #

• 时间戳记录截止时间：每个按钮单独存储自己的禁用截止时间戳，刷新后直接对比当前时间与截止时间，判断是否需要保持禁用。
• 页面加载重校验状态：initBtnStates函数在页面加载时遍历所有按钮，根据存储的时间戳决定是否禁用，并重新设置恢复定时器，解决刷新后定时器失效的问题。
• 独立管理按钮状态：每个按钮的禁用状态互不干扰，支持多按钮场景。
• 统一状态恢复逻辑：enableBtn函数统一处理恢复按钮、清除存储的操作，避免重复代码。

内容的提问来源于stack exchange，提问作者Kronos