使用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的时间差；
Mitigate应该是Start Replace和Replaced的时间差；
总操作阶段应该是替换时间和页面时间之间的时间差。

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

如果有人能看到另一种方法来解决这个问题，我会很高兴。

提前致谢！

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

使用js用时间做数学

Doing math with Time using js

html

javascript

time

input