使用 js 与时间做数学

Question

我有以下代码：

HTML：

<form onsubmit="return false;">
    <div class="col-5">
        <label>
            Page Time
            <input id="pageTime" name="pageTime" type="time" step="1" tabindex="9">
        </label>
    </div>
    <div class="col-5">
        <label>
            Ack Time
            <input id="ackTime" name="ackTime" type="time" step="1" tabindex="10">
        </label>
    </div>
    <div class="col-5">
        <label>
            Arrival Time
            <input id="arrivalTime" name="arrivalTime" type="time" step="1" tabindex="11">
        </label>
    </div>
    <div class="col-5">
        <label>
            Start Replace / Root Cause Found
            <input id="startReplace" name="startReplace" type="time" step="1" tabindex="12">
        </label>
    </div>
    <div class="col-5">
        <label>
            Replaced / Repair Completed
            <input id="replaced" name="replaced" type="time" step="1" tabindex="13">
        </label>
    </div>
    <div class="col-4">
        <label>
            Engagement
            <input type="text" id="engagement" name="engagement" value="" readonly="readonly" />
        </label>
    </div>
    <div class="col-4">
        <label>
            Arrival
            <input type="text" id="arrival" name="arrival" value="" readonly="readonly" />
        </label>
    </div>
    <div class="col-4">
        <label>
            Investigation
            <input type="text" id="investigation" name="investigation" value="" readonly="readonly" />
        </label>
    </div>
    <div class="col-4">
        <label>
            Mitigate
            <input type="text" id="mitigate" name="mitigate" value="" readonly="readonly" />
        </label>
    </div>

    <div class="col-1" style="text-align: center">
        <label>
            Total Ops Phases
            <input type="text" name="totalOpsPhases" id="totalOpsPhases" value="" readonly="readonly" />
        </label>
    </div>
    <div class="col-submit">
        <button class="submitbtn" tabindex="14" onclick="opsTime();">Do the Math</button>
    </div>
</form>

JS：

function toSeconds(time_str) {
    // Extract hours, minutes and seconds
    var parts = time_str.split(':');
    var sum = 0;
    // compute  and return total seconds
    for (c = 0; c <= 2; c++) {
        if (c === 0) {
            sum += parts[0] * 3600;
        } else if (c === 1) {
            sum += parts[1] * 60;
        } else if (c === 2) {
            if (parts[2] !== 'undefined') {
                sum += parts[2];
            }
        }
    }
    return sum;
}
function opsTime() {
    var time = [document.getElementById('pageTime').value, document.getElementById('ackTime').value, document.getElementById('arrivalTime').value, document.getElementById('startReplace').value, document.getElementById('replaced').value];
    // Created an array to easily do the math :)
    // Array mapping:
    // 0 = pageTime
    // 1 = ackTime
    // 2 = arrivalTime
    // 3 = startReplaceTime
    // 4 = replacedTime

    for (i = 0; i <= 4; i++) {
        if (i === 4) {
            var start = time[0];
            var end = time[4];
        } else {
            start = time[i];
            end = time[i + 1];
        }
        var startSec = toSeconds(start);
        var endSec = toSeconds(end);
        var difference = Math.abs(endSec - startSec);
        // format time differnece
        var result = [
            Math.floor(difference / 3600), // an hour has 3600 seconds
            Math.floor((difference % 3600) / 60), // a minute has 60 seconds
            difference % 60
        ];
        // 0 padding and concatation
        result = result.map(function (v) {
            return v < 10 ? '0' + v : v;
        }).join(':');
        var res = [];
        res[i] = result;
    }

    document.getElementById('engagement').value = res[0];
    document.getElementById('arrival').value = res[1];
    document.getElementById('investigation').value = res[2];
    document.getElementById('mitigate').value = res[3];
    document.getElementById('totalOpsPhase').value = res[4];
}

我要做的是选择输入中填写的时间，并在下面的输入框中显示差异。

• Engagement 应该是 Page Time 和 Ack Time 之间的时间差；
• Arrival 应该是 Ack Time 和 Arrival Time 之间的时间差；
• 调查应该是Arrival和Start Replace Time之间的时间差；
• 缓解应该是开始替换和替换时间之间的时间差；
• Total Ops Phases 应该是 Replaced 和 Page time 之间的时间差。

我在上面的代码上停留了将近 8 个小时，改变了很多东西来尝试做数学运算并将每个时间差放在一个数组中，然后用它来填充输入，但似乎数组不是t 充满数据。 不幸的是，我也必须使用秒数，而且我找不到很多具有不同解决方案的材料来计算使用它的时间差。

如果有人能找到解决此问题的另一种方法，我会很高兴。

提前致谢！

PS：尝试插入表单的打印件，但我没有所需的声誉。

Answer 1

type="time" 属性仅受 chrome 支持，Firefox 或 Internet Explorer 不支持，因此您应该使用像 these 这样的兼容性库或您自己制作的库。如果您只想使用 chrome，可以使用 valueAsNumber：

v.valueAsNumber
56013000
v.valueAsDate
Thu Jan 01 1970 10:33:33 GMT-0500 (EST)
v.value
"15:33:33"

请注意，Chrome console 会通过自动建议向您显示这些选项。

还有jsfiddle