Javascript

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 和唤醒时间的值时，您缺少“:”

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

应该是：

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

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

Javascript - calculate time difference between two jQuery UI Sliders

jquery

jquery-ui-slider