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

Question

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

JS FIDDLE

我的HTML：

<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;