2017-04-03 108 views
2

我有两个输入字段,用于时间开始和时间结束,还有另一个字段表示呼叫持续时间的差异。我想在球场上的结果是这种格式= 0时21分03秒使用简单的javascript/jquery计算hh:mm:ss的时间差异

<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); 
}); 
+0

请显示您尝试过的HTML和代码。 – trincot

+0

'new Date(new Date() - new Date()).toISOString()。split(“T”)[1] .split(“。”)[0]' – dandavis

+0

上面的“中间日期”应该是旧的和新的日期值... – dandavis

回答

2

您可以使用此代码:

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属性。

+0

非常感谢您为此代码。它正在工作。关于通话持续时间的输入,原本他们想手动输入差值,但是昨天他们想要自动计算,所以我可能必须在今天进行只读。 :) – Stonesteel

+0

用户及其(不断变化的)需求:我们都知道什么样的挑战可以成为我们的耐心;-) – trincot

0

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

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