如何在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计算时间段重叠时长内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要给大家介绍了关于如何手动实现es5中的bind方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面小编来一起学习学习吧2018-12-12
下面小编就为大家带来一篇HTML页面,测试JS对C函数的调用简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
下面小编就为大家带来一篇页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
JavaScript判断FileUpload控件上传文件类型
在CS后台代码中获取FileUpload控件上传文件的类型是比较容易的！那么，能否在客户端通过JavaScript脚本判断FileUpload上传文件类型呢？答案是可以的，下面通过一个小例子为大家展示2015-09-09
写个播放器应付复习，因为Ajax涉及到跨域获取天气信息，有两个版本，一个是直接跨域，IE10支持，其他的浏览器要改配置2013-05-05
本文主要介绍了JavaScript原生节点操作的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了JavaScript实现简单计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了JavaScript简单获取系统当前时间的方法,涉及javascript针对日期与时间的判断以及字符串组合的相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了jquery中绑定事件与解绑事件是常用到的写法，这里总结了几种常见的绑定事件与解绑事件的方法,需要的朋友可以参考下2023-05-05
消息/事件机制是几乎所有开发语言都有的机制，并不是deviceone的独创，在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件和消息机制的理解 ，需要的朋友一起学习吧2016-04-04
最新评论