如何实现年度进度每1%的子倒计时？计算下一次增量剩余时间

需求说明 #

当前年度进度已达29%，现有进度计算逻辑（代码中final变量）运行正常，需实现：

• 计算距离下一个1%进度（如30%）的剩余时间
• 进度到达目标百分比后，自动计算下一个1%的剩余时间

已知每1%进度增量对应时长约为87.6小时（计算公式：24*365/100）。

现有代码 #

JavaScript代码 #

setInterval(function () {
  const dt = new Date();
  document.getElementById("datetime").innerHTML =
    ("0" + dt.getDate()).slice(-2) +
    "." +
    ("0" + (dt.getMonth() + 1)).slice(-2) +
    "." +
    dt.getFullYear() +
    " " +
    ("0" + dt.getHours()).slice(-2) + 
    ":" +
    ("0" + dt.getMinutes()).slice(-2) +
    ":" +
    ("0" + dt.getSeconds()).slice(-2)
}, 1);

const start = new Date(2023,12,1); 
const end = new Date(2024,12,1);
const today = new Date();
const total = end - start;
let progress = today - start;
const final = Math.round(progress / total * 100 ) + "%"
const finalCalc = document.querySelector("#percentage")
finalCalc.innerHTML = final;

HTML代码 #

Current time: <span id="datetime"></span><br>
Progress: <span id="percentage"></span><br>
Until next %-increment: <span id="remaining">?</span>

期望输出 #

下一个进度百分比增量将在 xxx 小时后到来

解决方案 #

要实现实时更新剩余时间，需将进度计算和剩余时间逻辑整合到定时器中，确保每秒刷新数据。以下是修改后的完整代码：

修改后的JavaScript代码 #

// 定义年度时间范围（注意：Date对象月份为0基索引，11代表12月）
const start = new Date(2023, 11, 1);
const end = new Date(2024, 11, 1);
const totalMs = end - start;

setInterval(function () {
  // 更新当前时间显示
  const dt = new Date();
  document.getElementById("datetime").innerHTML =
    ("0" + dt.getDate()).slice(-2) +
    "." +
    ("0" + (dt.getMonth() + 1)).slice(-2) +
    "." +
    dt.getFullYear() +
    " " +
    ("0" + dt.getHours()).slice(-2) + 
    ":" +
    ("0" + dt.getMinutes()).slice(-2) +
    ":" +
    ("0" + dt.getSeconds()).slice(-2);

  // 计算当前进度
  const today = new Date();
  const elapsedMs = today - start;
  const currentProgress = (elapsedMs / totalMs) * 100;
  const roundedProgress = Math.round(currentProgress) + "%";
  document.querySelector("#percentage").innerHTML = roundedProgress;

  // 计算下一个1%的剩余时间
  const nextPercent = Math.ceil(currentProgress);
  // 处理进度达到100%的边界情况
  if (nextPercent > 100) {
    document.getElementById("remaining").innerHTML = "已完成年度进度";
    document.querySelector("#remaining-desc").innerHTML = "年度进度已全部完成";
    return;
  }
  const remainingProgressRatio = (nextPercent - currentProgress) / 100;
  const remainingMs = remainingProgressRatio * totalMs;
  // 转换为小时并保留1位小数
  const remainingHours = (remainingMs / (1000 * 60 * 60)).toFixed(1);
  
  // 更新剩余时间显示
  document.getElementById("remaining").innerHTML = `${remainingHours} 小时`;
  document.querySelector("#remaining-desc").innerHTML = `下一个进度百分比增量将在 ${remainingHours} 小时后到来`;
}, 1000); // 改为每秒更新一次，降低性能消耗

修改后的HTML代码 #

Current time: <span id="datetime"></span><br>
Progress: <span id="percentage"></span><br>
Until next %-increment: <span id="remaining">?</span>
<blockquote id="remaining-desc"></blockquote>

关键逻辑说明 #

1. 修正月份索引：JavaScript的Date对象月份为0基索引（0=1月，11=12月），原代码中new Date(2023,12,1)实际指向2024年1月1日，已修正为正确的年度时间范围。
2. 整合到定时器：将进度计算和剩余时间逻辑移到setInterval内，确保每秒实时更新数据。
3. 精确进度计算：使用未四舍五入的currentProgress计算剩余比例，避免进度跳变时的误差。
4. 自动切换目标：用Math.ceil(currentProgress)获取下一个整数百分比，进度刚好达到整数时自动切换到下一个目标。
5. 时间单位转换：将剩余毫秒数转换为小时，保留1位小数，与已知的87.6小时增量匹配。
6. 边界处理：当进度超过100%时，显示完成提示。

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