Question

我希望输出一个计算（两次输入之间的差异），而不必单击结果按钮。我有一个按钮工作，但有什么方法可以显示“现场”或即时？

HTML：

<input type="time" id="time1">
<br>
<input type="time" id="time2">
<br>
<button>CLICK</button>
<br>
<label>Difference:</label>
<input type="time" id="difference" disabled>

jQuery的：

    $('button').on('click', function() {
  var time1 = $('#time1').val(),
    time2 = $('#time2').val(),
    hours = time2.split(':')[0] - time1.split(':')[0],
    minutes = time2.split(':')[1] - time1.split(':')[1];

  minutes = minutes.toString().length < 2 ? '0' + minutes : minutes;
  if (minutes < 0) {
    hours--;
    minutes = 60 + minutes;
  }
  hours = hours.toString().length < 2 ? '0' + hours : hours;
  $('#difference').val(hours + ':' + minutes);
});

JSFiddle

由于

Answer 1

我认为你正在寻找的函数是来自JQuery的change（），它监听选择器中的元素：

https://api.jquery.com/change/

以下是您的选择器和代码在JS中的样子：

$('#time1,#time2').change( function() {
  console.log('this is to test in console how it changes');
  var time1 = $('#time1').val(),
    time2 = $('#time2').val(),
    hours = time2.split(':')[0] - time1.split(':')[0],
    minutes = time2.split(':')[1] - time1.split(':')[1];

  minutes = minutes.toString().length < 2 ? '0' + minutes : minutes;
  if (minutes < 0) {
    hours--;
    minutes = 60 + minutes;
  }
  hours = hours.toString().length < 2 ? '0' + hours : hours;
  $('#difference').val(hours + ':' + minutes);
});

HTML（不带按钮）：

    <input type="time" id="time1">
    <br>
    <input type="time" id="time2">
    <br>        
    <label>Difference:</label>
    <input type="time" id="difference" disabled>

要考虑的一件事是，改变等待整个输入是例如下午4点08分。如果你只改变小时，它将无法工作，你必须把所有时间都用于两者，然后它会在另一个输入框中给你答案。这是有道理的，因为在输入整个日期/时间之前，它不应该进行任何计算。

希望这有帮助！

利奥。

无按钮点击显示计算

1 个答案: