javascript - 添加军事时间 - HH 的文本框和 MM 的 Texbox？

Question

当使用 HH:MM 用 : 分割的单个文本框时，我已经能够很好地工作，但是当 HH 与 MM 位于单独的文本框中时，我完全迷失了。我需要根据输入的时间计算工作时间，然后输出为十进制格式，然后减去午餐。任何帮助都会很棒!

// adding military time
$(function () {
     function calculate () {
         var time1 = $("#element_33_1").val(), time1_1 = $("#element_33_2").val(), time2 = $("#element_34_1").val(), time2_1 = $("#element_34_2").val();
         var hours1 = (time1), 
             hours2 = (time2),
             mins1 = (time1_1),
             mins2 = (time2_1);
         var hours = hours2 - hours1, mins = 0;
         if(hours <= 0) hours = 0 + hours;
         if(mins2 >= mins1) {
             mins = mins2 - mins1;
         }
         else {
             mins = (mins2 + 60) - mins1;
             hours--;
         }
         mins = mins / 60; // take percentage in 60
         hours += mins;
         hours = hours.toFixed(2);
         $("#element_509").val(hours);
     }
     $("#element_33_1,#element_33_2,#element_34_1,#element_34_2").keyup(calculate);
     calculate();
 });
 
//Hours Billed Total        
$(document).ready(function() {
    $("#element_29,#element_509,#element_33_1,#element_33_2,#element_34_1,#element_34_2,#element_39").keyup(function(ev){
	var val1=parseFloat($("#element_509").val());
   var val2=parseFloat($("#element_39").val());
    $("#element_29").val((val1 - val2).toFixed(2));
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="li_33"  class="time_field column_4">
		<fieldset>
		<legend style="display: none">Start Time</legend>
		<span class="description">Start Time <span id="required_33" class="required">*</span></span>
		<span>
			<input id="element_33_1" name="element_33_1"  class="element text " size="2" type="text" maxlength="2" value="" /> 
			<label for="element_33_1">HH</label>
		</span>
		<span>
			<input id="element_33_2" name="element_33_2"  class="element text " size="2" type="text" maxlength="2" value="" />  
			<label for="element_33_2">MM</label>
		</span>
		
		
		</fieldset>
		 
		</li>		<li id="li_39"  class="column_4 guidelines_bottom">
		<label class="description" for="element_39">Lunch Hour <span id="required_39" class="required">*</span></label>
		<div>
			<input id="element_39" name="element_39" class="element text medium"   type="text"   value=""  /> 
		</div> 
		</li>		<li id="li_34"  class="time_field column_4">
		<fieldset>
		<legend style="display: none">Stop Time</legend>
		<span class="description">Stop Time <span id="required_34" class="required">*</span></span>
		<span>
			<input id="element_34_1" name="element_34_1"  class="element text " size="2" type="text" maxlength="2" value="" />  
			<label for="element_34_1">HH</label>
		</span>
		<span>
			<input id="element_34_2" name="element_34_2"  class="element text " size="2" type="text" maxlength="2" value="" />  
			<label for="element_34_2">MM</label>
		</span>

		
		</fieldset>
		 		<input id="element_509" value="" name="Subtotal"/>
		</li>		<li id="li_29"  class="column_4">
		<label class="description" for="element_29">Hours Billed <span id="required_29" class="required">*</span></label>
		<div>
			<input id="element_29" name="element_29" class="element text medium"   type="text"  data-quantity_link="element_44" value=""  /> 
		</div> 

Answer 1

您肯定想先转换为通用单位(分钟)。 看来您正在尝试这样做:

分钟 = 分钟/60

但这不正确。 {更正:这在技术上是正确的，但在转换回计费单位时，您可能会损失/赢得时间。请参阅下面的附加信息。}

你想要这样的东西:

var TotalMinutes = 分钟 + (小时 * 60);

另外，修正第 7 行的拼写错误:

time2_1 = $("#element_33_2").val();

应该是:

time2_1 = $("#element_34_2").val();

添加: 要隐藏 NaN 和负值，您可以在分配给 val 之前测试变量，并在出现错误时清除以前的结果:

var val3 = (val1 - val2).toFixed(2);
if (isNaN(val3) || val3 < 0)
{
    $("#element_29").val("");
}
else
{
    $("#element_29").val(val3);
}

我仍然建议使用整数分钟而不是 float 小时。 this question的评论有一些关于时间报告的好信息。