Javascript - 计算两个jQuery UI滑块之间的时间差

Question

所以我一直在搜索Stack Overflow，找到了一些好东西来帮助我，但我不确定如何把它放在一起。基本上我有两个jQuery UI滑块，每个滑块都给我一个时间作为值。然后，在单击时，我想计算值 1 和值 2 之间的时间差。我有我需要的一切，但是当我单击按钮时，它会输出 NaN 错误。它在第一次运行时有效，因为我已将变量设置为默认值，但基本上我需要将滑块值附加到这些值，以便将它们而不是默认值拾取。任何帮助非常感谢...

JS 小提琴

我的网页：

<div class="sliders_step1">
<div id="slider-range-sleep"></div>
</div>
<div class="sliders_step1">
<div id="slider-range-wake"></div>
</div>
<a href = "javascript:void(0);" class = "nav-arrow right-nav-arrow grey-blue-link" id = "question1-right">Click me</a>

我如何从两个滑块创建时间值：

$("#slider-range-sleep").slider({
range: false,
min: 0,
max: 1440,
step: 15,
values: [1250],
slide: function (e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
if (hours1 >= 12) {
if (hours1 == 12) {
hours1 = hours1;
minutes1 = minutes1 + " PM";
} else {
minutes1 = minutes1 + " PM";
}
}else if (hours1 <= 9) {
hours1 = "0" + hours1;
minutes1 = minutes1 + " AM";
ampmWake = "morning";   
}
else {
hours1 = hours1;
minutes1 = minutes1 + " AM";
}
if (hours1 == 0) {
hours1 = 12;
minutes1 = minutes1;
}
sleepTime = hours1 + minutes1;
sleepTime = sleepTime.replace(' AM','');
sleepTime = sleepTime.replace(' PM','');
$('.slider-time').html(hours1 + ':' + minutes1);
}
});

$("#slider-range-wake").slider({
range: false,
min: 0,
max: 1440,
step: 15,
values: [400],
slide: function (e, ui) {
var hours2 = Math.floor(ui.values[0] / 60);
var minutes2 = ui.values[0] - (hours2 * 60);

if (hours2.length == 1) hours2 = '0' + hours2;
if (minutes2.length == 1) minutes2 = '0' + minutes2;
if (minutes2 == 0) minutes2 = '00';
if (hours2 >= 12) {
if (hours2 == 12) {
hours2 = hours2;
minutes2 = minutes2 + " PM";
} else {
minutes2 = minutes2 + " PM";
}
} 
else if (hours2 <= 9) {
hours2 = "0" + hours2;
minutes2 = minutes2 + " AM";
}
else {
hours2 = hours2;
minutes2 = minutes2 + " AM";
}
if (hours2 == 0) {
hours2 = 12;
minutes2 = minutes2;
}
wakeTime = hours2 + minutes2;
wakeTime = wakeTime.replace(' AM','');
wakeTime = wakeTime.replace(' PM','');
$('.slider-time-wake').html(hours2 + ':' + minutes2);

}
});

我的点击事件应该计算时差并输出警报：

var sleepTime = '22:00';
var wakeTime = '06:00';
$("#question1-right").on('click', function() {
var startTimeArray = sleepTime.split(":");
var startInputHrs = parseInt(startTimeArray[0]);
var startInputMins = parseInt(startTimeArray[1]);
var endTimeArray = wakeTime.split(":");
var endInputHrs = parseInt(endTimeArray[0]);
var endInputMins = parseInt(endTimeArray[1]);
var startMin = startInputHrs*60 + startInputMins;
var endMin = endInputHrs*60 + endInputMins;
var result;
if (endMin < startMin) {
var minutesPerDay = 24*60; 
result = minutesPerDay - startMin;  // Minutes till midnight
result += endMin; // Minutes in the next day
} else {
result = endMin - startMin;
}
var minutesElapsed = result % 60;
var hoursElapsed = (result - minutesElapsed) / 60;
alert ( "Elapsed Time : " + hoursElapsed + ":" + (minutesElapsed < 10 ?
'0'+minutesElapsed : minutesElapsed) ) ;
});

Answer 1

当您设置睡眠时间和唤醒时间的值时，您缺少"：">

sleepTime = hours1 + minutes1;
wakeTime = hours2 + minutes2;

应该是：

sleepTime = hours1 + ':' + minutes1;
wakeTime = hours2 + ':' + minutes2;