Jquery 滑块.需要滑块来显示 15 分钟的增量并显示小时而不仅仅是分钟

本文关键字：分钟 显示 不仅仅是 小时 滑块 Jquery | 更新日期: 2023-09-27 18:34:44

我有一个jquery滑块，可以以15分钟为增量选择时间量。我需要从 15 分钟到 1 小时滑动，依此类推，直到 8 小时。我尝试了很多我在网上找到的例子，但没有成功。现在我的滑块只是以 15 整数为增量，最多 480 分钟。任何帮助或其他想法将不胜感激。提前谢谢。

源代码

  <script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#slider-range-max").slider({
            range: "min",
            min: 0,
            max: 480,
            value: 15,
            step: 15,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
                $("#amount1").val(ui.value);
            }
        });
        if("<%=this.IsPostBack%>"  === "True")
        {
            $("#amount").val($("#slider-range-max").slider("value"));
            $("#amount1").val($("#slider-range-max").slider("value"));
            $("#txtHiddenAmount").val($("#amount").val()); 
        }
    });
  <label for="amount">Time/Length in Minutes(Slide to Desired Amount, 1 Credit per hour):</label>
                 &nbsp
                <input type="text" id="amount1" readonly="readonly" style="border: 0; color: #f6931f; font-weight: bold;" />  
               <asp:TextBox ID="amount" runat="server" Style="color: white"      BorderWidth="0" ClientIDMode="Static">15</asp:TextBox>

Jquery 滑块.需要滑块来显示 15 分钟的增量并显示小时而不仅仅是分钟

如果您需要将分钟的值格式化为小时和分钟，您可以像这样进行数学运算： 

var hours = Math.floor(val / 60);
var minutes = val % 60;

小提琴示例：http://jsfiddle.net/9vPrW/2/

在

初始化滑块时将step值从 15 更改为 60，以每次 1 小时为增量增加时间。
此外，要以小时为单位显示值，您需要将分钟值除以 60。

例如：.val(parseInt($("#slider-range-max").slider("value"))/60);

相关文章：