如何計算24小時格式的兩次之間的差異？

在JavaScript中，如何計算24小時格式的兩次差異？如何計算24小時格式的兩次之間的差異？

示例：獲取從08:00:00到23:00:00經過了多少小時。

下面我從兩個下拉菜單中獲得兩個時間值，並試圖計算兩次之間的小時差。我得到錯誤的結果...

腳本：

$(document).ready(function() { 
    function calculateTime() { 
      //get values 
     var valuestart = $("select[name='timestart']").val(); 
     var valuestop = $("select[name='timestop']").val(); 

      //create date format  
     var timeStart = new Date("01/01/2007 " + valuestart); 
     var timeEnd = new Date("01/01/2007 " + valuestop); 

     var difference = timeEnd - timeStart;    
     var diff_result = new Date(difference);  

     var hourDiff = diff_result.getHours(); 

     $("p").html("<b>Total Hours:</b> " + hourDiff)   
    } 
    $("select").change(calculateTime); 
    calculateTime(); 
});

HTML：

<select name="timestart"> 
<option value="00:00:00">12:00 am</option> 
<option value="01:00:00">1:00 am</option> 
<option value="02:00:00">2:00 am</option> 
<option value="03:00:00">3:00 am</option> 
<option value="04:00:00">4:00 am</option> 
<option value="05:00:00">5:00 am</option> 
<option value="06:00:00">6:00 am</option> 
<option value="07:00:00">7:00 am</option> 
<option value="08:00:00">8:00 am</option> 
<option value="09:00:00">9:00 am</option> 
<option value="10:00:00">10:00 am</option> 
<option value="11:00:00">11:00 am</option> 
<option value="12:00:00">12:00 pm</option> 
<option value="13:00:00">1:00 pm</option> 
<option value="14:00:00">2:00 pm</option> 
<option value="15:00:00">3:00 pm</option> 
<option value="16:00:00">4:00 pm</option> 
<option value="17:00:00">5:00 pm</option> 
<option value="18:00:00">6:00 pm</option> 
<option value="19:00:00">7:00 pm</option> 
<option value="20:00:00">8:00 pm</option> 
<option value="21:00:00">9:00 pm</option> 
<option value="22:00:00">10:00 pm</option> 
<option value="23:00:00">11:00 pm</option> 
</select> 

<select name="timestop"> 
<option value="00:00:00">12:00 am</option> 
<option value="01:00:00">1:00 am</option> 
<option value="02:00:00">2:00 am</option> 
<option value="03:00:00">3:00 am</option> 
<option value="04:00:00">4:00 am</option> 
<option value="05:00:00">5:00 am</option> 
<option value="06:00:00">6:00 am</option> 
<option value="07:00:00">7:00 am</option> 
<option value="08:00:00">8:00 am</option> 
<option value="09:00:00">9:00 am</option> 
<option value="10:00:00">10:00 am</option> 
<option value="11:00:00">11:00 am</option> 
<option value="12:00:00">12:00 pm</option> 
<option value="13:00:00">1:00 pm</option> 
<option value="14:00:00">2:00 pm</option> 
<option value="15:00:00">3:00 pm</option> 
<option value="16:00:00">4:00 pm</option> 
<option value="17:00:00">5:00 pm</option> 
<option value="18:00:00">6:00 pm</option> 
<option value="19:00:00">7:00 pm</option> 
<option value="20:00:00">8:00 pm</option> 
<option value="21:00:00">9:00 pm</option> 
<option value="22:00:00">10:00 pm</option> 
<option value="23:00:00">11:00 pm</option> 
</select> 

<p></p>

來源

2012-06-14 CyberJunkie

如果可能的話去的jQuery Timepicker（檢出datepair例子）http://jonthornton.github.com/jquery-timepicker/ – frictionlesspulley

你可以只減去小時馬上做就這樣

var valuestart = $("select[name='timestart']").val(); 
var valuestop = $("select[name='timestop']").val(); 

//create date format   
var timeStart = new Date("01/01/2007 " + valuestart).getHours(); 
var timeEnd = new Date("01/01/2007 " + valuestop).getHours(); 

var hourDiff = timeEnd - timeStart;

這裏的工作小提琴http://jsfiddle.net/VnwF7/4/

來源

2012-06-14 17:31:08

我改變你的代碼，只需使用的差異，而無需創建另一個日期對象：

$(document).ready(function() {  
function calculateTime() { 
     //get values 
     var valuestart = $("select[name='timestart']").val(); 
     var valuestop = $("select[name='timestop']").val(); 

     //create date format   
     var timeStart = new Date("01/01/2007 " + valuestart); 
     var timeEnd = new Date("01/01/2007 " + valuestop); 

     var difference = timeEnd - timeStart;    

     difference = difference/60/60/1000; 


    $("p").html("<b>Hour Difference:</b> " + difference)    

} 
$("select").change(calculateTime); 
calculateTime(); 
});

來源

2012-06-14 17:32:39 peacemaker

這不是jQuery的，但相關的一切時間和日期在JavaScript中......

這可能幫助：datejs http://code.google.com/p/datejs/

下面是從文檔

Date.today().set({ day: 15 })          // Sets the day to the 15th of the current month and year. Other object values include year|month|day|hour|minute|second. 

        Date.today().set({ year: 2007, month: 1, day: 20 }) 


Date.today().add({ days: 2 })          // Adds 2 days to the Date. Other object values include year|month|day|hour|minute|second. 

        Date.today().add({ years: -1, months: 6, hours: 3 }) 


Date.today().addYears(1)               // Add 1 year. 
Date.today().addMonths(-2)             // Subtract 2 months. 
Date.today().addWeeks(1)               // Add 1 week 
Date.today().addHours(6)               // Add 6 hours. 
Date.today().addMinutes(-30)           // Subtract 30 minutes 
Date.today().addSeconds(15)            // Add 15 seconds. 
Date.today().addMilliseconds(200)      // Add 200 milliseconds. 

Date.today().moveToFirstDayOfMonth()   // Returns the first day of the current month. 
Date.today().moveToLastDayOfMonth()    // Returns the last day of the current month. 

new Date().clearTime()                 // Sets the time to 00:00 (start of the day). 
Date.today().setTimeToNow()            // Resets the time to the current time (now). The functional opposite of .clearTime()

編輯一些日期和時間計算：由於這是一個比較舊的答案，我最近確實也使用日期相關的操作moment.js真的很有用。 http://momentjs.com/ https://github.com/moment/moment/

來源

2012-06-14 17:33:37 silverfighter

感謝那些貌似有用的插件！ – CyberJunkie

您不需要將它們轉換爲此特定情況的日期。只是這樣做

$(document).ready(function() {  
    function calculateTime() { 

     var hourDiff = 
     parseInt($("select[name='timestart']").val().split(':')[0],10) -   
     parseInt($("select[name='timestop']").val().split(':')[0],10); 

     $("p").html("<b>Hour Difference:</b> " + hourDiff)    

    } 
$("select").change(calculateTime); 
calculateTime();

}）;

Working fiddle

來源

2012-06-14 17:36:06

如何計算24小時格式的兩次之間的差異？

回答

相關問題