js根据时间计算时间差

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时间计算</title>
</head>
<style type="text/css">

    table {
        width: 100%;
        background: #e1e4e5;
    }

    table thead tr th {
        background-color: #e1e4e5;
    }


    table tbody tr td {
        padding: 2px;

        background-color: white;
    }

    table tbody tr td input {

        border: 0;
        border-bottom: 1px solid black;
        width: 98%;
        text-align: center;
    }

    div {
        width: 700px;
        text-align: center;
        padding: 5px;
        border: 1px solid #e1e4e5;
    }

</style>
<body id="body">
</body>
<script>

    var body = document.getElementById("body");
    var div = document.createElement("div")
    var table = document.createElement("table")
    var thead = document.createElement("thead")
    var tbody = document.createElement("tbody")
    var tbody2 = document.createElement("tbody")
    var maxDate, minDate;

    function load() {
        let span = $("h1");
        span.innerHTML = "计算时间";
        div.append(span);

        let label = $("label");
        label.style.float = "right"
        label.style.textAlign = "right"
        label.style.marginBottom="5px"
        label.style.color="red"
        label.innerHTML = "ps:计算时间戳，开始时间必须小于结束时间"
        div.append(label);

        var tr = $("tr")
        var th1 = $("th")
        var th2 = $("th")
        var th3 = $("th")
        var th4 = $("th")

        th1.innerHTML = "开始时间"
        th2.innerHTML = "结束时间"
        th3.innerHTML = "时间差"
        th4.innerHTML = "操作"
        tr.append(th1)
        tr.append(th2)
        tr.append(th3)
        tr.append(th4)
        thead.append(tr)

        let tr2 = $("tr")
        let td1 = $("td")
        td1.setAttribute("colspan", "2");
        let td2 = $("td")
        let td3 = $("td")
        td1.innerHTML = "合计:最小-最大时间";
        td2.innerHTML = "时间戳";
        let button1 = $("button")
        button1.innerHTML = "重新计算"
        button1.onclick = function () {
            countDate();
        }

        td3.append(button1);
        tr2.append(td1)
        tr2.append(td2)
        tr2.append(td3)
        tbody2.append(tr2)

        table.append(thead)
        table.append(tbody)
        table.append(tbody2)
        div.append(table)
        body.append(div);
        addTr()
    }

    function addTr() {
        var tr = $("tr"), td1 = $("td"), td2 = $("td"), td3 = $("td"), td4 = $("td");

        var input1 = $("input")
        input1.placeholder = "格式：2021-05-19 07:31:17"
        var input2 = $("input")
        input2.placeholder = "格式：2021-05-19 07:31:17"
        var button1 = $("button")
        button1.innerHTML = "添加"
        button1.onclick = function () {
            addTr(this)
        }

        var button2 = $("button")
        button2.innerHTML = "删除"
        button2.onclick = function (e) {
            delTr(e);
        }

        countDate()

        td1.append(input1)
        td2.append(input2)
        td3.innerHTML = "输入时间";
        td4.append(button1)
        td4.append(button2)
        tr.append(td1)
        tr.append(td2)
        tr.append(td3)
        tr.append(td4)
        tbody.append(tr)
        disabledButton();

    }

    function delTr(event) {
        let trs = tbody.getElementsByTagName("tr");
        if (trs.length == 1) return;
        let tr = event.toElement.parentNode.parentNode
        tbody.removeChild(tr);
        disabledButton();
        countDate();
    }

    function disabledButton() {
        let trs = tbody.getElementsByTagName("tr");
        let buttons = trs[0].getElementsByTagName("button");
        if (trs.length === 1) {
            buttons[1].disabled = true;
        } else {
            buttons[1].disabled = false;
        }
    }

    // 计算日期
    function countDate() {
        let trs = tbody.getElementsByTagName("tr");

        for (let i = 0; i < trs.length; i++) {
            let tr = trs[i];
            let tds = tr.getElementsByTagName("td")
            let startDate = tds[0].getElementsByTagName("input")[0].value
            let endDate = tds[1].getElementsByTagName("input")[0].value
            tds[2].innerHTML = doCountDate(startDate, endDate);
            if (i == 0) minDate = startDate;
            maxDate = endDate;
        }
        let tds = tbody2.getElementsByTagName("tr")[0].getElementsByTagName("td")
        tds[0].style.textAlign = "left";
        tds[0].innerHTML = "合计: " + (!minDate ? "最小时间" : minDate) + "  至  " + (!maxDate ? "最大时间" : maxDate);
        tds[1].innerHTML = doCountDate(minDate, maxDate)

    }

    function doCountDate(startDate, endDate) {

        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        if (userAgent.indexOf("Safari") > -1 && startDate) {
            startDate = startDate.replaceAll("-", "/")
            endDate = endDate.replaceAll("-", "/")
        }

        let newDate = new Date(startDate);
        let oldDate = new Date(endDate);
        let diffTime = Math.abs(oldDate - newDate); //计算时间差

        if (isNaN(diffTime)) return "输入时间";

        let day = 0, hour = 0, min = 0, sec = 0;

        if (diffTime >= 1000 * 60 * 60 * 24) {
            day = Math.floor(diffTime / (1000 * 60 * 60 * 24))
            diffTime = diffTime - day * 1000 * 60 * 60 * 24
        }

        if (diffTime >= 1000 * 60 * 60) {
            hour = Math.floor(diffTime / (1000 * 60 * 60))
            diffTime = diffTime - hour * 1000 * 60 * 60
        }

        if (diffTime >= 1000 * 60) {
            min = Math.floor(diffTime / (1000 * 60))
            diffTime = diffTime - min * 1000 * 60
        }

        if (diffTime >= 1000) {
            sec = Math.floor(diffTime / 1000)
        }
        let string = ""
        if (day !== 0) string = day + " ";

        return string + hour + ":" + min + ":" + sec
    }

    function $(id) {
        return document.createElement(id);
    }

    window.load = load();

</script>
</html>
在线运行
js根据时间计算时间差

昵称
