如何计算两种 HTML5 时间输入类型之间的差异

Question

我有一个包含两个输入 type="time" 字段的表单。我在表单上有第三个输入 type="time" 字段，称为“延迟”，我想使用 jQuery 根据两次之间的差异进行更新。

我一直在寻找答案，但到目前为止还没有找到可行的解决方案。由于输入 type="time" 字段只包含小时/分钟，我尝试过这样的事情：

<input type="time" id="timeOfCall">
<input type="time" id="timeOfResponse">

var timeOfCall = $('#timeOfCall').val();
var timeOfResponse = $('#timeOfResponse').val();
var diff = new Date("Aug 08 2012" + timeOfCall) - new Date("Aug 08 2012" + timeOfResponse);
var timeDifference = diff/(60*60*1000);

但是这不起作用。当我使用它时，我得到 NaN 响应。我从another Stackoverflow question 获得了这段代码，在那里提出问题的人也遇到了同样的 NaN 问题，但没有发布它是什么，但毫无帮助地找到了问题的解决方案。

我也试过这个：

var timeDifference = new Date("1970-1-1 " + timeOfCall) - new Date("1970-1-1 " +  timeOfResponse) ) / 1000 / 60 / 60;

这绝对是最接近工作的，但有时会产生一些奇怪的结果。例如，如果 timeOfCall 是 01:01 而 timeOfResponse 是 03:03 它给出的差异是 2.033333....

在任何一种情况下，我都无法让“延迟”时间字段更新。

$('#delay').val(timeDifference);

什么都不做。我真的很感谢这方面的任何和所有帮助，过去几天我一直在努力，但没有成功，也没有真正的线索如何解决它。我一直在做很多谷歌搜索，但实际上似乎很少有结果与 HTML5 输入 type="time" 字段有关，所以到目前为止我没有运气。

编辑： jsFiddle

Answer 1

可能就是这样：

DEMO

$('button').on('click', function () {
    var timeOfCall = $('#timeOfCall').val(),
        timeOfResponse = $('#timeOfResponse').val(),
        hours = timeOfResponse.split(':')[0] - timeOfCall.split(':')[0],
        minutes = timeOfResponse.split(':')[1] - timeOfCall.split(':')[1];

    minutes = minutes.toString().length<2?'0'+minutes:minutes;
    if(minutes<0){ 
        hours--;
        minutes = 60 + minutes;
    }
    hours = hours.toString().length<2?'0'+hours:hours;
    $('#delay').val(hours + ':' + minutes);
});