当javascript中的小时、分钟或秒差为9时，两次时差计算会出错答案

【问题标题】：The two time difference calculation gives error when the difference is 9 in hours, minutes or seconds in javascript当javascript中的小时、分钟或秒差为9时，两次时差计算会出错
【发布时间】：2018-04-02 21:16:13
【问题描述】：

大家早上好

我有一个非常奇怪的问题。我有一个表单和一个 javascript 脚本来计算进入时间和退出时间之间的差异。

例如，如果我设置以下时间：

输入：09:09:59 出发时间：16:13:14

结果是 06:13:15，这是正确的。

问题在于，当小时、分钟或秒之间存在 9 的差异时，就是您没有很好地进行计算，或者由于某种原因您没有在“结果”框中显示总和。秒：01 到 10 分钟：01 到 10 营业时间：01 至 10

看清楚的例子是：

小时失败：在：09:59:59 结束时间：19:13:14 结果：错误

几分钟后失败：在：09:59:59 结束时间：20:09:14 结果：错误

第二个故障时间：09:59:00 结束时间：20:10:09 结果：错误

当其中任何一个中的差异为 9 时，它不会显示出来，我非常困惑。

我必须进行计算的代码是..：

<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script>
window.onchange = function () {
    var start = document.getElementById("tcin").value;
    var end = document.getElementById("tcout").value;

    function diff(start, end) {
        start = start.split(":");
        end = end.split(":");
        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);

        //para que el cálculo funcione si la hora final se cruza al día siguiente. Por ejemplo. 11pm a 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("tcresult").value = diff(start, end);
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post">
<td width="588"><p>IN 
  <input name="tcin" type="time" required class="fecha" id="tcin" form="ff"
                                                   step="1" title="Hora, minutos y segundos" value="09:59:59">
  <br>
  OUT
  <input name="tcout" type="time" required class="fecha" id="tcout" form="ff"
                                       title="Hora, minutos y segundos" step="1" value="10:00:00">
  <br>
  RESULT 
  <input name="tcresult" type="time" class="fecha" id="tcresult" form="ff"
                                       placeholder="00:00" title="Tiempo calculado" autocomplete="off" readonly>
</p>
  <p>&nbsp;</p>
</form>
</body>
</html>

提前谢谢你

【问题讨论】：

大声朗读：(hours < 9 ? "0" : "") 如果小时数少于九。 9 小于 9 吗？
是的，但我需要 9 才能正确计算。还有其他选择吗？
你没想到..... 那么为什么 9 不会得到零呢？小学数学.....是 9
试试<=（小于或等于）运算符...
我错过了 =，感谢 Louys 的回复。我没有被误导

标签： javascript jquery html momentjs

【解决方案1】：

我将<（较小）运算符更改为<=（小于或等于）关于前导零...

我还添加了一个isNaN() 条件以在计算以NAN（不是数字）结束时返回一个空字符串。

这样试试吧……

window.onchange = function () {
  var start = document.getElementById("tcin").value;
  var end = document.getElementById("tcout").value;

  function diff(start, end) {
    start = start.split(":");
    end = end.split(":");
    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);

    //para que el cálculo funcione si la hora final se cruza al día siguiente. Por ejemplo. 11pm a 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);

    if(!isNaN(hours) && !isNaN(minutes) && !isNaN(seconds)){
      return (hours <= 9 ? "0" : "") + hours + ":" + (minutes <= 9 ? "0" : "") + minutes + ":" + (seconds <= 9 ? "0" : "") + seconds;
    }else{
      return "";
    }

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

in:<input id="tcin"><br>
out:<input id="tcout"><br>
result:<input id="tcresult"><br>

【讨论】：

现在如果完美的话。一个简单的答案，让我的错误从教学上看出来，并用 isand 来补充