Question

问题：所以我正在做一个时间表，我有3个输入，包括开始，结束和休息，并希望用它进行实时计算，但它需要与:我找到了一些实时计算器但是不属于他们是基于时间的，可以采用:

所以这个问题我该怎么做？

所以这就是我得到的，但它没有时间: http://jsfiddle.net/5xzSy/1848/

示例：08:00（开始）10:00（结束）01:00（休息），这将是01:00（总计）

所以end-start-break = total

Answer 1

＆＃13;

var start = $('#start'),
  end = $('#end'),
  brk = $('#break'),
  total = $('#added'),
  timespan;

$('input').keyup(function() { // run anytime the value changes
  var e = toMins(end.val()),
    s = toMins(start.val()),
    b = toMins(brk.val());
  if (!s || !e) return;
  var output = (e - s - b) / 60;
  total.html(Math.floor(output) + ':' + toDouble(Math.round((output % 1) * 60)));
});

function toMins(val) {
  if (!val) return 0;
  val = val.split(':');
  return (Number(val[0]) * 60) + Number(val[1] || 0);
}

function toDouble(n) {
    return n < 10 ? ('0' + n) : n;
}

＆＃13;

table { margin: 10px; }
  table td { padding: 2px 4px; }
  input { width: 60px; padding: 2px 4px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>Start:</td><td><input id=start placeholder="hh:mm"></td></tr>
<tr><td>End:</td><td><input id=end placeholder="hh:mm"></td></tr>
<tr><td>Break:</td><td><input id=break placeholder="hh:mm"></td></tr>
<tr><td>Total:</td><td><span id=added></span></td></tr>
</table>

＆＃13;

Answer 2

我建议您使用像Angular或VueJS这样的框架来使这种要求更容易

https://vuejs.org/

https://angular.io/

实时计算输入时间

2 个答案: