Сайт: Ссылка

Итак, я сделал часы. Сначала я пытался сделать их через React, но не смог найти способ создать бесконечный цикл, который запускался бы после начального рендеринга страницы — React выдавал сообщения об ошибках в консоли при использовании useEffect и даже не позволял загрузить страницу при использовании рекурсивной функции.

А я использовал рекурсивную функцию в обычном HTML проекте. К счастью, она работала, и было несложно закодировать стрелки часов. В нескольких словах, рекурсивная функция просто проверяла каждые 1/10 секунды текущее системное время и устанавливала угол для стрелок с помощью простой формулы:

angle = 360 / marks_num * time_value

где marks_num — количество отметок текущей стрелки (для часов — 12, для минут и секунд — 60).

Мы также должны сделать так, чтобы стрелки двигались плавно (опционально для секунд), поэтому мы также добавляем текущее состояние нижних временных измерений.
Для часов это:

minutes / 60 + seconds / 3600

Для минут это:

seconds  / 60 + milliseconds / 60000

Таким образом, в результате это выглядит следующим образом:

document.querySelector('.h-hand').style.transform = "rotate("+30*(now.getHours()+now.getMinutes()/60+now.getSeconds()/3600)+"deg)"
document.querySelector('.m-hand').style.transform = "rotate("+6*(now.getMinutes()+now.getSeconds()/60+now.getMilliseconds()/60000)+"deg)"
document.querySelector('.s-hand').style.transform = "rotate("+6*(now.getSeconds())+"deg)"

Полный код

GitHub: Ссылка