如何实现关闭页面后仍保留倒计时的HTML计时器及24小时禁用按钮？

核心方案是利用浏览器的localStorage持久化存储倒计时的结束时间，页面重新加载时通过读取该时间戳恢复倒计时状态，避免关闭页面后数据丢失。以下是修改后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>24小时倒计时器</title>
  </head>
  <body>
    <h1 id="timer">24:00:00</h1>
    <button id="start-btn" onclick="startTimer()">Start</button>

    <script>
      const timerEl = document.getElementById("timer");
      const startBtn = document.getElementById("start-btn");
      const COUNTDOWN_DURATION = 24 * 60 * 60; // 24小时换算成秒
      let countdownInterval;

      // 页面加载时恢复状态
      window.addEventListener('load', () => {
        const endTime = localStorage.getItem('countdownEndTime');
        if (endTime) {
          const now = Date.now() / 1000; // 当前时间戳（秒）
          const remainingTime = Math.max(0, endTime - now);
          if (remainingTime > 0) {
            startBtn.disabled = true;
            updateTimerDisplay(remainingTime);
            startCountdown(remainingTime);
          } else {
            localStorage.removeItem('countdownEndTime');
            startBtn.disabled = false;
            timerEl.textContent = '24:00:00';
          }
        }
      });

      function updateTimerDisplay(seconds) {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = seconds % 60;

        const hoursStr = hours.toString().padStart(2, "0");
        const minutesStr = minutes.toString().padStart(2, "0");
        const secondsStr = secs.toString().padStart(2, "0");

        timerEl.textContent = `${hoursStr}:${minutesStr}:${secondsStr}`;
      }

      function startCountdown(remainingTime) {
        // 清除旧定时器，避免重复运行
        if (countdownInterval) clearInterval(countdownInterval);
        
        countdownInterval = setInterval(() => {
          remainingTime--;
          updateTimerDisplay(remainingTime);

          if (remainingTime <= 0) {
            clearInterval(countdownInterval);
            startBtn.disabled = false;
            localStorage.removeItem('countdownEndTime');
            timerEl.textContent = '24:00:00';
          }
        }, 1000);
      }

      function startTimer() {
        const now = Date.now() / 1000;
        const endTime = now + COUNTDOWN_DURATION;
        localStorage.setItem('countdownEndTime', endTime);
        
        startBtn.disabled = true;
        startCountdown(COUNTDOWN_DURATION);
      }
    </script>
  </body>
</html>

关键改动说明： #

• 持久化存储结束时间：点击按钮时，计算24小时后的时间戳并存储到localStorage，确保页面关闭后数据不丢失。
• 页面初始化恢复状态：页面加载时读取存储的结束时间，计算剩余时间，自动恢复倒计时或重置按钮状态。
• 基于时间戳的倒计时逻辑：不再依赖内存变量，通过当前时间和结束时间的差值计算剩余时间，避免刷新后计时错误。
• 定时器管理：每次启动倒计时前清除旧定时器，防止多个定时器同时运行导致计时混乱。
• 适配24小时格式：修改计时器显示为时:分:秒格式，符合24小时倒计时需求。

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