Javascript 我如何计算24小时格式的两个时间之间的差异?
在JavaScript中,如何计算24小时格式的两个时间之间的差异 示例:获取从Javascript 我如何计算24小时格式的两个时间之间的差异?,javascript,jquery,html,Javascript,Jquery,Html,在JavaScript中,如何计算24小时格式的两个时间之间的差异 示例:获取从08:00:00到23:00:00经过的小时数 下面我从两个下拉菜单中得到两个时间值,并试图计算这两个时间之间的小时差。我得到了错误的结果 工作示例: 脚本: $(document).ready(function() { function calculateTime() { //get values var valuestart = $("select[name='t
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();
});
<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>
$(文档).ready(函数(){
函数计算时间(){
//获取价值
var valuestart=$(“选择[name='timestart']”)val();
var valuestop=$(“选择[name='timestop']”)val();
//创建日期格式
var timeStart=新日期(“2007年1月1日”+valuestart);
var TIMEND=新日期(“2007年1月1日”+valuestop);
var差异=时间结束-时间开始;
var diff_结果=新日期(差异);
var hourDiff=diff_result.getHours();
$(“p”).html(“总小时数:+hourDiff)
}
$(“选择”)。更改(计算时间);
计算时间();
});
HTML:
$(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();
});
<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>
上午12:00
凌晨1点
凌晨2点
凌晨三点
凌晨四点
上午五点
早上6点
上午7:00
上午8:00
上午9点
上午10:00
上午11:00
下午12:00
下午1:00
下午2:00
下午三点
下午四点
下午五点
下午六点
下午7:00
晚上八点
晚上九点
晚上10:00
晚上11:00
上午12:00
凌晨1点
凌晨2点
凌晨三点
凌晨四点
上午五点
早上6点
上午7:00
上午8:00
上午9点
上午10:00
上午11:00
下午12:00
下午1:00
下午2:00
下午三点
下午四点
下午五点
下午六点
下午7:00
晚上八点
晚上九点
晚上10:00
晚上11:00
你可以用这种方法立即减去小时数
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;
这是工作小提琴
更新-计算是否包括第二天。只需添加以下if块
if (hourDiff < 0) {
hourDiff = 24 + hourDiff;
}
if(hourDiff<0){
hourDiff=24+hourDiff;
}
我将您的代码更改为只使用差异,而不必创建另一个日期对象:
$(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();
});
$(文档).ready(函数(){
函数计算时间(){
//获取价值
var valuestart=$(“选择[name='timestart']”)val();
var valuestop=$(“选择[name='timestop']”)val();
//创建日期格式
var timeStart=新日期(“2007年1月1日”+valuestart);
var TIMEND=新日期(“2007年1月1日”+valuestop);
var差异=时间结束-时间开始;
差异=差异/60/60/1000;
$(“p”).html(“时差:+时差)
}
$(“选择”)。更改(计算时间);
计算时间();
});
它不是Jquery,而是JavaScript中与时间和日期相关的所有内容
这可能会有所帮助: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来进行与日期相关的操作,这也非常有用。
对于这种特殊情况,您不需要将它们转换为日期。就这么做吧
$(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();
});
$(文档).ready(函数(){
函数calculateTime(){
var hourDiff=
parseInt($(“选择[name='timestart'])).val().split(':')[0],10)-
parseInt($(“选择[name='timestop']).val().split(':')[0],10);
$(“p”).html(“时差:+hourDiff)
}
$(“选择”)。更改(计算时间);
计算时间();
});
这样试试
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
如果可能的话,使用JQuery Timepicker(签出日期对示例)这里的每个答案都只假设开始时间和结束时间在同一天-这在很多情况下都不是这样-因此您收到了警告:)谢谢,这看起来是一个有用的插件!尝试输入11:00 pm到2:00 am,它将给出差值-21。它是wrong@MKPatel在这种情况下,你可能要决定什么时候考虑早/早的时间作为第二天(这个代码样本假定两个时间是在同一天,技术上,上午2点是下午11点之前)。@RobertDundon
示例假设两个时间都在同一天
——这是错误的——时间最多只能累积23小时59分钟——因此没有什么需要“考虑”——显然,少于开始的任何结束都是第二天。