Несколько недель назад я завершил проект, это был внешний дизайн веб-страницы, которая позволяет вам проверять время во всех часовых поясах. Для этого проекта я использовал Javascript, HTML и CSS.

Вот так выглядит готовый проект.

Ссылка на живой сайт здесь

Репозиторий Github здесь

Требования

  • узел.js
  • пакет стран и часовых поясов

Чтобы установить их, проверьте наличие руководства в файле Readme.md в репозитории Github.

Прежде чем перейти к коду JavaScript, я расскажу о структуре HTML.

СТРУКТУРА HTML

Всю страницу можно разбить на четыре основных раздела, а именно;

  • Фоновое изображение
  • Контейнер

Контейнер

Внутри контейнера у нас есть

  • Заголовок контейнера
  • Контейнер-тело

контейнер — желтый контур

container-header — красный контур

container-body — Синий контур

Контейнер div содержит как заголовок, так и тело контейнера, контейнер больше похож на родительский фрейм с двумя меньшими фреймами внутри.

Заголовок контейнера

В заголовке у нас есть div head-content, в нем находятся элементы внутри заголовка. Внутри него у нас есть теги Label и Select. Тег select формирует выпадающее меню. Выпадающее меню может принимать множество опций внутри него.

<select name="####" id="xxxxx">
     <option> Option 1 </option>
     <option> Option 2</option>
     <option> Option 3</option>
</select>

#### и xxxx можно заменить любой строкой по вашему выбору

В приведенном выше коде показан общий синтаксис использования тега ‹select› для создания интерактивного раскрывающегося меню.

Раскрывающийся список был создан для формирования списка всех часовых поясов, чтобы сделать это вручную с помощью HTML, нам нужно будет создать несколько тегов option внутри тега select.

Это будет выглядеть так

<select name="city-list" id="city-list">
     <option> Africa/Abidjan </option>
     <option> Africa/Algiers</option>
     <option> Africa/Bissau</option>
     ......
</select>

Нам пришлось бы сделать это для более чем 50 часовых поясов, как видите, это займет много времени. Лучшим подходом будет автоматизация всего процесса с помощью JavaScript, мы рассмотрим это позже.

Контейнер-тело

Корпус контейнера имеет внутри три подрамника,

  • панель (левая и правая части)
  • средняя панель

Вы можете видеть, что две панели похожи, они обе имеют одни и те же классы и схожие свойства.

Чтобы расположить подфреймы горизонтально внутри тела контейнера, я сначала установил для свойства display контейнера значение flex. Этот первый шаг позволяет выровнять содержимое внутри него в любом направлении. Чтобы расположить подфреймы внутри него по горизонтали, вам нужно установить для свойства flex-direction значение row;

Панели (левая и правая часть)

Левая и правая панели одинаковы, разница только в их положении внутри контейнера.

На каждой панели у нас есть два меньших фрейма (назовем их таймбоксами). Каждый из этих таймбоксов служит контейнером для другого часового пояса.

Для каждого временного интервала у нас есть фреймы меньшего размера, один для времени,другой для деталей по стране.

детали страны — Синий

время — Фиолетовый

Раздел country-details показывает название города и название континента. В приведенном выше примере Париж — это город, а это неконтинентальная Европа.

Всего для этого проекта я создал 5 тайм-боксов, по два на каждой панели, а затем один побольше посередине. Тот, что посередине, более важен, потому что здесь будет отображаться выбранный часовой пояс из раскрывающегося меню. Остальные 4 поля времени предназначены для отображения времени в любых 4 основных часовых поясах.

КОД ЯВАСКРИПТА

Код JS в основном

  1. Создает список всех часовых поясов в раскрывающемся меню.
  2. В раскрывающемся меню вы можете выбрать часовой пояс по вашему выбору, затем код JS прослушивает выбранный часовой пояс.
  3. Получает соответствующее смещение UTC.
  4. Проверьте переход на летнее время.
  5. Обновляет HTML-документ сведениями о выбранном часовом поясе, включая город и континент. Это отображается в средней панели.
  6. Рассчитать текущее время в выбранном часовом поясе.
  7. Обновляет HTML-документ рассчитанным временем.
  8. Сгенерируйте детали для 4 других основных часовых поясов и обновите их до меньших временных интервалов.

Чтобы сделать все это, я сначала импортировал JS-пакет для стран и часовых поясов, более подробную информацию об использовании можно найти здесь

Шаг 1

Строка 1–4

Я импортировал пакет стран и часовых поясов

Создал отсортированный объект с ключами, соответствующими названиям всех часовых поясов

Создал переменную раскрывающийся список и назначил ее раскрывающемуся меню в заголовке HTML-документа.

Строки 9–13: здесь цикл for создает разные элементы option для каждого часового пояса, что формирует различные кликабельные варианты выбора в раскрывающемся списке.

Шаг 2

Блок кода здесь прослушивает, когда выбран параметр в раскрывающемся меню.

Строка 102: присваивает текстовое значение выбранного параметра переменной selectedTimeZone. Этот выбранный часовой пояс обычно имеет форму "город/континент".

Строка 103:получает все атрибуты для выбранного часового пояса, эти атрибуты могут включать utcOffset, dstOffsetи т. д. Все эти атрибуты присваиваются переменной timeZoneAttr.

Шаг 3–7

Строка 106 вызывает функцию updateTimeBox(). Цель этой функции состоит в том, чтобы

  • Получить смещение UTC
  • Вызовите функцию checkDayLightSaving(), эта функция проверяет, есть ли в выбранном часовом поясе переход на летнее время.
  • На основе ответа функции checkDayLightSaving() функция calcTime() вычисляет время для выбранного часового пояса.
  • Обновляет окно времени с расчетным временем, названием города и континентом.

Строка 107 вызывает функцию genereateSmallTimeZones().Эта функция повторяет шаги 3–5 четыре раза, в каждом случае выбранный часовой пояс будет одним из «Европа/Париж», «Европа/Лондон», « Америка/Нью-Йорк», «Азия/Токио».

Вы можете легко изменить часовой пояс для отображения в 4 меньших временных окнах, изменив элементы в переменной arrayTimeZones .