如何在js中計算兩個時間段重疊的時長問題詳解
更新時間：2024年04月29日 09:56:40 作者：流年五十前
這篇文章主要給大家介紹了關于如何在js中計算兩個時間段重疊的時長問題的相關資料,判斷兩個時間段是否重疊可以通過比較兩個時間段的開始時間和結束時間來實現(xiàn),文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
前言
最近遇到一個需求，就是在js中計算兩段時間的重疊時長問題，這里記錄一下。
一、過程分析
兩段時間的重疊問題，一般有3中情況
- 兩段時間完全無重疊，也就是無任何交集
- 兩段時間有交叉
- 兩段時間有包含關系
為了弄清楚這個關系，我畫了一張圖來說明：
根據(jù)這張圖上的內容，我們可以按照步驟來逐個實現(xiàn)。
- 第一種情況，明顯沒有重疊，所以為0
- 第二種情況，交叉情況下可能的結果是：end1-start2或者end2-start1
- 第三種情況，包含關系下可能的結果是：end2-start2或者end1-start1
根據(jù)上面的分析，我們可以直接寫代碼
二、實現(xiàn)代碼(js)
JavaScript處理日期我推薦一個插件庫【Moment.js】點擊官網(wǎng)
使用這個工具我們就能很輕松處理日期的各種操作。代碼如下：
<!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>
//兩個時間段重復的時段，返回秒數(shù)
//傳入兩個數(shù)組
function bw(times1,times2){
if(!Array.isArray(times1) || !Array.isArray(times2) || times1.length!=2 || times2.length!=2){
console.log('參數(shù)錯誤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('參數(shù)錯誤2')
return 0;
}
//先判斷數(shù)據(jù)正確性
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、數(shù)據(jù)正確性
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計算時間段重疊時長內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要給大家介紹了關于如何手動實現(xiàn)es5中的bind方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面小編來一起學習學習吧2018-12-12
下面小編就為大家?guī)硪黄狧TML頁面,測試JS對C函數(shù)的調用簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
頁面縮放兼容性處理方法(zoom,Firefox火狐瀏覽器)
下面小編就為大家?guī)硪黄撁婵s放兼容性處理方法(zoom,Firefox火狐瀏覽器)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript判斷FileUpload控件上傳文件類型
在CS后臺代碼中獲取FileUpload控件上傳文件的類型是比較容易的！那么，能否在客戶端通過JavaScript腳本判斷FileUpload上傳文件類型呢？答案是可以的，下面通過一個小例子為大家展示2015-09-09
寫個播放器應付復習，因為Ajax涉及到跨域獲取天氣信息，有兩個版本，一個是直接跨域，IE10支持，其他的瀏覽器要改配置2013-05-05
本文主要介紹了JavaScript原生節(jié)點操作的相關知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單計算器小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript簡單獲取系統(tǒng)當前時間完整示例
這篇文章主要介紹了JavaScript簡單獲取系統(tǒng)當前時間的方法,涉及javascript針對日期與時間的判斷以及字符串組合的相關技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jquery中綁定事件與解綁事件是常用到的寫法，這里總結了幾種常見的綁定事件與解綁事件的方法,需要的朋友可以參考下2023-05-05
消息/事件機制是幾乎所有開發(fā)語言都有的機制，并不是deviceone的獨創(chuàng)，在某些語言稱之為消息(Event),有些地方稱之為(Message).接下來通過本文給大家介紹JS事件和消息機制的理解 ，需要的朋友一起學習吧2016-04-04