添加年份模块后JavaScript倒计时日期偏差问题求助

我正在制作一个指向2026年7月4日的HTML倒计时页面，但倒计时天数偏差了几十天。请问我哪里出错了？

代码大部分参考了在线模板，我新增了年份显示模块，并添加了相关变量与计算逻辑来填充yearBox。

以下是我的代码：

JavaScript代码 #

let yearBox = document.getElementById("year-box"); // this part I added to make the year box
let dayBox = document.getElementById("day-box");
let hrBox = document.getElementById("hr-box");
let minBox = document.getElementById("min-box");
let secBox = document.getElementById("sec-box");
let endDate = new Date(2026, 07, 04, 00, 00); // I changed the date from the template
let endTime = endDate.getTime();

function countdown() {
  let todayDate = new Date();
  let todayTime = todayDate.getTime();
  let remainingTime = endTime - todayTime;
  let oneMin = 60 * 1000;
  let oneHr = 60 * oneMin;
  let oneDay = 24 * oneHr;
  let oneYear = 365 * oneDay; // I added this calculation to help the year calculations

  let addZeroes = (num) => (num < 10 ? `0${num}` : num);

  if (endTime < todayTime) {
    clearInterval(i);
    document.querySelector(
      ".countdown"
    ).innerHTML = `<h1>Event has passed</h1>`;
  } else {
    let yearsLeft = Math.floor(remainingTime / oneYear); // the original template had the largest box in days, but I changed it to create a "yearsLeft" variable.
    let daysLeft = Math.floor((remainingTime % oneYear) / oneDay);
    let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
    let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
    let secsLeft = Math.floor((remainingTime % oneMin) / 1000);

    yearBox.textContent = addZeroes(yearsLeft);
    dayBox.textContent = addZeroes(daysLeft);
    hrBox.textContent = addZeroes(hrsLeft);
    minBox.textContent = addZeroes(minsLeft);
    secBox.textContent = addZeroes(secsLeft);
  }
}

let i = setInterval(countdown, 1000);
countdown();

HTML代码 #

<body>
    <div class="countdown">
      <div class="box">
          <span class="num" id="year-box">00</span>
          <span class="text">Years</span>
        </div>  
      <div class="box">
        <span class="num" id="day-box">00</span>
        <span class="text">Days</span>
      </div>
      <div class="box">
        <span class="num" id="hr-box">00</span>
        <span class="text">Hours</span>
      </div>
      <div class="box">
        <span class="num" id="min-box">00</span>
        <span class="text">Minutes</span>
      </div>
      <div class="box">
        <span class="num" id="sec-box">00</span>
        <span class="text">Seconds</span>
      </div>
    </div>
  </div>
  <!-- Script -->
  <script src="script.js"></script>
</body>

问题分析与修正 #

1. 月份索引错误（核心偏差原因） #

JavaScript的Date对象中，月份采用0索引规则（0对应1月，1对应2月，以此类推）。你写的new Date(2026, 07, 04)实际指向的是2026年8月4日，而非目标的7月4日，这直接导致倒计时天数多算了31天左右。

修正方式：将月份参数从07改为06：

let endDate = new Date(2026, 06, 04, 00, 00);

2. 固定年天数计算的误差 #

用365 * oneDay定义一年时长忽略了闰年（366天）的存在，直接通过取余计算剩余天数会累积误差。以下是更准确的年份与天数计算逻辑：

修正后的完整JavaScript代码 #

let yearBox = document.getElementById("year-box");
let dayBox = document.getElementById("day-box");
let hrBox = document.getElementById("hr-box");
let minBox = document.getElementById("min-box");
let secBox = document.getElementById("sec-box");
// 修正月份索引，7月对应06
let endDate = new Date(2026, 06, 04, 00, 00);
let endTime = endDate.getTime();

function countdown() {
  let todayDate = new Date();
  let todayTime = todayDate.getTime();
  let remainingTime = endTime - todayTime;
  let oneMin = 60 * 1000;
  let oneHr = 60 * oneMin;
  let oneDay = 24 * oneHr;

  let addZeroes = (num) => (num < 10 ? `0${num}` : num);

  if (endTime < todayTime) {
    clearInterval(i);
    document.querySelector(".countdown").innerHTML = `<h1>Event has passed</h1>`;
    return;
  }

  // 准确计算剩余年数与天数
  let currentYear = todayDate.getFullYear();
  let targetYear = endDate.getFullYear();
  let yearsLeft = targetYear - currentYear;
  
  // 检查当前日期是否已超过当年的目标日期
  let tempTargetDate = new Date(currentYear, endDate.getMonth(), endDate.getDate());
  if (todayDate > tempTargetDate) {
    yearsLeft--;
    tempTargetDate.setFullYear(currentYear + yearsLeft + 1);
  } else {
    tempTargetDate.setFullYear(currentYear + yearsLeft);
  }

  // 计算到下一个目标日期的剩余天数
  let daysLeft = Math.floor((tempTargetDate.getTime() - todayTime) / oneDay);
  // 计算剩余时分秒
  let remainingAfterDays = remainingTime % oneDay;
  let hrsLeft = Math.floor(remainingAfterDays / oneHr);
  let minsLeft = Math.floor((remainingAfterDays % oneHr) / oneMin);
  let secsLeft = Math.floor((remainingAfterDays % oneMin) / 1000);

  yearBox.textContent = addZeroes(yearsLeft);
  dayBox.textContent = addZeroes(daysLeft);
  hrBox.textContent = addZeroes(hrsLeft);
  minBox.textContent = addZeroes(minsLeft);
  secBox.textContent = addZeroes(secsLeft);
}

let i = setInterval(countdown, 1000);
countdown();

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