如何让JavaScript倒计时器刷新页面后不重新开始？

嘿，兄弟，别慌！作为新手遇到倒计时器的问题太正常了，我帮你捋清楚问题所在，再给你一个能直接用的解决方案。

先给你一套完整的HTML+JavaScript代码，直接复制就能看到效果：

HTML部分 #

<div id="countdown-container">
  <span id="days"></span>天
  <span id="hours"></span>时
  <span id="minutes"></span>分
  <span id="seconds"></span>秒
</div>

JavaScript部分 #

// **注意：JS里月份是从0开始计数的！**6月对应的是5，别写错了！
const targetDate = new Date(new Date().getFullYear(), 5, 3);

// 核心：计算并更新倒计时的函数
function updateCountdown() {
  // 每次调用都获取最新的当前时间，这是倒计时动起来的关键
  const now = new Date();
  // 计算目标日期和当前时间的毫秒差
  const timeDifference = targetDate - now;

  // 如果已经过了6月3日，直接提示
  if (timeDifference <= 0) {
    document.getElementById('countdown-container').textContent = "目标日期已过啦！";
    return;
  }

  // 把毫秒差转换成天、时、分、秒
  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

  // 更新页面上的数字
  document.getElementById('days').textContent = days;
  document.getElementById('hours').textContent = hours;
  document.getElementById('minutes').textContent = minutes;
  document.getElementById('seconds').textContent = seconds;
}

// 页面加载时先执行一次，避免一开始空白
updateCountdown();
// 设置每秒更新一次，这样倒计时才会实时变化
setInterval(updateCountdown, 1000);

咱们来对应你遇到的两个问题：

• 结果始终不变/无结果：

  • 没加定时更新：如果只调用一次计算函数，页面只会显示初始的剩余时间，不会动。必须用setInterval每秒重新计算一次。
  • 月份设置错误：JS的Date对象月份是0到11，你要设置6月3日的话，得写5而不是6，不然目标日期会变成7月3日，或者如果当前已经过了7月，差值会是负数，计算出来的时间就不对了。
  • 当前时间写死：如果你的代码里只在开头获取一次当前时间，之后一直用这个旧时间计算，那差值永远不变，倒计时当然不动。必须每次计算都重新获取new Date()。

• 刷新后倒计时重新开始：
  这其实是浏览器的正常行为——刷新页面后所有JS代码会重新执行，倒计时会基于刷新时的当前时间重新计算剩余时间。对于“到6月3日”的倒计时来说，这是正确的逻辑，因为剩余时间本来就该跟着实时时间走。如果是你误解了这点，那不用纠结；如果确实需要刷新后“续上之前的进度”，那其实没必要，因为目标日期是固定的，剩余时间只和当前时间有关。

• 按F12打开浏览器控制台，看看有没有红色报错信息，很多时候无结果都是因为代码报错了。
• 在代码里加console.log(targetDate)、console.log(timeDifference)，打印一下目标日期和时间差，看看是不是符合预期。

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