如何在React.js中无依赖计算并展示起止时间的天数/小时数时长

核心思路 #

1. 将时分秒字符串转换为总秒数，简化差值计算
2. 处理跨天场景（结束时间早于开始时间时，默认视为次日时间）
3. 将总秒数拆解为天、小时、分钟、秒的组合
4. 根据时长自动调整展示格式（短时长优先显示小时/分/秒，长时长显示天+小时等）

完整代码实现 #

const DurationCalculator = () => {
  // 注意：时间需用字符串格式，不能直接写12:00:00
  const startTime = "12:00:00";
  const endTime = "10:23:33";

  // 把HH:MM:SS格式的字符串转换为总秒数
  const timeToSeconds = (timeStr) => {
    const [hours, minutes, seconds] = timeStr.split(":").map(Number);
    return hours * 3600 + minutes * 60 + seconds;
  };

  // 计算时间差（处理跨天情况）
  const startSeconds = timeToSeconds(startTime);
  const endSeconds = timeToSeconds(endTime);
  const totalSeconds = endSeconds < startSeconds 
    ? endSeconds + 86400 - startSeconds // 加上一天的总秒数（86400）
    : endSeconds - startSeconds;

  // 拆解总秒数为天、小时、分、秒
  const days = Math.floor(totalSeconds / 86400);
  const remainingAfterDays = totalSeconds % 86400;
  const hours = Math.floor(remainingAfterDays / 3600);
  const remainingAfterHours = remainingAfterDays % 3600;
  const minutes = Math.floor(remainingAfterHours / 60);
  const seconds = remainingAfterHours % 60;

  // 格式化展示文本
  const formatDuration = () => {
    if (days > 0) {
      return `${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;
    } else if (hours > 0) {
      return `${hours}小时 ${minutes}分 ${seconds}秒`;
    } else {
      return `${minutes}分 ${seconds}秒`;
    }
  };

  return (
    <div>
      <p>开始时间：{startTime}</p>
      <p>结束时间：{endTime}</p>
      <p>时长：<strong>{formatDuration()}</strong></p>
    </div>
  );
};

export default DurationCalculator;

关键细节说明 #

• 时间解析：timeToSeconds 函数是计算核心，确保将字符串格式的时间转换为可计算的数值
• 跨天处理：如果结束时间的秒数小于开始时间，默认判定为次日的同一时间，通过加86400秒（一天的总秒数）修正差值
• 格式化逻辑：根据时长长度自动隐藏无意义的零值字段，比如时长不到1天就不显示天数
• 格式要求：输入的时间字符串必须严格遵循 HH:MM:SS 格式，否则会出现计算错误

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