javascript - 中午 12 点范围 slider 后的 noUISlider 时间

Question

我现在有点困惑..我正在使用 noUiSlider 插件

我实现了一个时间范围选择器，从早上 6 点开始到第二天早上 6 点。

基本上 23:59 之前的数据都可以，但是当到达第二天时，我需要时间为 1:00、2:00，而不是 25:00、26:00 等...

我一直在尝试在 JSFiddle 示例中解决这个问题，但我想知道是否没有更简单的方法来处理这些数据。

我将所有内容以分钟为基础，以我的增量和值为基础，以便更轻松地将其转换为小时。

https://jsfiddle.net/skrb5cg3/18/

var slider = document.getElementById("slider"), 
    leftValue = document.getElementById('leftvalue'),


 rightValue = document.getElementById('rightvalue');

// 0 = initialhttps://jsfiddle.net/skrb5cg3/18/#run minutes from start of day
// 1440 = maximum minutes in a day
// step: 30 = amount of minutes to step by. 
var initialStartMinute = 0,
  initialEndMinute = 2160,
  step = 15,
  margin = 120;

slider = noUiSlider.create(slider, {
  start: [initialStartMinute, initialEndMinute],
  connect: true,
  step: step,
  margin: margin,
  start: [360, 720],
  padding: 360,
  pips: {
    mode: 'values',
    values: [0, 360, 720, 1080, 1440, 1800, 2160],
    density: 360
  },

  range: {
    'min': initialStartMinute,
    'max': initialEndMinute
  }
});

var convertValuesToTime = function(values, handle) {
  var hours = 0,
    minutes = 0;

  if (handle === 0) {
    hours = convertToHour(values[0]);
    minutes = convertToMinute(values[0], hours);
    leftValue.innerHTML = formatHoursAndMinutes(hours, minutes);
    valueleft.innerHTML = values[0];
    return;
  };

  hours = convertToHour(values[1]);
  minutes = convertToMinute(values[1], hours);
  rightValue.innerHTML = formatHoursAndMinutes(hours, minutes);
  valueright.innerHTML = values[1];

};

var convertToHour = function(value) {
  return Math.floor(value / 60);
};
var convertToMinute = function(value, hour) {
  return value - hour * 60;
};
var formatHoursAndMinutes = function(hours, minutes) {
  if (hours.toString().length == 1) hours = '0' + hours;
  if (minutes.toString().length == 1) minutes = '0' + minutes;
  return hours + ':' + minutes;
};

slider.on('update', function(values, handle) {
  convertValuesToTime(values, handle);
});



$('.noUi-value.noUi-value-horizontal.noUi-value-large').each(function() {
  var val = $(this).html();
  val = recountVal(parseInt(val));
  $(this).html(val);
});
  function recountVal(val) {
    switch (val) {
      case 0:
        return '';
        break;
      case 360:
        return '6am';
        break;
      case 720:
        return '12am';
        break;
      case 1080:
        return '6pm';
        break;
      case 1440:
        return '12pm';
        break;
      case 1800:
        return '6am';
        break;
      case 2160:
        return '';
        break;

    }
  }

我想过做类似的事情，但它非常重复且漫长

if (values[1] == 1440) {
    rightValue.innerHTML = "00:00";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "00:15";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "00:30";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "00:45";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "01:00";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "01:15";
  }
  else (values[1] == 1455) {
    rightValue.innerHTML = "01:30";
  }

Answer 1

您正在寻找这样的东西吗？

https://jsfiddle.net/persianturtle/skrb5cg3/19/

var convertValuesToTime = function(values, handle) {
  values = values
    .map(value => Number(value) % 1440)
    .map(value => convertMinutesToHoursAndMinutes(value))
  console.log(values)
};

var convertMinutesToHoursAndMinutes = function(minutes) {
  let hour = Math.floor(minutes / 60)
  let minute = minutes - hour * 60
  return hour + ':' + minute
}