Question

我希望在两个文本框中获得差异和分值。我的javascript或Jquery都没有运行。在计算时间和分割值的差异时最终得到输出，最后乘以100。

查看：

        <td>
            <input type="text" id="supply" class="supply form-control" onchange="fill()"/>
            <span class="error">Supply required</span>
        </td>

        <td>
            <input type="text" id="POB" class="POB form-control" onchange="fill()"/>
            <span class="error">POB required</span>
        </td>
        <td>
            <input type="text" id="OCC" class="OCC form-control"/>
            <span class="error">OCC required</span>
        </td>

        <td>
            <input type="text" id="ETD" placeholder="00:00" class="ETD form-control" />
            <span class="error">ETD required</span>
        </td>

        <td>
            <input type="text" id="ATD" placeholder="00:00" class="ATD form-control" onchange="DifferenceTime()" />
            <span class="error">ATD required</span>
        </td>

        <td>
            <input type="text" id="Delay" placeholder="00:00" class="Delay form-control" />
            <span class="error">Delay required</span>
        </td>

在底部的页面内我创建了一个函数：

function fill() {
            var total = (Number($('#POB').val()) / Number($('#supply').val()))*100;
            $('#OCC').val(total);
        }

function DifferenceTime(){
    var time= $('#ATD').val() -$('#ETD').val();
    $('#Delay').val(time);
    }

计算时间差异的同时如下： ATD：00：20 ETD：00：10最后延迟应该是00:10。我需要所有成员的适当帮助。

Answer 1

您缺少onchange功能的功能括号。你必须重写onchange = DifferenceTime（）。它会工作，然后你可以检查逻辑是否正确。请查看this了解更多信息。

Answer 2

这可能比你想要的更多。希望它有所帮助。

工作示例：https://jsfiddle.net/Twisty/zyLa1xtw/6/

<强> HTML

<div class="ui-widget">
  <table>
    <td>
      <input type="number" id="supply" class="supply form-control" value="0" />
      <span class="error">Supply<em>*</em></span>
    </td>

    <td>
      <input type="number" id="POB" class="POB form-control" value="0" />
      <span class="error">POB<em>*</em></span>
    </td>
    <td>
      <input type="text" id="OCC" class="OCC form-control" />
      <span class="error">OCC<em>*</em></span>
    </td>
    <td>
      <input type="time" id="ETD" placeholder="00:00" class="ETD form-control" />
      <span class="error">ETD<em>*</em></span>
    </td>
    <td>
      <input type="time" id="ATD" placeholder="00:00" class="ATD form-control" />
      <span class="error">ATD<em>*</em></span>
    </td>
    <td>
      <input type="time" id="Delay" class="Delay form-control" />
      <span class="error">Delay<em>*</em></span>
    </td>
  </table>
  <em>*</em> - Required.
</div>

利用HTML5输入字段，可以帮助确保用户不输入不需要的数据。

<强>的JavaScript

function fill(e) {
  var pob = parseInt($('#POB').val()),
    sup = parseInt($('#supply').val());
  if (pob === 0 || sup === 0) {
    return false;
  }
  $('#OCC').val((pob / sup) * 100);
}

function timeDiff(e) {
  if ($('#ATD').val() === "" || $('#ETD').val() === "") {
    return false;
  }
  var t1 = string2times($('#ATD').val()),
    t2 = string2times($('#ETD').val()),
    s1 = (t1.h * 3600) + (t1.m * 60) + (t1.s),
    s2 = (t2.h * 3600) + (t2.m * 60) + (t2.s),
    d = s1 - s2,
    sec = d % 60,
    min = Math.floor(d / 60),
    hour = Math.floor(d / 3600),
    format;

  console.log(t1, t2, s1, s2, d);
  if (d < 10) {
    $('#Delay').val("00:00:0" + d);
    return false;
  }
  if (d < 60) {
    $('#Delay').val("00:00:" + d);
    return false;
  }
  if (d < 3600) {
    min = Math.floor(d / 60);
    sec = d % 60;
    format = (min < 10 ? "0" + min : min) + ":";
    format += (sec < 10 ? "0" + sec : sec);
    $('#Delay').val(format);
    return false;
  }
  sec = d % 60;
  min = Math.floor(d / 60);
  hour = Math.floor(d / 3600);
  format = (hour < 10 ? "0" + hour : hour) + ":";
  format += (min < 10 ? "0" + min : min) + ":";
  format += (sec < 10 ? "0" + sec : sec);
  $('#Delay').val(format);
  return false;
}

function string2times(s) {
  var elems = s.split(":");
  var time = {
    h: 0,
    m: 0,
    s: 0
  };
  if (elems.length == 3) {
    time.h = parseInt(elems[0]);
    time.m = parseInt(elems[1]);
    time.s = parseInt(elems[2]);
  } else {
    console.log("2 Count", elems);
    time.m = parseInt(elems[0]);
    time.s = parseInt(elems[1]);
  }
  return time;
}

$(function() {
  $(".supply, .POB").change(fill);
  $(".ATD").change(timeDiff);
});

根据您加载JavaScript的方式，onchange回调可能无法识别这些功能。您可以轻松地将所有这些移动到一个jQuery块中并将事件绑定在那里。

关于计算两次之间的差异，您需要将时间转换为秒，进行数学运算，并将它们转换回人类可读的结果。我不确定您是否使用mm:ss或hh:mm:ss或hh:mm.ss，但我猜测用户可能会输入hh:mm:ss或mm:ss可以处理两者。

这些函数还会检查空字段或0值。由于你不能除以0而你不想从00:00减去，导致ian负延迟值。

两个文本框之间的划分和区别

2 个答案: