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

您肯定希望先转换为公共单位（分钟）。看起来你正试图用：

mins = mins / 60

但这不正确。 {更正：技术上是正确的，但在转换回结算单元时可能会丢失/获得时间。请参阅下面的其他信息。}

你想要这样的东西：

var totalMinutes = mins + (hours * 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);
}

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

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

1 个答案: