Javascript - 2つのjQuery UIスライダーの時間差を計算する

Question

私はStack Overflowについて調べていますが、助けてくれるものがいくつか見つかりました。基本的には、2つの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); 


    } 
}); 

そして、私の上を時間差を計算して警告を出力するクリックイベント：

Answer 1

あなたはスリープ時間の値を設定し、あなたが不足している時間をウェイク3210 '：'

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

は次のようになります。それは作品

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