如何用JavaScript计算当前时间与设定祈祷时间的剩余时长？

原代码核心问题 #

1. 时间差计算逻辑错误：通过new Date(时间差)获取时分秒的方式不对，因为该对象对应的是1970年1月1日的基准时间，返回的时分秒会受本地时区影响，而非实际剩余时长。
2. 祈祷时间未按顺序排列：原数组中晚的时间在前，可能导致无法找到最近的下一个祈祷时间。
3. 无实时更新机制：代码仅执行一次，倒计时不会动态刷新。

修复后的完整代码 #

JavaScript 部分

// 祈祷时间数组，按从早到晚排序
const prayers = [[13, 30], [13, 59]];

function updateCountdown() {
  const now = new Date();
  let nextPrayer = null;

  // 遍历找到最近的未来祈祷时间
  for (const [hours, minutes] of prayers) {
    const prayerTime = new Date();
    // 设置祈祷时间为整分，秒和毫秒清零
    prayerTime.setHours(hours, minutes, 0, 0);
    if (prayerTime > now) {
      nextPrayer = prayerTime;
      break; // 找到第一个符合条件的时间就停止
    }
  }

  // 处理当日祈祷时间已全部结束的情况
  if (!nextPrayer) {
    document.getElementById('nexthrs').textContent = '--';
    document.getElementById('nextmin').textContent = '--';
    document.getElementById('nextsec').textContent = '--';
    console.log('今日祈祷时间已全部结束');
    return;
  }

  // 计算剩余时长（毫秒）
  const diffMs = nextPrayer.getTime() - now.getTime();
  // 转换为小时、分钟、秒
  const remainingHours = Math.floor(diffMs / (1000 * 60 * 60));
  const remainingMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
  const remainingSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);

  // 填充到页面，确保两位数显示
  document.getElementById('nexthrs').textContent = String(remainingHours).padStart(2, '0');
  document.getElementById('nextmin').textContent = String(remainingMinutes).padStart(2, '0');
  document.getElementById('nextsec').textContent = String(remainingSeconds).padStart(2, '0');
}

// 页面加载时立即执行一次
updateCountdown();
// 每秒刷新一次倒计时
setInterval(updateCountdown, 1000);

HTML 部分

<div class="details">
    <div class="next-prayer">
        <span id="nexthrs">00</span>
        <span>:</span>
        <span id="nextmin">00</span>
        <span>:</span>
        <span id="nextsec">00</span>
    </div>
</div>

修复说明 #

• 正确计算时间差：通过毫秒差直接转换为时分秒，避免时区干扰，确保剩余时长准确。
• 排序祈祷时间：数组按时间从早到晚排列，保证找到的是最近的下一个祈祷时间。
• 实时更新：用setInterval每秒执行一次倒计时计算，实现动态刷新。
• 时间精度处理：设置祈祷时间的秒和毫秒为0，避免因当前时间的秒数导致计算误差。

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