Me gustaría crear una función para calcular/sumar el tiempo. Por ejemplo, trabajo 40 horas a la semana y quiero sumar todas las horas y minutos de cada día que trabajé para saber cuántas horas trabajé. Probé con Moment.js pero no tuve suerte :/
var fTime = document.querySelector('input[id="fromTime"]').value; var tTime = document.querySelector('input[id="toTime"]').value; var btn = document.querySelector(".btn"); var sum = document.querySelector(".sum"); var reset = document.querySelector(".reset"); btn.onclick = sumTimes; function sumTimes(){ sum.innerHTML = "You Worked " + tTime + " hours"; reset.style.opacity = 1; } reset.onclick = (e)=>sum.innerHTML = "00:00" div.hours{ width:300px; background-color:red; heigth:70px; text-align:center; color:white; display:flex; flex-direction:column; align-items:center; } .hours > *{ margin:3px; } .reset{ opacity:0; } <div class="wrapper"> <div class="hours"> <h2>Your Time</h2> <label for="fromTime">From: </label> <input id="fromTime" type="time" name="fromTime" value="13:30"> <label for="toTime">To: </label> <input id="toTime" type="time" name="toTime" value="14:30"> <button class="btn">Enter</button> <div class="sum">00:00</div> <button class="reset">Reset</button> </div> </div>Podemos calcular el total de totalMinutes trabajados dividiendo el tiempo desde y hasta en sus componentes de horas y minutos.
Una vez que tengamos el total de minutos trabajados, podemos formatearlo como horas y minutos usando una función minutesToHoursAndMinutes() .
Si ingresamos una hora Hasta: que es anterior a la hora Desde:, mostraremos un error en lugar de intentar mostrar una hora negativa.
Agregué una función getTotalMinutesWorked() que calculará el total de minutos trabajados a partir de las entradas del usuario.
var btn = document.querySelector(".btn"); var sum = document.querySelector(".sum"); var reset = document.querySelector(".reset"); btn.onclick = sumTimes; function getTotalMinutesWorked() { const fromTime = document.getElementById('fromTime').value; const toTime = document.getElementById('toTime').value; const [fromHours, fromMinutes] = fromTime.split(':'); const [toHours, toMinutes] = toTime.split(':'); // Total minutes worked is calculated by getting the difference in hours x 60 and adding the difference in minutes. return (toHours - fromHours) * 60 + (toMinutes - fromMinutes); } function sumTimes() { const totalMinutes = getTotalMinutesWorked(); if (totalMinutes < 0) { sum.innerHTML = "The To time should be later than From time" return; } sum.innerHTML = "You Worked " + minutesToHoursAndMinutes(totalMinutes) + " hours"; reset.style.opacity = 1; } function minutesToHoursAndMinutes(minutes) { const hours = Math.floor(minutes / 60); const mins = (minutes % 60); return (hours + '').padStart(2, '0') + ':' + (mins + '').padStart(2, '0') } reset.onclick = (e)=>sum.innerHTML = "00:00" div.hours{ width:300px; background-color:red; heigth:70px; text-align:center; color:white; display:flex; flex-direction:column; align-items:center; } .hours > *{ margin:3px; } .reset{ opacity:0; } <div class="wrapper"> <div class="hours"> <h2>Your Time</h2> <label for="fromTime">From: </label> <input id="fromTime" type="time" name="fromTime" value="13:30"> <label for="toTime">To: </label> <input id="toTime" type="time" name="toTime" value="14:30"> <button class="btn">Enter</button> <div class="sum">00:00</div> <button class="reset">Reset</button> </div> </div>Puedes hacerlo usando moment.js
mira el siguiente articulo:
usa moment js para diferenciar dos fechas
o código javascript puro
//sumaTiempos();
function sumTimes(){ var day1 = Date.parse('01/01/1900 14:00'); var day2 = Date.parse('01/01/1900 19:00'); var diff = Math.abs(day2 - day1); console.log(diff); }esto dará diferencia por milisegundos.