使用簡單的javascript/jquery計算hh：mm：ss的時間差異

Question

我有兩個輸入字段，用於時間開始和時間結束，還有另一個字段表示呼叫持續時間的差異。我想在球場上的結果是這種格式= 0時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> 

我有一個hardtime得到的結果爲「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>

由於持續時間將被修改更新到其他兩個輸入值，這將是通過添加來使持續時間輸入爲只讀的好主意0屬性。

Answer 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)); 
 
}