Jquery 显示计算而不单击按钮

我希望输出一个计算结果（两个时间输入之间的差值），而不必单击按钮获得结果。我有一个按钮，但有没有任何方式可以显示'现场'或立即

HTML:

点击


区别：

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

$（'button'）。在（'click'，function（）上{
var time1=$（'#time1'）.val（），
time2=$（'#time2'）.val（），
小时=时间2.split（'：'）[0]-时间1.split（'：'）[0]，
分钟=time2.split（'：'）[1]-time1.split（'：'）[1]；
分钟=分钟。toString（）。长度<2？'0'+分钟：分钟；
如果（分钟<0）{
小时--；
分钟=60+分钟；
}
小时=小时。toString（）。长度<2？'0'+小时：小时；
$（“#差”）.val（小时+”：“+分钟）；
});

---

谢谢

我认为您正在寻找的函数是JQuery中的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);
});

$（'#time1，#time2'）。更改（函数（）{
log（'这是在控制台中测试它是如何变化的'）；
var time1=$（'#time1'）.val（），
time2=$（'#time2'）.val（），
小时=时间2.split（'：'）[0]-时间1.split（'：'）[0]，
分钟=time2.split（'：'）[1]-time1.split（'：'）[1]；
分钟=分钟。toString（）。长度<2？'0'+分钟：分钟；
如果（分钟<0）{
小时--；
分钟=60+分钟；
}
小时=小时。toString（）。长度<2？'0'+小时：小时；
$（“#差”）.val（小时+”：“+分钟）；
});

HTML（不带按钮）：

区别：

需要考虑的一点是，更改将等待整个输入，例如下午4:08。如果您只更改小时，它将不起作用，您必须将所有时间都放在这两个输入框中，然后它会将答案扔到另一个输入框中。这很有意义，因为在输入整个日期/时间之前，它不应该进行任何计算

希望这有帮助

---

Leo.

我认为您正在寻找的函数是JQuery中的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);
});

$（'#time1，#time2'）。更改（函数（）{
log（'这是在控制台中测试它是如何变化的'）；
var time1=$（'#time1'）.val（），
time2=$（'#time2'）.val（），
小时=时间2.split（'：'）[0]-时间1.split（'：'）[0]，
分钟=time2.split（'：'）[1]-time1.split（'：'）[1]；
分钟=分钟。toString（）。长度<2？'0'+分钟：分钟；
如果（分钟<0）{
小时--；
分钟=60+分钟；
}
小时=小时。toString（）。长度<2？'0'+小时：小时；
$（“#差”）.val（小时+”：“+分钟）；
});

HTML（不带按钮）：

区别：

需要考虑的一点是，更改将等待整个输入，例如下午4:08。如果您只更改小时，它将不起作用，您必须将所有时间都放在这两个输入框中，然后它会将答案扔到另一个输入框中。这很有意义，因为在输入整个日期/时间之前，它不应该进行任何计算

希望这有帮助

---

狮子座。

试过模糊吗？在键盘上？或者任何其他类似的事件？您可以在

$（document.ready（）

）上执行此操作。是否尝试使用blur？在键盘上？或者任何其他类似的事件？您可以在

$（document）.ready（）

？@sinebrridge上完成。没问题！很高兴我能帮助你！你能把答案标为正确吗？谢谢@SineBurridge没问题！很高兴我能帮助你！你能把答案标为正确吗？谢谢

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