Если вы пишете блог или владеете веб-сайтом, вам всегда будет интересно сделать свою веб-страницу более интерактивной и привлекательной. Вы будете использовать лучшие шаблоны, яркие цвета, интерактивные инструменты и различные дополнения.

Хороший вариант - разместить аналоговые часы на своей веб-странице. Подвижные стрелки часов, несомненно, добавят эстетической ценности вашей веб-странице.

Начало работы:

Ниже приведены файлы, которые вы должны использовать в качестве строительных блоков для создания аналоговых часов:

  1. 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);

Как мы и ожидали, вывод на экран браузера - это аналоговые часы.

Последний сценарий:

Для большей эстетической ценности вы также можете поиграть с различными цветами и шириной кружков на аналоговых часах.