Отступ в зависимости от времени

204

19 февраля 2019, 11:40

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

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

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

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

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

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

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

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

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

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

Answer 1

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

Берем промежуток от 10:00 до 01:00. Тоесть 10:00 - 0%, 18:00 - 50% и т.д.
Берем время, к примеру 13:30. Для удобства будем считать в часах (можно и в минутах). 13:30 - это (13:30-10:00) 3 с половиной часа. Отступ слева = 3.5 / 16 = 0.21875 = 21.875%
Берем продолжительность, к примеру 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"))