javascript - 我如何知道一个事件花费了多少小时？

Question

我有这个样本:

link

HTML 代码:

<input class="Time1" value="10:00" />
<input class="Time2" value="10:30" />
<input class="Hours" value="0" />
<hr>
<button onclick="calculate()">Calculate</button>

JS代码:

$(function () {
    function calculate() {
        var hours = parseInt($(".Time2").val().split(':')[0], 10) - parseInt($(".Time1").val().split(':')[0], 10);
        if(hours < 0) hours = 24 + hours;
        $(".Hours").val(hours);
    }
    $(".Time1,.Time2").change(calculate);
    calculate();
});

输入值的时刻为:

1.时间1=10:00;

2.时间2=10:30;

结果将采用以下形式

00:30

目前正在计算及结果

is 0

如果与 下午 2:00 交换相应输入的值下午 4:00 结果将为 2 并且应采用 02:00

形式

我们如何修复这些错误？您能帮我找到解决方案吗？

提前谢谢

Answer 1

如果您不想使用 Moment.js 等库(对于像这样的简单任务，您也不应该这样做)，那么最好使用 JavaScript 的 native 日期功能:

function recalculate() {
  // Come up with a couple dummy dates with the given times:
  var d1 = new Date("2000-01-01T" + document.getElementById("Time1").value);
  var d2 = new Date("2000-01-01T" + document.getElementById("Time2").value);
  // Calculate their difference in milliseconds
  var msecDifference = (d2 - d1);
  // If it's less than zero, add 24 hours to it (since we're spanning days)
  if (msecDifference < 0) msecDifference += 86400 * 1000; // 86400 seconds in a day
  // And convert the milliseconds back to hours.
  document.getElementById("Output").value = (msecDifference / 1000 / 60 / 60);
}


// Plumbing to make the example interactive.
document.body.addEventListener("change", function(ev) {
  recalculate();
});
recalculate();

From
<input id="Time1" value="10:00">to
<input id="Time2" value="8:30">
<hr>Hours:
<input id="Output" readonly>