Как создать цифровые часы с помощью Moment.js

Один из верных способов освоить JavaScript — разрабатывать проекты в его экосреде. Этот пост поможет вам создать рабочие часы с использованием Vanilla JavaScript и библиотеки Moment.js.

Добавление HTML

Перед непосредственным использованием JavaScript в разработке часов вам понадобится добавить разметку HTML.

Эта разметка будет воздействовать на пользовательский интерфейс часов и позволит вам манипулировать элементами DOM (document object model — объектная модель документа), от которых зависит отображение текущего времени.

Код приведен ниже:

Добавление JavaScript

Теперь, после добавления HTML, пришло время использовать JavaScript. Первое, что нужно сделать, — получить ссылку на элемент H1, добавленный ранее, что позволит изменить текст в элементе H1 и отобразить текущее время. Для этого воспользуемся функцией document.getElementById и передадим ей ссылку на идентификатор H1 current-time (текущее время).

После получения ссылки на тег H1 применим innerHTML, чтобы изменить текст внутри тега для показа текущего времени.

Отобразить время поможет функция Moment.js format().

Код:

Если все прошло успешно, вы увидите на веб-странице это:

Примечание: если у вас возникнут проблемы с Moment.js, можете использовать CDN по ссылке и импортировать его в тег script перед файлом script.js.

Как заставить часы обновляться каждую секунду

Единственное, что осталось сделать, — добиться того, чтобы время обновлялось каждую секунду. Тогда часы будут показывать текущее время, а не то, которое было при инициализации страницы.

Метод setInterval() позволит запускать код JavaScript каждую секунду:

Примечание: функция SetInterval настроена на миллисекунды, а не на секунды, поэтому 1000 приравнивается к 1 секунде. Подробнее об этом можете прочитать в статье MDN по ссылке.

Завершение работы с часами

Если вы выполнили все вышеописанные шаги, у вас должны получиться работающие часы, как показано ниже:

Если что-то пошло не так, можете просмотреть готовый код на CodeSandbox по ссылке.

Дополнение: добавление пользовательских стилей

Итак, вы создали цифровые часы, используя исключительно vanilla JavaScript! Не знаю, как вы, но лично я поклонник темных тем. Приведенные ниже CSS-элементы зададут в коде темную цветовую палитру:

Добавляйте свои любимые цвета, чтобы создать проект в соответствии с личными предпочтениями!