如何根据总小时数制作 Time Jquery Slider答案

【问题标题】：How to make Time Jquery Slider based on total Hours如何根据总小时数制作 Time Jquery Slider
【发布时间】：2018-01-24 11:17:59
【问题描述】：

我需要从 04:30 到 45:30 的时间滑块。

我试试下面的代码

<div id="time-range">
    <p>Time Range: <span class="slider-time">04:30</span> - <span class="slider-time2">45:30</span>

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

$("#slider-range").slider({
    range: true,
    min: 258, /* 04:30 */
    max: 2718, /*45:30*/
    step: 15,
    values: [258, 2718],
    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';

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

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

        if (hours2.length == 1) hours2 = '0' + hours2;
        if (minutes2.length == 1) minutes2 = '0' + minutes2;
        if (minutes2 == 0) minutes2 = '00';

        $('.slider-time2').html(hours2 + ':' + minutes2);
    }
});

这里计算min和max时间是04.30 * 60

但滑块时间从min - 04:18 和max - 45:18 开始，我需要min - 04:30 和max - 45:38

【问题讨论】：

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

这仅仅是因为你的数学是错误的。 4.5 小时是 270 分钟，而不是 258。同样，45.5 小时是2730 分钟。这是一个工作版本：

$("#slider-range").slider({
  range: true,
  min: 270,
  max: 2730,
  step: 15,
  values: [270, 2730],
  slide: function(e, ui) {
    $('.slider-time').each(function(i) {
      var hours = ("00" + Math.floor(ui.values[i] / 60)).slice(-2);
      var mins = ("00" + (ui.values[i] - (hours * 60))).slice(-2);
      $(this).html(hours + ':' + mins);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<div id="time-range">
  <p>Time Range: <span class="slider-time">04:30</span> - <span class="slider-time">45:30</span></p>
  <div class="sliders_step1">
    <div id="slider-range"></div>
  </div>
</div>

请注意，我还改进了格式化逻辑。

【讨论】：