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