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 分钟的 0.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。这很容易做到，所以我将它移到了它自己的功能中，以便您轻松调整。

希望这会有所帮助。