看起来你是把倒计时的初始值硬写成了15天，而没有基于实际的截止日期来动态计算剩余时间——这就是为什么每次刷新页面都会从头开始的原因。别担心，我们可以通过几个简单的调整来搞定这个问题：

核心思路 #

不再硬编码初始的倒计时天数，而是：

1. 定义一个固定的目标截止日期（比如你希望倒计时结束的具体时间）
2. 每次页面加载时，计算当前时间与目标日期的时间差
3. 将时间差转换为天、时、分、秒，并实时更新显示

完整示例代码 #

HTML 结构 #

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

JavaScript 逻辑 #

// 1. 设置你的目标截止日期（格式：YYYY-MM-DDTHH:MM:SS，可根据需求调整）
const targetDate = new Date('2024-12-31T23:59:59').getTime();

// 2. 定义更新倒计时的函数
function updateCountdown() {
  // 获取当前时间的时间戳
  const now = new Date().getTime();
  // 计算剩余时间（毫秒）
  const timeRemaining = targetDate - now;

  // 处理截止日期已过的情况
  if (timeRemaining <= 0) {
    document.getElementById('days').textContent = '0';
    document.getElementById('hours').textContent = '0';
    document.getElementById('minutes').textContent = '0';
    document.getElementById('seconds').textContent = '0';
    document.querySelector('.countdown').innerHTML = '<p>倒计时已结束！</p>';
    clearInterval(countdownInterval); // 停止定时器
    return;
  }

  // 将毫秒转换为天、时、分、秒
  const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

  // 更新DOM显示
  document.getElementById('days').textContent = days;
  document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); // 补零显示
  document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
  document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}

// 3. 页面加载时立即更新一次，然后每秒刷新一次
updateCountdown();
const countdownInterval = setInterval(updateCountdown, 1000);

关键注意事项 #

• 时区问题：如果你需要统一时区（比如UTC），可以在目标日期后加上'Z'，例如new Date('2024-12-31T23:59:59Z')，避免不同时区的用户看到不同的倒计时。
• 补零显示：使用padStart(2, '0')可以让小于10的数字显示为两位（比如“05”而不是“5”），提升视觉体验。
• 停止定时器：当倒计时结束时，记得用clearInterval停止定时器，避免不必要的性能消耗。

这样修改后，无论用户何时访问你的网站，倒计时都会基于你设定的截止日期实时计算剩余时间，不会再出现每次刷新重置的问题了。

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