Решение демонстрирует создание приложения «Часы» в браузере с использованием библиотеки Moment.js без модулей и ES6-синтаксиса.
Начало работы
- Создайте папку MKadir_clock.
- Откройте командную строку, перейдите в эту папку: cd MKadir_clock.
- Инициализируйте проект npm: npm init -y.
- Установите Moment.js: npm install moment.
В результате будет создан файл package.json с информацией о проекте и зависимостях.
Создание файлов проекта
Создайте файлы:
- index.html — основной HTML-файл.
- src/index.js — JavaScript-файл с логикой.
- src/style.css — CSS-файл для стилизации.
Структура index.html
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
<link rel="stylesheet" type="text/css" href="src/style.css">
</head>
<body>
<h1 id="clock">Hello</h1>
<script src="src/index.js"></script>
</body>
</html>
Стиль в style.css
h1 {
font-size: 150px;
text-align: center;
padding: 50px;
color: lightseagreen;
}
Использование Moment.js
Moment.js используется путем встраивания его функциональности в index.js. Функция Moment.js добавляет свойство moment к глобальному объекту window. Это позволяет вызывать функцию moment() напрямую.
// Код из moment.js (вставленный в index.js) ...
После встраивания, Moment.js используется так:
const time = moment();
console.log(time); // Выводит текущее время и дату
console.log(time.format('LTS')); // Выводит отформатированное время
Функционал отображения и обновления времени
В index.js определены функции displayTime и updateTime:
- displayTime получает элемент h1 с и устанавливает его содержимое, используя отформатированное время от Moment.js.
- updateTime вызывает displayTime каждые 1000 мс (1 секунда) с помощью setTimeout для постоянного обновления.
const displayTime = () => {
const l = document.getElementById('clock');
l.innerHTML = moment().format('LTS');
};
const updateTime = () => {
displayTime();
setTimeout(updateTime, 1000);
};
updateTime();
Решение демонстрирует создание часов в браузере путем интеграции Moment.js в код JavaScript без использования модулей и ES6-синтаксиса. Это пример альтернативного подхода к работе с внешними библиотеками в условиях ограниченной поддержки современных модульных систем.