如何在js中计算两个时间段重叠的时长问题详解
更新时间：2024年04月29日 09:56:40 作者：流年五十前
这篇文章主要给大家介绍了关于如何在js中计算两个时间段重叠的时长问题的相关资料,判断两个时间段是否重叠可以通过比较两个时间段的开始时间和结束时间来实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
前言
最近遇到一个需求，就是在js中计算两段时间的重叠时长问题，这里记录一下。
一、过程分析
两段时间的重叠问题，一般有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>
上面代码测试结果为：
总结
到此这篇关于如何在js中计算两个时间段重叠的时长问题详解的文章就介绍到这了,更多相关js计算时间段重叠时长内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JS简单实现浮动窗口效果,涉及javascript操作浮动窗口的创建、打开、关闭等相关操作技巧,需要的朋友可以参考下2016-09-09
JavaScript如何捕获async/await中的错误详解
在JavaScript中async/await语法简化了异步操作,但错误处理需要特别注意,这篇文章主要给大家介绍了关于JavaScript如何捕获async/await中错误的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-10-10
最好用的JS图像无缝滚动脚本，根据需要改改宽度和图像个数就可以了,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了详解ES6语法之可迭代协议和迭代器协议,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要是对js本地预览的简单实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本文给大家分享2个javascript实现简单的进度条，一个是个人制作一个是网友实现的，都很不错，这里推荐给大家。2015-07-07
这篇文章主要为大家详细介绍了由html、css、javascript结合实现的简单日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
在将uniapp打包成APP端时,上架到应用市场的时候需要配置隐私弹窗,下面这篇文章主要给大家介绍了关于如何在uniapp中设置隐私政策弹窗的相关资料,需要的朋友可以参考下2023-01-01
另类网页中添加运行效果...2006-12-12
这篇文章主要为大家介绍了从Immutable.js到Redux函数式编程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论