两个文本框的区别

Posted 2023-05-08

【中文标题】两个文本框的区别

【英文标题】：Divide and Difference Between Two TextBoxes

【发布时间】：2018-04-26 22:00:35

【问题描述】：

我想在两个文本框中获得差异和分割值。我的 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);
    

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

【参考方案1】：

您缺少 onchange 函数的函数括号。你必须重写 onchange=DifferenceTime()。它会起作用，然后您可以检查逻辑是否正确。更多详情请查看this。

【参考方案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 负延迟值。