Если вы пишете блог или владеете веб-сайтом, вам всегда будет интересно сделать свою веб-страницу более интерактивной и привлекательной. Вы будете использовать лучшие шаблоны, яркие цвета, интерактивные инструменты и различные дополнения.
Хороший вариант - разместить аналоговые часы на своей веб-странице. Подвижные стрелки часов, несомненно, добавят эстетической ценности вашей веб-странице.
Начало работы:
Ниже приведены файлы, которые вы должны использовать в качестве строительных блоков для создания аналоговых часов:
- HTML-документ, содержащий SVG часов.
2. CSS-файл, содержащий детали стиля SVG часов.
Создание файла JavaScript:
Прежде чем создавать сценарий, давайте посмотрим, как мы можем заставить стрелки часов двигаться, просто используя CSS.
Для этого откройте HTML-файл в браузере, а также консоль браузера. (Я использую Google Chrome).
Исходные часы теперь выглядят так:
Теперь в консоли наведите указатель мыши на идентификатор минуты. Добавьте следующее заявление:
transform: rotate(60deg)
Однако мы не можем продолжать выполнять эту процедуру вручную. Следовательно, мы создадим JavaScript, который выполнит эту процедуру за нас автоматически. Ниже приведены шаги, чтобы сделать то же самое.
Шаг 1:
Объявите константы, которые мы никогда не изменим.
# час, # минута и # секунда - это идентификатор цели для часовой, минутной и секундной стрелок в SVG соответственно. Эти идентификаторы SVG можно увидеть в файле HTML, строки 21, 25 и 29.
const HOURHAND = document.querySelector(“#hour”); const MINUTEHAND = document.querySelector(“#minute”); const SECONDHAND = document.querySelector(“#second”);
Шаг 2:
Используя объект Date (), получите значение текущего часа, минуты и секунды.
var date = new Date(); let hr = date.getHours(); let min = date.getMinutes(); let sec = date.getSeconds();
(Необязательно) Чтобы проверить значения этих переменных, воспользуемся следующим оператором и проверим вывод в окне браузера.
console.log(“Hour: “+hr+ “ Minute: “+ min + “ Second: “+ sec);
Шаг 3:
Теперь, когда у нас есть значения времени, нам нужно перемещать стрелки часов на основе этих значений.
Учитывая некоторую величину времени, положение стрелок в аналоговых часах можно оценить с помощью некоторых основных математических формул. Давайте использовать их напрямую.
let hrPosition = hr*360/12 + ((min * 360/60)/12) ; let minPosition = (min * 360/60) + (sec* 360/60)/60; let secPosition = sec * 360/60;
Шаг 4:
Теперь, когда у нас есть позиции каждой стрелки, давайте переместим часы, используя следующие инструкции.
HOURHAND.style.transform = “rotate(“ + hrPosition + “deg)”; MINUTEHAND.style.transform = “rotate(“ + minPosition + “deg)”; SECONDHAND.style.transform = “rotate(“ + secPosition + “deg)”;
Преобразование стиля выполняется для идентификаторов, хранящихся в постоянных переменных.
Шаг 5:
Мы еще не закончили. Скрипт, который мы сделали до сих пор, просто представляет нам статические часы. Они по-прежнему не двигаются, как обычные аналоговые настенные часы, как нам хотелось бы. Чтобы получить желаемый результат, давайте поместим сценарий, который мы создали до сих пор, в функцию и каждую секунду вызываем эту функцию для выполнения. Это делается следующим образом:
function run_the_clock(){ var date = new Date(); let hr = date.getHours(); let min = date.getMinutes(); let sec = date.getSeconds(); console.log(“Hour: “+hr+ “ Minute: “+ min + “ Second: “+ sec); let hrPosition = hr*360/12 + ((min * 360/60)/12) ; let minPosition = (min * 360/60) + (sec* 360/60)/60; let secPosition = sec * 360/60; //Then we need to apply these numbers as degrees in the inline styles for transform on each of the objects. HOURHAND.style.transform = “rotate(“ + hrPosition + “deg)”; MINUTEHAND.style.transform = “rotate(“ + minPosition + “deg)”; SECONDHAND.style.transform = “rotate(“ + secPosition + “deg)”; }
После создания функции позвольте вызывать ее через каждую секунду (1000 мс) с помощью setInterval.
var interval = setInterval(run_the_clock, 1000);
Как мы и ожидали, вывод на экран браузера - это аналоговые часы.
Последний сценарий:
Для большей эстетической ценности вы также можете поиграть с различными цветами и шириной кружков на аналоговых часах.