Задача второго дня для JS30 Уэса Боса — создать часы, используя только JavaScript и CSS. Файл HTML относительно скудный, так как большая часть кода относится к вашей функции для установки даты и стиля ваших часов. Существует пять тегов <div>, созданных с именем класса, соответствующим части часов.
На картинке выше реализованы три тега <div> с именем класса для каждой части стрелки часов. Порядок не обязательно имеет значение, но я заказал его таким образом, чтобы ".hour-hand" всегда было видно над ".minute-hand", а ".second-hand" всегда было видно над обеими руками. Он обернут другим тегом <div> с ".clock-face", который также заключен в последний тег <div>, который является ".clock".
Что мне показалось наиболее интересным, так это то, что при реализации каждой стрелки поворот ее на 90 градусов (поскольку она начинается с направления в сторону, я хотел, чтобы она указывала вверх) приводит к тому, что стрелки каждый раз неправильно выравниваются и заканчиваются на 15 минут раньше их фактического времени, поэтому Я добавил еще 90 градусов, чтобы компенсировать эту проблему. С помощью transition-timing-function секундная стрелка имеет своего рода тик, и вы можете фактически изменить степень эффекта резиновой ленты, который она может иметь, чтобы имитировать тиканье секунд на реальных часах.
Проблема, с которой я столкнулся, заключалась в том, что каждый раз, когда секундная стрелка вращалась вокруг часов, она в конечном итоге касалась краев, и я не понимал, что, чтобы исправить это, вам нужно преобразовать циферблат, чтобы учесть высоту часов. секундная стрелка. Одна вещь, которую я нашел очаровательной, это свойство transform-origin. Поскольку стрелки начинаются в центре, я хотел, чтобы они вращались от своих концов, и transform-origin добился цели. Это позволило мне изменить положение преобразованного элемента! Вот и все, аналоговые часы, сделанные только с помощью JS и CSS. Живое демо можно найти здесь.
