使用jquery

Question

我选择了两个输入类型时间字段作为班级开始时间和班级结束时间。这是jquery的代码，两者相差两次。

$('#class_end').on('change',function() 
    {
        var start_time = $('#class_strt').val();
        var end_time = $('#class_end').val();
        var diff = ( new Date("1970-1-1 " + end_time) - new Date("1970-1-1 " + start_time) ) / 1000 / 60 / 60;
        $('#duration_id').val(diff);

    });

问题在于，它仅给出小时值，而不是分钟值，例如，用户a选择班级开始 12:00 和班级结束 13:00 仅当 1 时，当用户更改班级结束时 13:30 然后给出 1.5

我希望通过这种方式选择课程开始 12:00 和课程结束 13:00 ，然后显示为 01:00 并更改课程结束< strong> 13:30 ，然后显示 01:30 ，然后再次更改班级结局 13:45 ，然后显示 01:45

这是HTML代码

<td class="input-field col s1">
                    <label>
                    Start Time
                    </label>
                    <input id="class_strt" class="timepicker" type="time" name="class_strt">
                  </td>
                        <td class="input-field col s1">
                    <label>
                    End Time
                    </label>
                    <input id="class_end" class="timepicker" type="time" name="class_end">
                  </td>
                        <td class="input-field col s1">
                    <label>
                     Duration
                     </label>
                        <input id="duration_id" type="text" name="duration_id">

                  </td>

Answer 1

您只需要计算分钟数之间的差异，然后再次将分钟数转换为小时数和分钟数。参见下面的代码

$(function(){
$('#class_end').on('change',function() 
    {
        var start_time = $('#class_strt').val();
        var end_time = $('#class_end').val();
        var diff = (new Date("1970-1-1 " + end_time) - new Date("1970-1-1 " + start_time) ) /1000/60;
        var hour = parseInt(diff/60);
        var min = diff%60;
        if(min<10){
           min = "0" + min;
        }
        alert(hour + ":" + min);

    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="class_strt">
<input id="class_end">

Answer 2

您可以使用.toISOString()轻松获得已经格式化的时间。

$('.timepicker').on('change', function() {

  var start = new Date("1970-1-1 " + $('#class_strt').val())
  var end = new Date("1970-1-1 " + $('#class_end').val());
  
  var diff = new Date(end - start).toISOString(); // "yyyy-mm-ddThh:mm:ss.zzzZ"
  var hms = diff.match(/T([\d:]+)\./)[1].split(':'); // Get time and split by `:`
  
  $('#duration_id').val( hms[0] +':'+ hms[1] ); // Use hours [0] and minutes [1] 

});

<label>Start Time</label>
<input id="class_strt" class="timepicker" type="time" name="class_strt">

<label>End Time</label>
<input id="class_end" class="timepicker" type="time" name="class_end">

<label>Duration</label>
<input id="duration_id" type="text" name="duration_id">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您可以在几分钟内转换差异并创建一个“标签”：

$('#class_end').on('change',function() 
{

  var t = diff * 60;
  var hours = Math.floor(t/60);
  var minutes = t%60;
  $('#duration_id).val((hours < 10 ? '0' : '')+hours+":"+(minutes < 10 ? '0' : '')+minutes);

});

您可以通过不将diff除以最后60个来避免使用t变量

$('#class_end').on('change',function() 
{

  var diff = ( new Date("1970-1-1 " + end_time) - new Date("1970-1-1 " + start_time) ) / 1000 / 60;
  var hours = Math.floor(diff/60);
  var minutes = diff%60;
  $('#duration_id).val((hours < 10 ? '0' : '')+hours+":"+(minutes < 10 ? '0' : '')+minutes);

});

Answer 4

首先找到分钟的时差，然后从中找到小时和分钟。

$('#class_end').on('change', function() {
  var start_time = $('#class_strt').val();
  var end_time = $('#class_end').val();
  var diff = (new Date("1970-1-1 " + end_time) - new Date("1970-1-1 " + start_time)) / 1000 / 60; //difference in minutes
  var Hr = Math.floor(Number(diff) / 60); //Hour part
  var Min = Number(diff) % 60; //Minute part
  Min = ("0" + Min).slice(-2);
  $('#duration_id').val(Hr + " : " + Min);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="input-field col s1">
  <label>
                    Start Time
                    </label>
  <input id="class_strt" class="timepicker" type="time" name="class_strt">
</td>
<td class="input-field col s1">
  <label>
                    End Time
                    </label>
  <input id="class_end" class="timepicker" type="time" name="class_end">
</td>
<td class="input-field col s1">
  <label>
                     Duration
                     </label>
  <input id="duration_id" type="text" name="duration_id">

</td>