特定时段循环倒计时器实现求助：每日8-16点显示倒计时其余时段展示提示的代码排查

原代码核心问题 #

• getTom 函数内未定义now变量，直接调用now.getDate()会抛出引用错误，代码无法正常初始化运行
• setInterval 未指定执行间隔，默认按最短间隔运行会造成不必要的性能浪费，倒计时场景按1000ms（1秒）执行即可
• 目标时间更新逻辑顺序错误：倒计时结束后先执行startCountdown()再更新countDownDate，导致新启动的倒计时依然使用旧的过期时间
• 时间节点不符合需求：原代码目标时间设为16:30，且没有适配页面加载时处于非工作时段（16点~次日8点）的场景，首次加载可能显示错误内容
• 循环逻辑偏差：16点后需要显示16小时固定提示，对应到次日8点后重新启动到当日16点的倒计时，原代码的时间累加逻辑没有对齐这个时段要求

修改后可运行代码 #

// 获取当前需要的目标时间节点
const getTargetTime = () => {
  const now = new Date();
  const currentHour = now.getHours();
  const target = new Date();
  if (currentHour >= 8 && currentHour < 16) {
    // 工作时段：目标为今日16点
    target.setHours(16, 0, 0, 0);
  } else if (currentHour >= 16) {
    // 16点后：目标为次日8点
    target.setDate(target.getDate() + 1);
    target.setHours(8, 0, 0, 0);
  } else {
    // 0点到8点：目标为当日8点
    target.setHours(8, 0, 0, 0);
  }
  return target.getTime();
}

window.onload = function() {
  let countDownDate = getTargetTime();
  let timer = null;

  const updateDisplay = () => {
    const now = new Date().getTime();
    const currentHour = new Date().getHours();
    const distance = countDownDate - now;

    if (currentHour >= 8 && currentHour < 16) {
      // 工作时段展示倒计时
      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
      document.getElementById("time").innerText = `${days} 天, ${hours} 时, ${minutes} 分, ${seconds} 秒`;
    } else {
      // 非工作时段展示固定提示，可自行修改文案
      document.getElementById("time").innerText = "非工作时段，倒计时将于次日8点重启";
    }

    // 到达目标时间后更新目标节点，自动进入下一轮循环
    if (distance < 0) {
      countDownDate = getTargetTime();
    }
  }

  // 每秒更新一次展示
  timer = setInterval(updateDisplay, 1000);
  // 首次加载立即执行一次避免页面空白
  updateDisplay();
}

修改说明 #

• 新增了当前时段判断逻辑，页面首次加载时如果处于16点~次日8点，直接显示固定提示
• 修正了目标时间计算逻辑，自动适配工作/非工作时段的时间节点要求
• 修复了变量未定义、逻辑顺序错误、定时器间隔缺失等基础语法/逻辑问题
• 移除了冗余的嵌套定时器逻辑，仅用单个定时器即可完成全时段循环调度

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