如何创建一个函数来计算/求和小时和分钟

Question

我想创建一个函数来计算/求和时间。 例如，我每周工作 40 小时，我想将我每天工作的所有小时和分钟相加，以找出我工作了多少小时。 我尝试使用 Moment.js 但没有成功：/

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>

Answer 1

我们可以通过将起始时间和终止时间分解为小时和分钟部分来计算工作的totalMinutes。

一旦我们获得了总工作分钟数，我们就可以使用 minutesToHoursAndMinutes() 函数将其格式化为小时和分钟。

如果我们输入的“至：”时间早于“从：”时间，我们将显示错误，而不是尝试显示负时间。

我添加了一个 getTotalMinutesWorked() 函数，该函数将计算用户输入的总工作分钟数。

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>

Answer 2

您可以使用 moment.js 来完成此操作，

请查看以下文章：

使用 moment js 计算两个日期的差异

或纯 JavaScript 代码

//sumTimes();

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

这将产生毫秒级的差异。