在 UI 滑块中设置范围错误

Question

我有一个脚本，我需要在其中保持 ui 滑块的中间范围始终固定。

场景是预约 10 分钟，滑块的中间范围应该是固定的。

我已经这样做了，但不知道为什么，最小值和最大值在条形图上相差 12 分钟。

例如，如果我的时间段从 17.30 开始，则 ui 滑块的最小值显示为 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/

Answer 1

供将来参考：请提供一个有效的 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，即所需的分钟数。