「労働時間計算機」を使って分を計算する

Question

私は、ユーザーが入力した労働時間を計算するHTMLテーブルを持っています。

私が抱えている問題は、合計労働時間を計算している分を計算機に考慮させる方法を考え出すことです。

たとえば、ユーザは24-hour formatにStandby Start timeを入力します。 00:30と入力し、Standby End Timeに入力すると4:20と入力すると、結果はのテキストフィールドに3:50と表示されます。今度は合計で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（「ポストMeridiem」=「正午以降」）の期間を知る必要があります。

次の関数は、24時間形式の時刻に12時間形式の時刻を変換します

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