Javascript 两个文本框之间的除法和差分

我想在两个文本框中得到差值和除法值。我的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>

时间差的计算方法如下： ATD:00:20

---

ETD:00:10最后延迟时间应为00:10。我需要所有成员的适当帮助。

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

这可能比您想要的更多。希望能有帮助

工作示例：

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>

供给*
POB*
控制中心*
ETD*
ATD*
耽搁*
*-必需。

利用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);
});

函数填充（e）{
var pob=parseInt（$（'#pob'）.val（）），
sup=parseInt（$（'#supply'）.val（））；
如果（pob==0 | | sup==0）{
返回false；
}
$（#OCC'）.val（（pob/sup）*100）；
}
函数timeDiff（e）{
如果（$（'#ATD'）.val（）==“”|$（'#ETD'）.val（）==“”）{
返回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，
秒=d%60，
最小值=数学楼层（d/60），
小时=数学楼层（d/3600），
格式；
控制台日志（t1、t2、s1、s2、d）；
如果（d<10）{
$（'#Delay'）.val（“00:00:0”+d）；
返回false；
}
如果（d<60）{
$（'#Delay'）.val（“00:00:+d）；
返回false；
}
如果（d<3600）{
最小值=数学楼层（d/60）；
sec=d%60；
格式=（最小值<10？“0”+最小值：最小值）+“：”；
格式+=（秒<10？“0”+秒：秒）；
$（'#Delay'）.val（格式）；
返回false；
}
sec=d%60；
最小值=数学楼层（d/60）；
小时=数学楼层（d/3600）；
格式=（小时<10？“0”+小时：小时）+“：”；
格式+=（最小值<10？“0”+最小值：最小值）+“：”；
格式+=（秒<10？“0”+秒：秒）；
$（'#Delay'）.val（格式）；
返回false；
}
函数字符串2次{
var elems=s.split（“：”）；
变量时间={
h:0，
m:0，
s:0
};
如果（元素长度==3）{
time.h=parseInt（元素[0]）；
time.m=parseInt（元素[1]）；
time.s=parseInt（elems[2]）；
}否则{
控制台日志（“2个计数”，元素）；
time.m=parseInt（元素[0]）；
time.s=parseInt（elems[1]）；
}
返回时间；
}
$（函数（）{
美元（“.supply，.POB”）。更改（填充）；
美元（“.ATD”）。变动（时间差）；
});

根据加载JavaScript的方式，您的

onchange

回调可能无法识别函数。您可以轻松地将所有这些移动到一个jQuery块中，并将事件绑定到那里

关于计算两次之间的差值，您需要将时间转换为秒，进行数学运算，然后将它们转换回人类可读的结果。我不确定您是否正在使用

mm:ss

或

hh:mm:ss

或

hh:mm.ss

，但我猜测用户可能会输入

hh:mm:ss

或

mm:ss

，这两者都可以处理

这些函数还检查空字段或0值。因为不能除以0，也不想从00:00中减去，所以会产生负延迟值

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);
});