JavaScript倒计时器开发：自定义重置时间与宵禁时段显示

你的代码存在几个关键问题，导致无法实现预期需求：

• 变量复用错误：创建cstart和cend时，直接修改了同一个start对象，导致两个变量指向同一日期实例，时间判断完全失效。
• 时间判断逻辑错误：(now > cstart) && (now > cend)的逻辑完全不符合“20:30至次日5:00显示Curfew”的需求，无法覆盖完整的宵禁区间。
• 时间更新不同步：用setInterval更新now变量，但tick函数依赖setTimeout执行，两者节奏不一致，容易导致时间计算偏差。
• 显示逻辑不完整：初始的Curfew判断仅在页面加载时执行一次，后续tick函数未做判断，时间切换时无法自动更新显示；倒计时计算了秒数却未展示，文本描述也有误。

修正后的代码 #

HTML #

<div id="time"></div>

JavaScript #

function pad(num) {
  return ("0" + parseInt(num)).substr(-2);
}

function updateDisplay() {
  const now = new Date();
  const curfewStart = new Date(now);
  curfewStart.setHours(20, 30, 0, 0); // 当天20:30
  const curfewEnd = new Date(now);
  curfewEnd.setHours(5, 0, 0, 0); // 当天5:00

  // 判断是否处于宵禁时段
  const isCurfew = now >= curfewStart || now < curfewEnd;
  if (isCurfew) {
    document.getElementById("time").textContent = "Curfew";
    setTimeout(updateDisplay, 60000); // 每分钟检查一次是否退出宵禁
    return;
  }

  // 计算到当天20:30的倒计时
  const timeToCurfew = curfewStart - now;
  const hours = pad(Math.floor(timeToCurfew / (1000 * 60 * 60)));
  const minutes = pad(Math.floor((timeToCurfew % (1000 * 60 * 60)) / (1000 * 60)));
  const seconds = pad(Math.floor((timeToCurfew % (1000 * 60)) / 1000));
  
  document.getElementById("time").textContent = `${hours}:${minutes}:${seconds} 到宵禁`;
  setTimeout(updateDisplay, 1000); // 每秒更新倒计时
}

document.addEventListener("DOMContentLoaded", updateDisplay);

修正说明 #

1. 每次执行updateDisplay时重新创建时间对象，避免变量复用导致的错误，确保时间判断准确。
2. 修正宵禁判断逻辑：覆盖“当天20:30之后”和“当天5:00之前”两个区间，完整匹配需求。
3. 分场景设置定时器：宵禁时段每分钟检查一次，倒计时时段每秒更新，兼顾性能和准确性。
4. 修复显示内容：加入秒数展示，文本描述更清晰；使用textContent替代innerHTML，提升安全性。

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