javascript - 使用javascript计算时间差时面临NaN结果

Question

我是一名新手，对 PHP、Javascript、Codeigniter 仍处于初级水平。当我尝试计算两个 12 小时格式时间输入之间的时间差时，我遇到了意外的结果。

这里是HTML,JS

 function hitungjam() {
        var start = new Date($('#inputJammulai'));
        var end = new Date($('#inputJamselesai'));
        var s = start.toTimeString();
        var e = end.toTimeString();
        var diff = e - s;
        var jam = Math.floor(diff/1000/60/60);
        $('#inputSelisih').val(jam);
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form-group">
  <div class="form-row">
    <div class="col-md-4">
      <label for="inputJammulai">Start</label>
      <!-- <div class="form-label-group"> -->
        <input type="time" name="inputJammulai" id="inputJammulai" class="form-control" required="required">
      <!-- </div> -->
    </div>
    <div class="col-md-4">
      <label for="inputJamselesai">End</label>
      <!-- <div class="form-label-group"> -->
        <input type="time" name="inputJamselesai" id="inputJamselesai" onchange="javascript: hitungjam();" class="form-control" required="required">
      <!-- </div> -->
    </div>
  </div>
</div>

结果

上午 09:00 开始 上午 11:30 结束 结果是NaN。

预期结果 09:00 AM 开始，11:30 AM 结束，结果为 2,5

仅供引用，在我写下这个问题之前，我已经进行了搜索并尝试了 StackOverflow 提供的许多解决方案，但对我的问题不起作用。这就是我现在问的原因。 这里有人可以帮我找到解决方案吗？谢谢

Answer 1

我对您的原始代码进行了一些修改，以便您可以获得一个基本工作示例，我将尝试解释其中的一些内容:

• 1) 您没有从输入中获取值，您需要使用 .val() 来实现此目的。
• 2) 您无法区分字符串并期望结果为数字。相反，我将从输入中获取的值分成小时和分钟。然后，我们使用当前时间创建新的 Date 对象，并为其设置相应的小时 和 分钟。最后，我们可以在每个 Date 的 Date.getTime() 中使用差异。
• 3) Math.floor() 将返回一个整数，但您想要一个带小数的数字，因此我使用 toFixed(1) 来获取点后带有一位数字的十进制数字(作为字符串)。

基本示例:

function hitungjam()
{
    var [h1, m1] = $('#inputJammulai').val().split(":");
    var [h2, m2] = $('#inputJamselesai').val().split(":");
    var start = new Date(), end = new Date();
    start.setHours(h1);
    start.setMinutes(m1);
    end.setHours(h2);
    end.setMinutes(m2);    

    var diff = end.getTime() - start.getTime();
    var jam = (diff / 1000.0 / 60 / 60).toFixed(1);
    $('#inputSelisih').val(jam);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="time" name="inputJammulai" id="inputJammulai" class="form-control" required="required">
<input type="time" name="inputJamselesai" id="inputJamselesai" onchange="javascript: hitungjam();" class="form-control" required="required">
<label>Difference (hours):<label>
<input type="text" id="inputSelisih">