制作"工作时间计算器"计算分钟数

时间:2017-08-28 14:42:31

标签: javascript jquery

我有一个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;
});
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分: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))