如何在JavaScript中实现24小时制时间相加并格式化总时长?
用Moment.js计算两个24小时制时间的总时长并格式化
嘿,我懂你碰到的麻烦了——Moment.js的Duration默认格式化确实不会直接给出超过24小时的累计小时数,默认的HH只会显示一天内的小时(0-23),所以直接用duration.format("HH:mm")肯定得不到你想要的35:50这种结果。别着急,咱们一步步来搞定它:
步骤1:把时间字符串转成可计算的数值
首先得把两个时间字符串拆解成小时和分钟,转换成总分钟数相加,这样能避免日期时间的干扰(毕竟咱们要的是时长总和,不是具体的时间点):
const time1 = "12:10"; const time2 = "23:40"; // 写个小工具函数,把"HH:mm"转成总分钟数 const convertTimeToMinutes = (timeStr) => { const [hours, minutes] = timeStr.split(":").map(Number); return hours * 60 + minutes; }; // 计算两个时间的总分钟数 const totalMinutes = convertTimeToMinutes(time1) + convertTimeToMinutes(time2);
步骤2:用Moment.js Duration包装总时长
把总分钟数传给moment.duration,得到Duration对象:
const totalDuration = moment.duration(totalMinutes, 'minutes');
步骤3:自定义格式化函数(关键!)
因为默认的格式化方法不支持累计小时数,所以咱们自己写个函数来计算总小时和剩余分钟:
const formatTotalDuration = (duration) => { // 拿到累计的总小时数(取整数部分) const totalHours = Math.floor(duration.asHours()); // 拿到剩余的分钟数 const remainingMinutes = duration.minutes(); // 给分钟补零,确保是两位数(比如5分钟显示成05) return `${totalHours}:${remainingMinutes.toString().padStart(2, '0')}`; }; // 最终得到格式化后的总时长 const totalTime = formatTotalDuration(totalDuration); console.log(totalTime); // 输出:35:50
为什么默认方法不行?
简单说,Moment.js的Duration里的HH占位符代表的是「一天中的小时数」(范围0-23),而我们需要的是所有累计的小时数,所以必须通过duration.asHours()来获取总小时数,再搭配剩余的分钟数来拼接格式。
如果你的场景里还需要处理秒数或者更复杂的时长,只需要在格式化函数里加上对应的计算逻辑就好啦~
内容的提问来源于stack exchange,提问作者Klt




