JS中如何基于两个时间戳的流逝时长提取时分秒并实现走时时钟？

默认你从外部获取的流逝时长为毫秒级的时间戳差值，如果拿到的是秒级结果，自行乘以1000转换即可。

1. 毫秒转天/时/分/秒的转换函数 #

核心逻辑是用取余和整除运算拆分各时间单位：

function formatDuration(totalMs) {
  // 各时间单位对应的毫秒数
  const ONE_SECOND = 1000;
  const ONE_MINUTE = 60 * ONE_SECOND;
  const ONE_HOUR = 60 * ONE_MINUTE;
  const ONE_DAY = 24 * ONE_HOUR;

  // 整除拿到对应单位的数量，取余拿到剩下的毫秒数
  const days = Math.floor(totalMs / ONE_DAY);
  const remainingAfterDays = totalMs % ONE_DAY;
  
  const hours = Math.floor(remainingAfterDays / ONE_HOUR);
  const remainingAfterHours = remainingAfterDays % ONE_HOUR;
  
  const minutes = Math.floor(remainingAfterHours / ONE_MINUTE);
  const remainingAfterMinutes = remainingAfterHours % ONE_MINUTE;
  
  const seconds = Math.floor(remainingAfterMinutes / ONE_SECOND);

  // 可选：给小于10的数字补前导0，展示更统一
  const padZero = (num) => num < 10 ? `0${num}` : num;
  return {
    days: days,
    hours: padZero(hours),
    minutes: padZero(minutes),
    seconds: padZero(seconds),
    // 可以自定义输出字符串格式
    formatStr: `${days}天 ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`
  };
}

2. 自动累加走时的时钟实现 #

思路是基于初始流逝时长，每秒给总时长加1000毫秒，重新计算后更新页面展示即可：

<!-- 页面展示容器 -->
<div id="duration-clock"></div>

<script>
// 替换为你从外部拿到的初始流逝时长（毫秒）
let currentTotalMs = 123456789; 
const clockDom = document.getElementById('duration-clock');

// 首次渲染
updateClock();
// 每秒更新一次
const timer = setInterval(() => {
  currentTotalMs += 1000;
  updateClock();
}, 1000);

function updateClock() {
  const duration = formatDuration(currentTotalMs);
  clockDom.innerText = duration.formatStr;
}

// 前面的formatDuration函数放在这里
function formatDuration(totalMs) {
  const ONE_SECOND = 1000;
  const ONE_MINUTE = 60 * ONE_SECOND;
  const ONE_HOUR = 60 * ONE_MINUTE;
  const ONE_DAY = 24 * ONE_HOUR;

  const days = Math.floor(totalMs / ONE_DAY);
  const remainingAfterDays = totalMs % ONE_DAY;
  
  const hours = Math.floor(remainingAfterDays / ONE_HOUR);
  const remainingAfterHours = remainingAfterDays % ONE_HOUR;
  
  const minutes = Math.floor(remainingAfterHours / ONE_MINUTE);
  const remainingAfterMinutes = remainingAfterHours % ONE_MINUTE;
  
  const seconds = Math.floor(remainingAfterMinutes / ONE_SECOND);

  const padZero = (num) => num < 10 ? `0${num}` : num;
  return {
    days: days,
    hours: padZero(hours),
    minutes: padZero(minutes),
    seconds: padZero(seconds),
    formatStr: `${days}天 ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`
  };
}

// 可选：页面销毁时清除定时器，避免内存泄漏
window.addEventListener('beforeunload', () => {
  clearInterval(timer);
});
</script>

如果需要更高精度避免定时器偏差，可以定期从原始服务重新拉取最新的流逝时长做校准即可。

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