如何计算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小时格式的两次之间的差异？

回答

相关问题