Как получить дату и время в JavaScript?

Популярный вопрос…

Google: Как получить дату и время в JavaScript?

Если это если вы, то вам повезло! В JavaScript есть объект Date, который представляет отдельный момент времени в независимом от платформы формате. Этот объект содержит Number, который представляет миллисекунды с 1 января 1970 года по всемирному координированному времени.

Мы можем проверить, как это будет выглядеть, вызвав Date с now():

Спасибо за чтение! Комментируйте, делитесь и включите значок уведомления, чтобы узнать больше!

Подождите, очевидно, мы еще не там!

Date имеют доступ к нескольким методам для получения даты в различных форматах. На первый взгляд, количество миллисекунд, прошедших с 00:00:00 UTC 1 января 1970 года, не так уж полезно для создания даты отображения. Однако важно отметить, что большинство функций выводят дату и время в формате всемирного координированного времени (UTC), в то время как устройство пользователя предоставляет местное время. Что подводит нас к вопросу...

Как создать собственное отображение даты?

Во-первых, давайте кое-что проясним. Большинство руководств слишком много думают о том, как это сделать. Сегодня в рамках этой серии мы сделаем первый шаг и создадим простое, но эффективное с точки зрения кода отображение времени, чтобы понять строительные блоки и основы объекта JavaScript Date.

Шаг 1: Установка критериев

Вызов Date.now() дает нам количество миллисекунд, прошедших с 00:00:00 UTC 1 января 1970 года. Однако, чтобы получить отображение времени работы (как работают обычные часы), мы должны быть в состоянии сделать и установить следующие критерии: i) как мы форматируем em> Date.now() для получения удобочитаемых данных и ii) как часто мы обновляем отображение времени.

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

Шаг 2. Форматирование Date.now()

Несмотря на то, что объект Date имеет несколько методов для выполнения этой задачи, мы выберем объект Intl JavaScript, который также обеспечивает стандартизированное форматирование даты и времени с учетом языка. Давайте посмотрим, как он форматирует наши текущие миллисекунды, записывая результат в консоль.

Обратите внимание, что синтаксис конструктора Intl.DateTimeFormat() дает нам возможность передать несколько разных локалей и опций, чтобы по существу извлечь из Date.now() нужные нам данные. В качестве альтернативы мы могли бы определить параметры параметр независимо, чтобы получить более детальные результаты.

Шаг 3: Обновление времени

На самом деле не существует единого подхода к обновлению времени. Среди популярных вариантов: setInterval() и setTimeout(), я бы рекомендовал использовать первый, а не второй из-за их рекурсивных тайм-аутов. Разница может показаться незначительной, но setInterval() учитывает время, затрачиваемое на выполнение кода, который вы хотите запустить, в отличие от setTimeout(), которое делает прямо противоположное.

Допустим, вы решили отображать время каждую секунду (1000 миллисекунд), а ваш код выполняется за 50 миллисекунд — вот что в итоге произойдет с каждым из этих двух вариантов:

  • setInterval() — будет выполнять ваш код каждые 1000 миллисекунд
  • setTimeout() — будет выполнять ваш код каждые 950 миллисекунд

Таким образом, если вы выберете setTimeout() и гипотетически выполнение вашего кода всегда будет занимать 50 миллисекунд, через минуту ваше время будет на 3 секунды меньше. Через час это будет 3 минуты, что не так точно, как хотелось бы. Использование метода setInterval() так же просто, как передача в качестве первого параметра кода для выполнения, а в качестве второго параметра задержка времени в миллисекундах. setInterval(code, [delay]).

Последние мысли

Поиграйте с этим. Не стесняйтесь использовать несколько различных параметров option в Intl.DateTimeFormat() для отображения даты и времени любым удобным для вас способом. Также имейте в виду, что код, показанный выше, выполняется в консоли. Если вы замените console.log функции timeGenerator на return, вы сможете передать данные объекту DOM, выбрав узел в timeDisplay IIFE. Вот как это будет выглядеть:

Спасибо за внимание!
Codepen: Объект даты

Свяжитесь с нами:
Whatsapp
[email protected]
Instagram