jquery - Jquery UI滑块在页面加载时显示时间格式？

Question

您好，我已将一些代码粘贴在一起，使用 jquery UI 中的幻灯片创建时间输入。该代码工作正常，但该值在第一次加载页面时在 hh:mm 上显示数值而不是。谁能告诉我该怎么做？

$(function() {

    $("#sliderTime2").slider({
        range: false,
        value: 720,
        min: 0,
        max: 1425,
        step: 15,
        slide: function(e, ui) {
            var hours = Math.floor(ui.value / 60);
            var minutes = ui.value - (hours * 60);
            if(hours < 10) hours = '0' + hours;
            if(minutes < 10) minutes = '0' + minutes;
            $('#sliderTimeDis2').val(hours+':'+minutes);
        }
    });

     $("#sliderTimeDis2").val($("#sliderTime2").slider("value"));

});

Answer 1

您的问题是您正在将滑块的值加载到您的 div 中，这将是一个整数。

你会想要这样的东西：

$(function() {

   $("#sliderTime2").slider({
      range: false,
      value: 720,
      min: 0,
      max: 1425,
      step: 15,
      slide: function(e, ui) {
         updateTimeDisplay(ui.value);
      },
      create: function(e, ui) {
         //this should work
         updateTimeDisplay($(this).option('value'));
      }
   });

   var updateTimeDisplay=function(timeVal)
   {
      var hours = Math.floor(timeVal / 60);
      var minutes = timeVal - (hours * 60);
      if(hours < 10) hours = '0' + hours;
      if(minutes < 10) minutes = '0' + minutes;
      $('#sliderTimeDis2').val(hours+':'+minutes);
   }

});