本文详解在JavaScript中计算两个时间段重叠时长的方法。通过分析无重叠、交叉和包含三种情况，推导重叠时长计算公式，并结合Moment.js库提供完整代码示例，帮助开发者快速解决时间区间计算问题。
前言
近期在处理开发需求时，遇到了计算JavaScript中两个时间段重叠时长的场景，特此整理记录相关解决方案。
一、过程分析
针对两个时间段的重叠关系，通常可以归纳为以下三种情形：
- 1. 两段时间完全无重叠，即两者不存在任何交集。
- 2. 两段时间存在部分交叉。
- 3. 两段时间存在包含关系，即其中一个时间段完全位于另一个时间段内部。
为了直观展示上述逻辑关系，这里绘制了一张示意图进行说明：
基于该图示内容，我们可以按照以下步骤逐一实现计算逻辑。
- 第一种情况：由于两段时间明显没有重叠，因此重叠时长为0。
- 第二种情况：当两段时间发生交叉时，可能的重叠结果计算方式为 end1 - start2 或 end2 - start1。
- 第三种情况：当两段时间存在包含关系时，可能的重叠结果计算方式为 end2 - start2 或 end1 - start1。
基于上述逻辑分析，可以直接编写相应的实现代码。
二、实现代码(js)
JavaScript处理日期我推荐一个插件库【Moment.js】点击官网
借助该工具，我们可以便捷地处理各类日期操作。具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
<script>
//两个时间段重复的时段，返回秒数
//传入两个数组
function bw(times1,times2){
if(!Array.isArray(times1) || !Array.isArray(times2) || times1.length!=2 || times2.length!=2){
console.log('参数错误1')
return 0;
}
var start1=moment(times1[0]);
var end1=moment(times1[1]);
var start2=moment(times2[0]);
var end2=moment(times2[1]);
if(!start1.isValid() || !end1.isValid() || !start2.isValid() || !end2.isValid()){
console.log('参数错误2')
return 0;
}
//先判断数据正确性
if(start1.isAfter(end1) || start2.isAfter(end2)){
console.log('时间范围不正确')
return 0;
}
//第一种情况
if(end1.isSameOrBefore(start2) || end2.isSameOrBefore(start1)) {
console.log('两段时间无交叉')
return 0;
}
//第二种情况:1,这种情况就是end1-start2
if(start1.isSameOrBefore(start2) && end1.isSameOrBefore(end2) && start2.isSameOrBefore(end1)){
var duration = moment.duration(end1.diff(start2))
//duration.as('hours');
//duration.as('minutes');
//duration.as('seconds');
//duration.as('milliseconds');
console.log('交叉情况1')
return duration.as('seconds')
}
//第二种情况:2,这种情况就是end2-start1
if(start2.isSameOrBefore(start1) && end2.isSameOrBefore(end1) && start1.isSameOrBefore(end2)){
var duration = moment.duration(end2.diff(start1))
//duration.as('hours');
//duration.as('minutes');
//duration.as('seconds');
//duration.as('milliseconds');
console.log('交叉情况2')
return duration.as('seconds')
}
//第三种情况:1,time1包含time2 这是就是：end2-start2
if(start1.isSameOrBefore(start2) && end2.isSameOrBefore(end1)){
var duration = moment.duration(end2.diff(start2))
//duration.as('hours');
//duration.as('minutes');
//duration.as('seconds');
//duration.as('milliseconds');
console.log('包含情况1')
return duration.as('seconds')
}
//第三种情况:2,time2包含time1 这是就是：end1-start1
if(start2.isSameOrBefore(start1) && end1.isSameOrBefore(end2)){
var duration = moment.duration(end1.diff(start1))
//duration.as('hours');
//duration.as('minutes');
//duration.as('seconds');
//duration.as('milliseconds');
console.log('包含情况2')
return duration.as('seconds')
}
console.log('未匹配到任何模式')
return 0
}
//测试
//1、数据正确性
console.log(bw(['2024-01-01 00:03:01','2024-01-01 00:01:01'],['2024-01-01 00:00:50','2024-01-01 00:01:55']))
//2、两段时间无交叉
console.log(bw(['2024-01-01 00:01:01','2024-01-01 00:01:01'],['2024-01-02 00:00:50','2024-01-02 00:01:55']))
//3、交叉情况1
console.log(bw(['2024-01-01 00:00:01','2024-01-01 00:01:01'],['2024-01-01 00:00:50','2024-01-01 00:01:55']))
//4、交叉情况2
console.log(bw(['2024-01-01 00:00:50','2024-01-01 00:01:55'],['2024-01-01 00:00:01','2024-01-01 00:01:01']))
//5、包含情况1
console.log(bw(['2024-01-01 00:00:01','2024-01-01 00:01:55'],['2024-01-01 00:00:50','2024-01-01 00:01:01']))
//6、包含情况2
console.log(bw(['2024-01-01 00:00:50','2024-01-01 00:01:01'],['2024-01-01 00:00:01','2024-01-01 00:01:55']))
</script>
</body>
</html>
上述代码的测试结果如下：
总结
至此，关于如何在JavaScript中计算两个时间段重叠时长的详解已介绍完毕。如需了解更多相关JS计算时间段重叠时长的内容，建议搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！