Руководство по созданию часов в браузере с использованием только ванильного JavaScript и библиотеки Moment.js.
Один из способов получить хорошее представление о JavaScript — создавать проекты.
В сегодняшнем посте мы создадим работающие часы только с использованием ванильного JavaScript и библиотеки Moment.js.
Давайте приступим непосредственно к созданию наших полнофункциональных часов прямо в браузере.
Добавляем наш HTML
Прежде чем мы сможем начать добавлять JavaScript для создания наших часов, мы должны сначала добавить HTML-разметку.
Эта разметка будет действовать как пользовательский интерфейс наших часов и позволит нам манипулировать некоторыми элементами DOM, когда мы хотим показать текущее время.
Код приведен ниже:
Добавление JavaScript
Теперь, когда у нас есть HTML, пришло время добавить немного JavaScript.
Первое, что нам нужно сделать, это получить ссылку на элемент H1, который мы добавили ранее.
Это позволит нам изменить текст в нашем элементе H1 и, в свою очередь, отобразить текущее время.
Мы добьемся этого, используя функцию document.getElementByID и передав ей ссылку на идентификатор H1 «текущего времени».
После того, как мы получим ссылку на указанный тег H1, мы будем использовать innerHTML, чтобы изменить текст, отображаемый внутри, чтобы показать текущее время.
Время будет отображаться с помощью функции Moment.js format().
Код для этого приведен ниже:
И если все прошло хорошо, вы должны увидеть это на своей веб-странице:
Примечание. Если у вас возникли проблемы с использованием Moment.js, вы можете использовать CDN по этой ссылке и импортировать его в тег скрипта перед файлом script.js
Обновление часов каждую секунду
Большой! Мы почти закончили.
Единственное, что нам нужно сделать, это обновлять время каждую секунду, чтобы наши часы показывали текущее время, а не только то время, которое было при первой инициализации страницы.
Мы достигнем этого, используя метод JavaScript setInterval() для запуска нашего кода JavaScript перед каждой секундой.
Код для этого приведен ниже:
Примечание. Функция SetInterval занимает не миллисекунды, поэтому 1000 соответствует 1 секунде. Подробнее об этом можно прочитать в статье MDN по ссылке здесь.
Завершение наших часов
Если вы выполнили шаги, описанные выше, у вас должны быть рабочие часы, как показано ниже:
Если вы все еще теряетесь, вы можете просмотреть завершенный код по этой ссылке CodeSandbox здесь.
Необязательно: добавление пользовательских стилей
Теперь мы завершили цифровые часы, используя чисто ванильный JavaScript!
Не знаю, как вы, а я фанат темных тем. Приведенный ниже CSS изменяет наш код на темную тему:
Примечание. После создания стилей не забудьте добавить их на свой веб-сайт либо с помощью тега ‹link›, либо импортировав его в файл JavaScript. Если вы не знаете, как добавить CSS на веб-страницу, вы можете выполнить шаги, указанные в этой статье здесь.
Заключение
Спасибо, что добрались до конца моей статьи «Как создать навигатор стека в React Navigation». Надеюсь у тебя хороший день.
Если вы новичок в Medium, вы можете присоединиться по этой ссылке здесь
И вот мое дальнейшее чтение:
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.
