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>

如何解决此错误？

enter image description here

修改

我正在使用我的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，这是所需的分钟数。

在UI滑块中设置范围错误

修改

1 个答案: