Live berechnen Zeit von Eingaben

Question

Frage: so im tun ein Timesheet und ich habe 3 Eingänge mit Start, Ende und Pause und möchte ein Live-Berechnung mit ihm tun, aber es muss mit einem : Ich habe einige Live-Rechner gefunden aber nicht von ihnen ist Zeit basiert und kann :

so die Frage nehmen, wie würde ich es tun?

so ist es das, was ich habe, aber es macht keine Zeit : http://jsfiddle.net/5xzSy/1848/

Beispiel: 08:00 (Start) 10:00 (Ende) 01:00 (Pause) und das wäre 01:00 (gesamt)

so Ende-Start-break = Gesamt

Answer 1

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

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

<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>

Answer 2

Ich empfehle Ihnen, tu ein Framework wie Winkel- oder VueJS verwenden, die diese Art von Anforderungen erleichtern

https://vuejs.org/

https://angular.io/