Часы в браузере на Moment.js: простое руководство

Решение демонстрирует создание приложения «Часы» в браузере с использованием библиотеки Moment.js без модулей и ES6-синтаксиса.

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

  1. Создайте папку MKadir_clock.
  2. Откройте командную строку, перейдите в эту папку: cd MKadir_clock.
  3. Инициализируйте проект npm: npm init -y.
  4. Установите 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-синтаксиса. Это пример альтернативного подхода к работе с внешними библиотеками в условиях ограниченной поддержки современных модульных систем.

Что будем искать? Например,программа