快捷導(dǎo)航

如何在js中計算兩個時間段重疊的時長問題詳解

更新時間：2024年04月29日 09:56:40 作者：流年五十前

這篇文章主要給大家介紹了關(guān)于如何在js中計算兩個時間段重疊的時長問題的相關(guān)資料,判斷兩個時間段是否重疊可以通過比較兩個時間段的開始時間和結(jié)束時間來實現(xiàn),文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近遇到一個需求，就是在js中計算兩段時間的重疊時長問題，這里記錄一下。

一、過程分析

兩段時間的重疊問題，一般有3中情況

兩段時間完全無重疊，也就是無任何交集
兩段時間有交叉
兩段時間有包含關(guān)系

為了弄清楚這個關(guān)系，我畫了一張圖來說明：

根據(jù)這張圖上的內(nèi)容，我們可以按照步驟來逐個實現(xiàn)。

第一種情況，明顯沒有重疊，所以為0
第二種情況，交叉情況下可能的結(jié)果是：end1-start2或者end2-start1
第三種情況，包含關(guān)系下可能的結(jié)果是：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>
    //兩個時間段重復(fù)的時段，返回秒數(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>

上面代碼測試結(jié)果為：