0

Помогите найти решение:

Нужно изменять отступ с лева и ширину в зависимости от значений

есть 2 значения

время в формате 10:00(пример) отвечает за отступ с лева

и второе значение в формате 50 мин(пример) отвечает за ширину блока

так вот у нас есть блок его ширина равна 16-ти часам от 10:00 до 01:00

а в этом блоке список блоков которые имеют эти 2 значения которые должны изменять ширину и отступ от левого края в зависимости от данных которые в них есть для понимание задачи прикрепляю скрин http://joxi.ru/GrqjJyPcQOME9m

я уже пробовал гуглить но нету результатов вот думаю как сделать расчет отступа и ширины)

Как бы 960 вариантов писать не очень)

Заранее благодарен за ответы и понимание)

7
  • Что вы уже сделали и что не получилось? Т.к. по мне - это не вопрос, а уже часть оплачиваемой работы.
    – Kosmos
    16 окт 2018 в 9:19
  • 1
    мне нужны идеи как сделать расчет) мне не нужно чтобы вы писали мне код) 16 окт 2018 в 9:20
  • 3
    Варианты решения - разные. Например. создать массив вида {"item_1": {"start_at":"10:00"; "long": "50"}, "item_2": {"start_at":"11:40"; "long": "120"}}. Дальше бы взял div длинной например в 960px, где 1px=1 минута времени и в цикле перебирал этот массив. Например, item_2.start_at - это 1:40 от начала, если перевести - это 100 минут. Значит, взять div и сделать ему отступ 100px слева, а свойство width присвоить ему значением item_2.long, т.е. 120px.
    – Kosmos
    16 окт 2018 в 9:28
  • хмм то есть берем 10:00 как отправную точку и сравниваем с данными которые получили к примеру 12:30 и разницу(150мин.) переводим в пиксели верно? 16 окт 2018 в 9:34
  • Как вариант - да. Т.к. в задаче не было обусловлено начальной точки. Так, можно взять любое время, за исходную точку, например, полночь (0:00). Это зависит от условий задачи.
    – Kosmos
    16 окт 2018 в 9:36

1 ответ 1

4

Нуууу, думаю так:

  1. Берем промежуток от 10:00 до 01:00. Тоесть 10:00 - 0%, 18:00 - 50% и т.д.

  2. Берем время, к примеру 13:30. Для удобства будем считать в часах (можно и в минутах). 13:30 - это (13:30-10:00) 3 с половиной часа. Отступ слева = 3.5 / 16 = 0.21875 = 21.875%

  3. Берем продолжительность, к примеру 55 минут. В часах это будет 0.917 часов. Приводим опять в относительную ширину - 0.917 / 16 = 0.0573125 = 5.73%

В итоге у нас будет некий блок, у которого position: absolute; left: 21.875%; width: 5.7%; Логочно, у родительського елемента должен быть position: relative как минимум.

Вот пример кода:

function HHMMToFloat(s) {
  s = s.split(":");
  return parseInt(s[0]) + parseInt(s[1]) / 60;
}

var START = HHMMToFloat("10:00");
var END = 24 + HHMMToFloat("01:00");
var FULL = END - START + 1;

function getElementSizes(time, duration) {
  time = HHMMToFloat(time) - START;
  if (time < 0) time += 24;
  duration = HHMMToFloat(duration);

  var left = time / FULL * 100;
  var width = duration / FULL * 100;

  return `position: absolute; left: ${left}%; width: ${width}%;`;
}

console.log(getElementSizes("13:30", "00:55"))
console.log(getElementSizes("00:00", "01:00"))
console.log(getElementSizes("10:00", "16:00"))

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.