javascript - 在javascript中计算两次时间输入的差异(以秒为单位)

Question

我试图获取两个时间输入之间的差异并将其显示为 HH:mm:ss。

为显示创建了一个带有 id="diff" 的输入框。该代码适用于长达 24 小时的差异，这正是我所需要的。

但是，当开始或结束时间的秒数输入为 0(例如 11:10:00 PM)时，显示将反射(reflect) NaN。

有人知道这里出了什么问题吗？

var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

function diff(start, end) {
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], start[2], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], end[2], 0);

    //for calculation to work if endtime cross over next day. Eg. 11pm to 2am
    if (endDate.getTime() < startDate.getTime()) {
        endDate.setDate(endDate.getDate() + 1);
    }

    var diff = endDate.getTime() - startDate.getTime();

    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);
    diff -= minutes * 1000 * 60;
    var seconds = Math.floor(diff / 1000);


    return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes + ":" + (seconds < 9 ? "0" : "") + seconds;

}

document.getElementById("diff").value = diff(start, end);

<input type="time" id="start" step="1" value="">
<input type="time" id="end" step="1" value="">
<input id="diff">

Answer 1

那是因为你的“00”秒数永远不会被传递。只过去了几分钟和几小时。因此，发生这种情况时您的日期无效。

只需检查分割数组的最后一个参数，如果 t 不存在则传递零。

尝试更改此设置:

var startDate = new Date(0, 0, 0, start[0], start[1], start[2], 0);
var endDate = new Date(0, 0, 0, end[0], end[1], end[2], 0);

对此:

var startDate = new Date(0, 0, 0, start[0], start[1], start[2] ? start[2] : 0, 0);
var endDate = new Date(0, 0, 0, end[0], end[1], end[2] ? end[2] : 0, 0);