如何修改JS倒计时代码，实现依次指向9:30am、11am后重置至下周日？

我们需要实现三阶段循环倒计时：

1. 当前时间早于当日9:30 → 倒计时至当日9:30
2. 当前时间在9:30-11:00之间 → 倒计时至当日11:00
3. 当前时间晚于11:00 → 倒计时至下周日00:00
   每个阶段结束后自动切换到下一阶段，第三阶段结束后重新回到第一阶段循环。

完整代码实现 #

HTML部分 #

<body onload="initCountdown();">
  <h6>剩余时间：<span class="days" id="days"></span><span class="smalltext"> 天,</span>
    <span class="hours" id="hours"></span><span class="smalltext"> 时,</span>
    <span class="minutes" id="minutes"></span><span class="smalltext"> 分,</span>
    <span class="seconds" id="seconds"></span><span class="smalltext"> 秒</span>
  </h6>
</body>

JavaScript部分 #

let secTime;
let ticker;

// 初始化倒计时
function initCountdown() {
  clearInterval(ticker); // 清除旧定时器，避免重复触发
  const now = new Date();
  const targetTime = getTargetTime(now);
  const diff = Math.floor((targetTime.getTime() - now.getTime()) / 1000);
  startTimer(diff > 0 ? diff : 0);
}

// 根据当前时间判断对应阶段的目标时间
function getTargetTime(now) {
  const year = now.getFullYear();
  const month = now.getMonth();
  const day = now.getDate();
  
  const morning930 = new Date(year, month, day, 9, 30, 0);
  const morning11 = new Date(year, month, day, 11, 0, 0);
  
  if (now < morning930) {
    // 阶段1：倒计时至当日9:30
    return morning930;
  } else if (now >= morning930 && now < morning11) {
    // 阶段2：倒计时至当日11:00
    return morning11;
  } else {
    // 阶段3：倒计时至下周日
    const daysToNextSunday = now.getDay() === 0 ? 7 : 7 - now.getDay();
    return new Date(year, month, day + daysToNextSunday, 0, 0, 0);
  }
}

function startTimer(secs) {
  secTime = parseInt(secs);
  ticker = setInterval(tick, 1000);
  tick(); // 初始渲染倒计时
}

function tick() {
  let secs = secTime;
  if (secs > 0) {
    secTime--;
  } else {
    clearInterval(ticker);
    initCountdown(); // 阶段结束，自动切换到下一阶段
  }

  // 计算天、时、分、秒
  const days = Math.floor(secs / 86400);
  secs %= 86400;
  const hours = Math.floor(secs / 3600);
  secs %= 3600;
  const mins = Math.floor(secs / 60);
  secs %= 60;

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

关键改进说明 #

• 阶段判断逻辑：通过getTargetTime函数精准划分三个倒计时阶段，返回对应目标时间
• 定时器管理：每次切换阶段前清除旧定时器，避免内存泄漏和重复计时
• 时间格式化：使用padStart替代冗余的三元运算符，简洁实现数字补零效果
• 循环机制：每个阶段倒计时结束后自动调用初始化函数，实现无缝循环

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