JavaScript实现每周一、三、五20点的纯时分秒格式跨周正确倒计时

原代码核心Bug定位 #

• 触发日判定逻辑偏差：依赖currentDay % 2 === 0判断触发日，完全未对齐周一、周三、周五的实际规则，会把周日、周二、周四等非触发日误纳入计算范围
• 时间基准被污染：到20:00节点后直接修改原currentDateTime对象的日期值，导致后续计算的参考基准错误，出现倒计时卡滞、时间差为负的失效问题
• 非均匀间隔适配缺失：硬编码固定偏移2天的跳转逻辑，完全没覆盖周五到下周一间隔3天的跨周场景
• 时间换算规则错误：计算小时数时做了% 24取模，把跨天的小时值截断，无法实现将天数全折算为小时的展示要求

修正后可直接运行的代码 #

// 配置项：固定触发的周几（对应JS getDay返回值：0=周日,1=周一,2=周二...6=周六）、每日触发时间小时数
const TRIGGER_CONFIG = {
  days: [1, 3, 5],
  hour: 20
};

const countdownTimer = setInterval(() => {
  const now = new Date();
  let nextTriggerTime = null;

  // 从当前时间开始逐天向后查找最近的有效触发节点
  // 最多向后找7天即可覆盖一整周的循环，避免死循环
  for(let offset = 0; offset < 7; offset++) {
    // 构造偏移日期的当天20:00时间点
    const checkDate = new Date(now);
    checkDate.setDate(now.getDate() + offset);
    checkDate.setHours(TRIGGER_CONFIG.hour, 0, 0, 0);
    // 如果这个时间点晚于当前时间，且当天是配置的触发日，即为目标节点
    if(checkDate > now && TRIGGER_CONFIG.days.includes(checkDate.getDay())) {
      nextTriggerTime = checkDate;
      break;
    }
  }

  // 计算剩余时间差
  const diffMs = nextTriggerTime.getTime() - now.getTime();
  // 全折算为h/m/s：总小时不做取模，直接把跨天的时长纳入小时维度
  const totalHours = Math.floor(diffMs / (1000 * 60 * 60));
  const remainMsAfterHour = diffMs - totalHours * 1000 * 60 * 60;
  const mins = Math.floor(remainMsAfterHour / (1000 * 60));
  const secs = Math.floor((remainMsAfterHour - mins * 1000 * 60) / 1000);

  // 渲染到页面
  document.querySelector('#hours').textContent = `${totalHours}h`;
  document.querySelector('#min').textContent = `${mins}m`;
  document.querySelector('#sec').textContent = `${secs}s`;
}, 1000);

对应页面结构：

<span id="hours"></span>
<span id="min"></span>
<span id="sec"></span>

逻辑适配说明 #

• 自动到点跳转：通过逐天校验时间节点的方式，只要当前时间越过了当日20:00，循环逻辑会自动向后匹配下一个有效触发点，不会出现卡滞
• 非均匀间隔适配：逐天匹配的逻辑不需要针对相邻触发日的间隔写专门判断，无论周内2天间隔、跨周3天间隔，都会自动计算准确的时间差
• 纯h/m/s展示：小时计算直接取全量总时长，不再截断跨天的时长，最终展示效果为类似47h 59m 50s的格式

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