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

Question

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

例如:Get多少从经过的小时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>

Answer 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/

Answer 2

试试这个方法

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 

Answer 3

我将代码更改为仅使用差异而不必创建另一个日期对象：

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