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;