Блог

У меня есть скрипт, в котором мне нужно всегда фиксировать средний диапазон для слайдера пользовательского интерфейса.

Сценарий рассчитан на 10 минут, у слайдера должен быть исправлен средний диапазон.

Я сделал это, но не знаю почему, разница в min и max на панели составляет 12 минут.

Скажем, например, если мой временной интервал начинается с 17.30, минимальное значение слайдера пользовательского интерфейса отображается как 17.18

Я не знаю почему, но я не могу это исправить

Вот мой скрипт:

 <?php
$slot_data = $this->autoload_model->get_data_From_table("mclinicalperiod","*", "mclinicalperiod.Case = 'Old'")->result_array();
$start_time = $slot_data[0]['TimeFrom'];//17.30
$end_time = $slot_data[0]['TimeTo']; //21.29
?>
<legend>Free SLot</legend>
<div style="width:100%; background-color: #cfcfcf; height:30px">
    <a href="javascript:void(0)" onclick="get_slider_time()">Free Slot (From <?php echo $start_time;?> To <?php echo $end_time;?>)</a>
</div>

<script>
function get_slider_time() {
    $('#silder_container').fadeIn();
    var s_t = "<?php echo $start_time;?>";
    var e_t = "<?php echo $end_time;?>";
    var s_time = parseFloat(s_t*60);
    var e_time = parseFloat(e_t*60);
    var time_min = '<?php echo $time;?>';
    $("#slider").slider({
        range:true,
        //min: parseFloat(s_time  parseInt(time_min) 2),
        min: parseFloat(s_time),
        //max: parseFloat(e_time   parseInt(time_min) 2),
        max: parseFloat(e_time),
        values:[parseFloat(s_time),parseFloat(s_time   parseInt(time_min))],
        slide: function(e, ui) {
            var index = $(this).children("a").index(ui.handle);
            var next = (index == 0) ? 1 : 0;
            if((ui.values[ 1 ] - ui.values[ 0 ]) >= parseInt(time_min) || (ui.values[ 1 ] - ui.values[ 0 ]) < parseInt(time_min)) {
                var newVal = (index == 0) ? ui.values[ 0 ]   parseInt(time_min) : ui.values[ 1 ] - parseInt(time_min);
                $("#slider").slider("values", next, newVal);
            }
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) 
                hours1= '0'   hours1;
            if(minutes1 < 10) 
                minutes1 = '0'   minutes1;

            if(minutes1 == 0) 
                minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) 
                hours2= '0'   hours2;
            if(minutes2 < 10)
                minutes2 = '0'   minutes2;

            if(minutes2 == 0)
                minutes2 = '00';
            $('#timefrom').val(hours1 ':' minutes1);
            $('#timeto').val(hours2 ':' minutes2);
        }
    });
}
</script>
<div id="silder_container" style="display:none">
    <div>
        <div id="slider"></div>
    </div>
    <input type="text" id="single_surgery" name="single_surgery" readonly value="<?php echo $surgery;?>"/>
    <input type="text" id="timefrom" name="timefrom" readonly placeholder="StartTime"/>
    <input type="text" id="timeto" name="timeto" readonly placeholder="EndTime"/>
</div>
  

Как я могу исправить эту ошибку?

Редактировать

Я устанавливаю свой jsfiddle, но он не работает.

http://jsfiddle.net/D7UFS/17/

Для дальнейшего использования: Пожалуйста, предоставьте рабочий пример jsFiddle.Я не смог заставить ваш код работать даже после удаления тегов PHP.

Изучая ваш код, я думаю, что проблема заключается в том, что вы обрабатываете времена как десятичные числа.

 var s_t = "17.30";
var e_t = "21.29";
var s_time = parseFloat(s_t*60);
var e_time = parseFloat(e_t*60);
  

Здесь оба времени умножаются на 60, что, как я полагаю, предназначено для перевода их в минуты. Ошибка здесь заключается в том, что s_t есть 17.30 , не 17:30 , что составляет 17,3 часа, что, в свою очередь, составляет 17 часов 18 минут.

Вы должны либо преобразовать исходные временные метки в их правильные значения (например, 17:30 становится 17.50), либо проанализировать значения минут из временных меток отдельно. Обратите внимание, что использование точных десятичных значений становится сложным при использовании значений, отличных от 00, 15, 30 и 45, поскольку одна минута составляет 1/60 часа.

РЕДАКТИРОВАТЬ: С помощью этого кода вы можете преобразовать десятичные дроби в минуты:

 var s_t = "17.30";
var e_t = "21.29";
var s_h = parseInt(s_t);
var e_h = parseInt(e_t);
var s_m = parseInt((s_t-s_h)*100);
var e_m = parseInt((e_t-e_h)*100);
var s_time = s_h*60 s_m;
var e_time = e_h*60 e_m;
  

Сначала я извлекаю значение часа, вычитая целое значение из десятичной дроби. Затем я просто умножаю десятичное значение на 100 , которое является желаемым количеством минут.