javascript - 计算hh中的时间差:mm:ss with simple javascript/jquery

Question

我有两个输入字段用于时间开始和时间结束，还有另一个字段用于表示通话时长的差异。我希望字段上的结果采用这种格式 = 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) 的两位数。

$("#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);
});

Answer 1

您可以使用此代码:

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 属性将持续时间输入设置为只读。