用简单的javascript / jquery计算hh：mm：ss的时差 [英] Calculate time difference in hh:mm:ss with simple javascript/jquery

问题描述

我有两个输入字段用于时间开始和时间结束，还有另一个字段用于差异，即呼叫持续时间。我希望字段上的结果是这种格式= 00:21:03

I have two input field for the time start and time end and there is another field for the difference which is the Call Duration. I want the result on the field to be in this format = 00:21:03

<div class="inline_divider">
  <label for="form_qa_startcall" class="qaw_form_label3">Start of Call</label>
  <input type="text" id="form_qa_startcall" class="qaw_form_input3" placeholder="eg. 11:36:47 PM" maxlength="11">
</div>
<div class="inline_divider">
  <label for="form_qa_endcall" class="qaw_form_label3">End of Call</label>
  <input type="text" id="form_qa_endcall" class="qaw_form_input3" placeholder="eg. 11:46:47 PM" maxlength="11">
</div>
<div class="inline_divider">
  <label for="form_qa_callduration" class="qaw_form_label3">Call Duration</label>
  <input type="text" id="form_qa_callduration" class="qaw_form_input3" placeholder="eg. 00:01:10" maxlength="8">
</div>

由于AM / PM格式化，我很难获得结果。
我发现了类似这样的问题，但他正在使用momentjs。尽可能地，我不想使用任何插件，只需一个普通的javascript或来自jquery就可以。这是我工作的代码，我得到的结果（0：21：3）但我需要它是两位数的小时，分​​钟和秒（00:21:03）。

I am having a hardtime getting the result due to the "AM/PM" formatting. I have found a similar question like this but he is using "momentjs". As much as possible, I don't want to use any plugins, just a plain javascript or from jquery will do. This is the code I got working, I am getting the result (0:21:3) but I need it to be two digits for hours, minutes, and seconds (00:21:03).

$("#form_qa_endcall").on('keyup',function(){
  var callStart = $('#form_qa_startcall').val();
  var callEnd = $('#form_qa_endcall').val();
  var timeStart = new Date("01/01/2007 " + callStart);
  var timeEnd = new Date("01/01/2007 " + callEnd);

    function datediff(fromDate,toDate,interval) {
        var second=1000, minute=second*60, hour=minute*60, day=hour*24, week=day*7;
        fromDate = new Date(fromDate);
        toDate = new Date(toDate);
        var timediff = toDate - fromDate;

        if (isNaN(timediff)) return NaN;
        switch (interval) {
            case "years": return toDate.getFullYear() - fromDate.getFullYear();
            case "months": return (
                ( toDate.getFullYear() * 12 + toDate.getMonth() )
                - 
                ( fromDate.getFullYear() * 12 + fromDate.getMonth() )
            );
            case "weeks"  : return Math.floor(timediff / week);
            case "days"   : return Math.floor(timediff / day);
            case "hours"  : return Math.floor(timediff / hour);
            case "minutes": return Math.floor(timediff / minute);
            case "seconds": return Math.floor(timediff / second);
            default: return undefined;
        }
    }
    var seco = datediff(timeStart, timeEnd, 'seconds') % 60;
    var minu = datediff(timeStart, timeEnd, 'minutes') % 60;
    var hour = datediff(timeStart, timeEnd, 'hours');

    $('#form_qa_callduration').val(hour + ":" + minu + ":" + seco);
});

推荐答案

您可以使用以下代码：

function diff(a, b) {
    function toTime(a) {  
        return Date.parse('1970-01-01 ' + a.substr(0,8)) / 1000
             + (a.includes('PM') && (12*60*60));
    }
    var d = toTime(b) - toTime(a);
    return d >= 0 ? new Date(0,0,0,0,0,d).toTimeString().substr(0,8) : '';
}

$('.qaw_form_input3').on('input', function () {
    $('#form_qa_callduration').val( 
        diff($('#form_qa_startcall').val(), $('#form_qa_endcall').val()));
}).click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline_divider">
  <label for="form_qa_startcall" class="qaw_form_label3">Start of Call</label>
  <input type="text" id="form_qa_startcall" class="qaw_form_input3" placeholder="eg. 11:36:47 PM" maxlength="11">
</div>
<div class="inline_divider">
  <label for="form_qa_endcall" class="qaw_form_label3">End of Call</label>
  <input type="text" id="form_qa_endcall" class="qaw_form_input3" placeholder="eg. 11:46:47 PM" maxlength="11">
</div>
<div class="inline_divider">
  <label for="form_qa_callduration" class="qaw_form_label3">Call Duration</label>
  <input type="text" id="form_qa_callduration" class="qaw_form_input3" placeholder="eg. 00:01:10" maxlength="8" readonly>
</div>

由于持续时间将通过更改其他两个输入值来更新，因此最好是通过添加 readonly 属性将持续时间输入设为只读。

As the duration will be updated by changes to the other two input values, it would be a good idea to make the duration input read-only, by adding the readonly attribute.

这篇关于用简单的javascript / jquery计算hh：mm：ss的时差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！