javascript - 使 "working hours calculator"计算分钟

Question

我有一个 HTML 表格，用于计算用户输入的工作时间。

我遇到的问题是弄清楚如何让计算器在计算总工作时间时考虑分钟数。

例如，用户输入他们的 Standby Start time在 24-hour format 。假设他们输入 00:30并在 Standby End Time ，他们会输入 4:20 ，结果将显示 3:50在 Hours in total文本域。现在它只显示 4总共小时数。

代码如下:

var numRows = 2,
  ti = 5;
var tableCount = 1;
var index = 1;

window.standBy = function() {
  var sum = 0;
  $(".Standby").each(function(index, stand) {
    sum += parseFloat($(stand).val());
  })

  $(".grandtotal").val(sum)
}

function calculate() {
  var tr = $(this).closest('tr'),
    startTime = $('.Time1').val(),
    endTime = $('.Time2').val();

  if (startTime === '' || endTime === '') {
    return;
  }

  var hours = parseInt(endTime.split(':')[0], 10) - parseInt(startTime.split(':')[0], 10);
  if (hours < 0) hours = 24 + hours;
  $(".Hours", tr).val(hours);

  if (hours >= 4) $(".Standby", tr).val("1");
  if (hours <= 4) $(".Standby", tr).val("0.5");
  //if (hours==4 && hours<8) $(".Standby").val("1");

  if (hours >= 8 && hours <= 12) $(".Standby", tr).val("1.5");

  if (hours > 12) $(".Standby", tr).val("1.5");



}
$('#table').on('input', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('change')


window.addTime = function() {
  tableCount++;
  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
  $('#timeTable' + tableCount).find("input").val("");
  index++;
  $('#timeTable' + tableCount + ' .aa').html(tableCount);

};


$(document).on('click', 'button.removeTime', function() {
  var closestTable = $(this).closest('table');
  if (closestTable.attr('id') != "timeTable") {
    closestTable.remove();
  }
  tableCount--;
  if (tableCount < 1) {
    tableCount = 1;
  }
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>
  Time format is in 24h
</h1>

<div id="table">
  <table id="timeTable" class="tg">
    <tr>
      <th class="tg-yw41"></th>
      <th class="tg-yw41"></th>
      <th class="tg-yw4l">Start time</th>
      <th class="tg-yw4l">End time</th>
      <th class="tg-yw4l">Hours in total</th>
      <th class="tg-yw4l">Standby hours</th>
    </tr>
    <tr>
      <td class="aa">1</td>
      <td class="tg-yw4l"><button class="removeTime">Remove Time</button></td>

      <td class="tg-yw4l">
        <input class="Time1" value="" placeholder="Enter your start time" />
      </td>
      <td class="tg-yw4l">
        <input class="Time2" value="" placeholder="Enter your end time" />
      </td>
      <td class="tg-yw4l">
        <input type="text" class="Hours" value="0" readonly="" />
      </td>
      <td class="tg-yw4l">
        <input type="text" class="Standby" value="0" readonly="" />
      </td>
    </tr>
  </table>
</div>


<caption>Total standby hours</caption>&nbsp;
<input class="grandtotal" value="" readonly="" />
<br>
<button onclick="addTime();">Add Time</button>
<br>
<button onclick="standBy();">Calculate total Standby hours</button>

Answer 1

从 12 小时格式转换为 24 小时格式。

在 12 小时格式中，您需要知道时段:AM(“Ante Meridiem”=“中午之前”)和 PM(“Post Meridiem”) "= "中午之后")。

以下函数将 12 小时格式时间转换为 24 小时格式时间:

myTime = ['2:20', 'AM'];
myTime2 = ['8:10', 'PM'];

let timeConverter = function(time) {

  if (time[1] == 'PM') {

    let hourAndMinute = time[0].split(':');
    let newHour = parseInt(hourAndMinute[0]) + 12;
    return String(newHour) + ':' + hourAndMinute[1];

  } return time[0]

}

console.log(timeConverter(myTime))
console.log(timeConverter(myTime2))