2017-02-26 25 views
1

我試圖獲得兩次輸入之間的差異並將其顯示爲HH:mm:ss。在javascript中計算兩次輸入的差值(以秒爲單位)

爲顯示器創建了一個輸入框id="diff"。此代碼適用於長達24小時的差異,這是我所需要的。

但是,當開始或結束時間的秒數輸入爲0(例如11:10:00 PM)時,顯示屏會反映出NaN。

任何人都知道問題在這裏?

var start = document.getElementById("start").value; 
 
var end = document.getElementById("end").value; 
 

 
function diff(start, end) { 
 
    start = start.split(":"); 
 
    end = end.split(":"); 
 
    var startDate = new Date(0, 0, 0, start[0], start[1], start[2], 0); 
 
    var endDate = new Date(0, 0, 0, end[0], end[1], end[2], 0); 
 

 
    //for calculation to work if endtime cross over next day. Eg. 11pm to 2am 
 
    if (endDate.getTime() < startDate.getTime()) { 
 
     endDate.setDate(endDate.getDate() + 1); 
 
    } 
 

 
    var diff = endDate.getTime() - startDate.getTime(); 
 

 
    var hours = Math.floor(diff/1000/60/60); 
 
    diff -= hours * 1000 * 60 * 60; 
 
    var minutes = Math.floor(diff/1000/60); 
 
    diff -= minutes * 1000 * 60; 
 
    var seconds = Math.floor(diff/1000); 
 

 

 
    return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes + ":" + (seconds < 9 ? "0" : "") + seconds; 
 

 
} 
 

 
document.getElementById("diff").value = diff(start, end);
<input type="time" id="start" step="1" value=""> 
 
<input type="time" id="end" step="1" value=""> 
 
<input id="diff">

+1

會不會更容易,如果你只是解析這兩個DATAS到UNIX時間,減去它並再次更改爲日期對象? –

回答

1

那是因爲你的 「00」 秒永遠不會被通過。只有幾分鐘和幾個小時過去了。所以,當這種情況發生時,你的日期無效。

只需檢查拆分數組的最後一個參數,並在t不存在時傳遞零。

嘗試修改此:

var startDate = new Date(0, 0, 0, start[0], start[1], start[2], 0); 
var endDate = new Date(0, 0, 0, end[0], end[1], end[2], 0); 

這樣:

var startDate = new Date(0, 0, 0, start[0], start[1], start[2] ? start[2] : 0, 0); 
var endDate = new Date(0, 0, 0, end[0], end[1], end[2] ? end[2] : 0, 0); 
+0

它出色地工作。非常感謝! – Edwin

+0

隨時。呃......你可以接受它作爲答案。 :) – dev8080

相關問題