用简单的 javascript/jquery 计算 hh:mm:ss 的时间差答案

【问题标题】：Calculate time difference in hh:mm:ss with simple javascript/jquery用简单的 javascript/jquery 计算 hh:mm:ss 的时间差
【发布时间】：2017-04-03 18:10:02
【问题描述】：

我有两个输入字段用于时间开始和时间结束，还有另一个字段用于区别，即呼叫持续时间。我希望字段上的结果采用这种格式 = 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);
});

【问题讨论】：

请显示您尝试使用的 HTML 和代码。
new Date(new Date() - new Date() ).toISOString().split("T")[1].split(".")[0]
以上“中间日期”应该是新旧日期值...

标签： javascript jquery time

【解决方案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 属性将持续时间输入设为只读。

【讨论】：

非常感谢您提供此代码。它现在正在工作。关于通话时长的输入，最初他们想手动输入差异，但昨天他们想让它自动计算，所以我今天可能不得不让它只读。 :)
用户和他们（不断变化的）需求：我们都知道对我们的耐心来说是一个多么大的挑战 ;-)

【解决方案2】：

假设你把它作为字符串，你大致可以做到以下几点。

var str1 = "11:31:51 AM";
var str2 = "11:52:54 AM";

str1 = str1.split(':');
str2 = str2.split(':');

if(str1[2].split(' ').pop() != str2[2].split(' ').pop()) { // one is AM other is PM
   str1[0] = parseInt(str1[0])+12;
}

var finalStr = m(str1[0], str2[0])+":"+m(str1[1], str2[1])+":"+m(str1[2], str2[2]);

console.log(finalStr);

function m(n1,n2) {
  return Math.abs(parseInt(n1)-parseInt(n2));
}

【讨论】：