Как создать timeline для сайта?

Question

[Михаил Завалко]

Всем привет, вопрос следующего характера. По дизайну на сайте должно быть что то вроде часов времени работы автосервиса, вообще пока нет идеи как это делать, по задумке должна быть привязка к московскому времени и автомобиль с точкой и временем должен перемещаться по линии циклично каждый день. Может есть кто уже делал подобное?

Comments

[Сергей Тутуков]

что-то типо этого должно быть:
https://codepen.io/STutukov/pen/LLVVxo?editors=1010
коррекцию по минутам, стили и все остальное сам сделаешь

[Михаил Завалко]

Сергей Тутуков: блин я так понял серый квадрат должен двигаться, но он стоит на месте.

[Сергей Тутуков]

Mixa_007: напиши внутри функции

setTimeout(function(){
   TimeLine(currectTime, timeFrom, timeTo);
},интервал);

Answer 1

[Оптимус Пьян]

Время забирать с сервера 12 часов = 100% рассчитываете час, соотносите с процентами, выводите левый отступ с помощью podition absolute или т.п. фигни.
На JS все данные исходные просто с сервера в скрипт выплёвываете, скрипт их подбирает и двигает блок каждую минуту

Comments

[Михаил Завалко]

Отлично, только в JS я пока полный профан)) Сам написать такое точно не смогу. Может есть какая библиотека под мои нужды?

[Алексей Скляров]

Mixa_007: почему вы думаете что для написания 4х строчек кода будет библиотека, в которой вы, без знания языка, обязательно разберетесь?

читайте как на js получить текущее время и дальше по мере поступления задач.

Answer 2

[Дмитрий Дарт]

Какие библиотеки, это простейшая задача а без знания JS вы и библиотеки не настроите всё равно.
Вот вам образец, я писал когда учил JS https://jsfiddle.net/ut26sh3w/2/ вместо квадрата ставите машину с точкой меняете скорость движения и всё.
Ваша задача прекрасный повод выучить JS

Comments

[Михаил Завалко]

Насчет учить JS - полностью согласен, пора бы уже) Спасибо, сейчас буду курить ваш пример.