如何修改JS倒计时进度条代码，移除start变量以从当前时间开始？

修改后的可运行代码 #

// 目标结束时间（自行替换成你的需求时间）
const endTime = moment('2024-05-01 18:00:00');
// 进度条的起始时间：页面加载瞬间的当前时间
const progressStartTime = moment();
// 预计算总倒计时时长（毫秒）
const totalCountdownMs = endTime.diff(progressStartTime, 'milliseconds');

const updateProgressBar = () => {
  const currentTime = moment();
  // 计算从进度条启动到现在已经过了多久
  const elapsedMs = currentTime.diff(progressStartTime, 'milliseconds');
  // 计算进度百分比，限制在0-100之间
  const progressPercent = Math.min(100, Math.max(0, (elapsedMs / totalCountdownMs) * 100));

  // 更新DOM中的进度条（假设你的进度条元素ID是progress-bar）
  const barElement = document.getElementById('progress-bar');
  if (barElement) {
    barElement.style.width = `${progressPercent}%`;
  }

  // 未到结束时间就继续刷新，到点后停止并拉满进度
  if (currentTime.isBefore(endTime)) {
    requestAnimationFrame(updateProgressBar);
  } else {
    if (barElement) barElement.style.width = '100%';
  }
};

// 启动进度条
updateProgressBar();

关键计算逻辑说明 #

• 固定起始点：必须把页面加载时的当前时间存在progressStartTime里，不能每次更新都用实时的currentTime当起始——如果这么做，总时长会不断缩小，已流逝时长永远为0，百分比就会一直停在0，这就是你之前修改失败的核心原因。
• 总时长计算：totalCountdownMs = endTime.diff(progressStartTime, 'milliseconds')
  用moment的diff方法算出结束时间和进度条起始时间的毫秒差，这是进度条要走完的总长度。
• 已流逝时长：elapsedMs = currentTime.diff(progressStartTime, 'milliseconds')
  每次刷新时，算出从进度条启动到现在的时间差，这是已经走完的进度。
• 百分比校准：用Math.min(100, Math.max(0, ...))确保百分比不会超出0-100的范围——比如你打开页面时已经过了结束时间，进度条会直接显示100%，不会出现负数或超过100%的异常。
• 平滑更新：用requestAnimationFrame代替定时器，让进度条的刷新和浏览器的渲染帧率同步，避免卡顿。

额外提示 #

如果需要页面刷新后重新从当前时间开始计算（而不是延续上次的进度），这个代码直接就能用——因为每次页面加载都会重新设置progressStartTime为当前时间，总时长也会重新计算。

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