jQuery-UI滑块未显示

Question

我尝试了很多在其他问题中发现的解决方案，但没有一个解决了我的问题，我真的不知道为什么我的代码无法正常工作，控制台中没有错误，并且jquery和jquery-ui是最新版本。

参考

    <script src="jQuery3.3.1.js" type="text/javascript"></script>

    <link href="jQueryUI1.12.1-darkness.css" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
    crossorigin="anonymous" type="text/javascript"></script>

滑块

$("#slider-range").slider({
        range: true,
        min: parseInt(0),
        max: parseInt(1440),
        step: parseInt(15),
        value: parseInt(600),
        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 {
              hours1 = hours1 - 12;
              minutes1 = minutes1 + " PM";
                        }
                    } else {
                        hours1 = hours1;
                        minutes1 = minutes1 + " AM";
                    }
                    if (hours1 == 0) {
                        hours1 = 12;
                        minutes1 = minutes1;
                    }



                    $('.slider-time').html(hours1 + ':' + minutes1);
                }
            });

CSS

            #time-range p {
                font-family: "Arial", sans-serif;
                font-size: 14px;
                color: #333;
            }
            #slider-range {
                width: 80%;
                margin-bottom: 15px;
            }

HTML

        <div id="time-range">
            <p>Time Range: <span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span>

            </p>
            <div class="sliders_step1">
                <div id="slider-range"></div>
            </div>
        </div>

我真的需要尽快解决这个问题！

JSFiddle在这里。

Answer 1

看一下这段代码。

 $(function() { function formatTime(h, m, f) { if (f == undefined) { f = true; } var time; if (f) { var fh = (h > 12 ? h - 12 : h); if (h == 24) { fh = 12 } else if (fh == 0) { fh = 12; } time = "" + (fh < 10 ? "0" + fh : fh) + ":" + (m < 10 ? "0" + m : m) + (h > 11 && h != 24 ? " PM" : " AM"); } else { time = "" + (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m); } return time; } $("#slider-range").slider({ range: true, min: 0, max: 24, step: .25, values: [10, 12], slide: function(e, ui) { var times = [{ hour: Math.floor(ui.values[0]) }, { hour: Math.floor(ui.values[1]) }]; times[0].min = (ui.values[0] - times[0].hour) * 60; times[1].min = (ui.values[1] - times[1].hour) * 60; $('.slider-time').html(formatTime(times[0].hour, times[0].min)); $('.slider-time2').html(formatTime(times[1].hour, times[1].min)); } }); }); 

 #time-range p { font-family: "Arial", sans-serif; font-size: 14px; color: #333; } #slider-range { margin-bottom: 15px; } 

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-darkness/jquery-ui.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="time-range"> <p>Time Range: <span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span> </p> <div class="sliders_step1"> <div id="slider-range"></div> </div> </div> 

尝试在0到2400之间变化是很困难的，因为我们正在使用而不是10，而是使用60。例如，时间计算为1400、1415、1430、1445、1500，但是滑块的计数为1400 ，1415、1430、1445、1460、1475、1490、1505。因此，随着滑块的移动，您将不会获得任何时间值。

+---------------------------------------------+
| x    | h = flour(x / 60) | m = x - (h * 60) |
+---------------------------------------------+
| 600  | 10                | 0                |
| 1215 | 20                | 15               |
| 1360 | 22                | 40               |
+---------------------------------------------+

您可以看到如何开始分解。 现在，如果您切换小时百分比，则60分钟的.25或25％变为15分钟。

+-----------------------------------------+
| x     | h = floor(x) | m = (x - h) * 60 |
+-----------------------------------------+
| 6.00  | 6            | 0                |
| 12.25 | 12           | 15               |
| 13.75 | 13           | 45               |
+-----------------------------------------+

然后，您要将小时和分钟格式设置为12小时格式： hh:mm A/PM或24小时格式hh:mm 。 这很容易做到，因此我将其移至其自身的功能，以便您可以轻松进行调整。

希望这可以帮助。