Что касается аналоговых часов, в Javascript есть несколько способов.
Математическая теория заключается в вычислении степени в зависимости от того, на сколько частей вы хотите разделить.
Потому что круг 360 градусов. Базовая – одна минута равна 60 секундам, один час равен 60 минутам.
Во-первых, нам нужны часы на странице, поэтому есть несколько способов.
1.холст
По часам W3C понятно, что отрисовка холста — это хорошее визуальное разрешение. с помощью getContext(‘2d’) и нарисуй циферблат, число и время.
Рисунок на холсте использует линию, штрих и заливку.
например, drawFace(), круг с математическим радиусом, потому что круг имеет радиус 2PI*радиус, и заполнить его цветом внутри.
2.svg
есть способ использовать svg в Html.
Как и код, ширину и высоту можно задать в html с помощью svg.
Демо подробнее здесь
3.html
прям все в html задавать. может код не очень приличный, но для новичка понятный.
ДЕМО Гитхаб
Эта демонстрация показывает 24 часа
макет каждого номера и руки в html. И попробуйте манипулировать в JS.
Во-вторых, когда мы установим циферблат, пора дать ему двигаться.
Часы двигаются каждую секунду с помощью setInterval(). Все три демо одинаковы.
каждые 1000 миллисекунд вызывать функцию.
В-третьих, что может делать функция? мы должны получить текущее время.
Все три используют newDate() для получения времени.
Наконец, как рассчитать время.
Из демонстрации W3C рассчитайте положение рук, а затем нарисуйте его.
каждая секунда составляет 6 градусов, потому что круг равен 360 и 60 секунд в минуту, 60 минут в час. ПИ 180 градусов.
Вторая демонстрация svg больше связана с числовым вычислением.
но смысл тот же ,но не связанный ИП
Последний основан на соотношении
В целом, часы полностью оправдывают атрибуты вращения.
обновлять DOM каждую секунду
