Несколько недель назад я завершил проект, это был внешний дизайн веб-страницы, которая позволяет вам проверять время во всех часовых поясах. Для этого проекта я использовал 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 в основном
- Создает список всех часовых поясов в раскрывающемся меню.
- В раскрывающемся меню вы можете выбрать часовой пояс по вашему выбору, затем код JS прослушивает выбранный часовой пояс.
- Получает соответствующее смещение UTC.
- Проверьте переход на летнее время.
- Обновляет HTML-документ сведениями о выбранном часовом поясе, включая город и континент. Это отображается в средней панели.
- Рассчитать текущее время в выбранном часовом поясе.
- Обновляет HTML-документ рассчитанным временем.
- Сгенерируйте детали для 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 .