如何计算 24 小时格式的两个时间之间的差异？答案

【问题标题】：How can I calculate the difference between two times that are in 24 hour format?如何计算 24 小时格式的两个时间之间的差异？
【发布时间】：2020-05-15 23:20:30
【问题描述】：

在 JavaScript 中，如何计算 24 小时格式的两个时间之间的差异？

示例：获取从 08:00:00 到 23:00:00 所经过的小时数。

下面我从两个下拉菜单中获取两个时间值，并尝试计算两个时间之间的小时差。我得到错误的结果...

工作示例：http://jsfiddle.net/VnwF7/1/

脚本：

$(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>

【问题讨论】：

如果可能，请使用 JQuery Timepicker（查看日期对示例）jonthornton.github.com/jquery-timepicker
这里的每个答案只假设开始时间和结束时间在同一天 - 很多时候情况并非如此 - 所以 您已被警告 :)

标签： javascript jquery html

【解决方案1】：

您可以通过这种方式立即减去小时数

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/

更新 - 计算我们是否包括第二天。只需添加以下 if 块

 if (hourDiff < 0) {
    hourDiff = 24 + hourDiff;
 }

http://jsfiddle.net/gfvhqat9/

【讨论】：

尝试输入 11:00 pm 到 2:00 am 会给出-21的差异。这是错误的
@MKPatel 在这种情况下，您可能必须确定何时将清晨/凌晨时间视为第二天（此代码示例假设两个时间都在同一天，从技术上讲，2 a.m.是在晚上 11 点之前）。
@RobertDundon sample assumes that both times are on the same day - 完全正确，这是错误的 - 时间最多只能累积 23 小时 59 分钟 - 所以没有什么可以“考虑” - 很明显，任何结束都比开始少是第二天。
wirey00 如果开始和停止来自同一个选择？我的意思是检查插槽的开始和结束并隐藏第一个选项（尽快）？
@MKPatel 好吧，我想这个解决方案是 24 小时格式而不是 12 小时格式，您输入的是 11:00 pm，即 12 小时格式。

【解决方案2】：

我将您的代码更改为只使用差异而无需创建另一个日期对象：

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

【讨论】：

【解决方案3】：

试试这个方法

var time_start = new Date();
var time_end = new Date();
var value_start = "06:00:00".split(':');
var value_end = "23:00:00".split(':');

time_start.setHours(value_start[0], value_start[1], value_start[2], 0)
time_end.setHours(value_end[0], value_end[1], value_end[2], 0)

time_end - time_start // millisecond

【讨论】：

【解决方案4】：

这不是 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/

【讨论】：

感谢这个看起来很有用的插件！

【解决方案5】：

对于这种特定情况，您不需要将它们转换为日期。就这样做

$(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

【讨论】：