Уроки JavaScript – как получить текущую дату и время

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

 

 

Объект даты Date() в JavaScript

Чтобы использовать этот объект даты, вы должны сначала создать его экземпляр. Для этого выполните следующее:

<script type="text/javascript">  var currentDate = new Date();  console.log(currentDate);  </script>  

 

 

Всякий раз, когда вам нужно создать экземпляр объекта Date(), используйте похожую конструкцию (с использованием ключевого слова new, за которым следует имя объекта). После доступа к объекту даты, вы можете обращаться к нужным методам этого объекта.

 

Некоторые методы объекта даты:

Метод объекта Возвращаемое значение
getDate() возвращает день месяца
getDay() возвращает день недели
getHours() возвращает час (начинается с 0-23)
getMinutes() возвращает минуты
getSeconds() возвращает секунды
getMonth() возвращает месяц (начинается с 0-11)
getFullYear() возвращает текущий год
getTime() возвращает полное время (в немного странном формате)

 

 

Теперь перейдем к практике.

Допустим, вам нужно получить сегодняшнюю дату. Тогда используйте следующую конструкцию:

<script type="text/javascript">  var todayDate = new Date();  var currYear = todayDate.getFullYear();  var currMonth = todayDate.getMonth()+1;  var currDay = todayDate.getDate();  document.write("Сегодняшняя дата: ");  document.write(currDay + "-" + currMonth + "-" + currYear);  </script>  

 



Результат будет следующего формата:

Сегодняшняя дата: 7-4-2019  // завтра результат будет другой, поскольку дата изменится  

 

 

Давайте немного расшифруем приведенный выше код:

  • todayDate – это переменная, в которую записывается экземпляр объекта Date(). Вы можете назвать эту переменную как угодно. После создания экземпляра, эта переменная будет иметь доступ ко всем методам данного объекта. Например, выражение:
var currYear = todayDate.getFullYear();  

означает «Получить текущий год и присвоить его переменной currYear».

  • Мы добавили +1 к переменной месяца (currMonth), поскольку в JavaScript месяцы отсчитываются, начиная с «0», а не с «1».
  • Объект Date() в JavaScript всегда использует значения даты и времени, которые установлены на компьютере текущего пользователя. Таким образом, для разных пользователей будут показываться разные дата/время, в зависимости от того, в каком месте мира он или она находится.

 

 

Практические решения с использованием даты в JavaScript

 

  • Показ разных картинок на сайте в зависимости от времени суток

Обладая вышеуказанными знаниями, вы можете отображать различные картинки на своем сайте в зависимости от текущей даты/времени. Например, вам нужно сменять фоновую картинку (бэкграунд) сайта в зависимости от того, что сейчас за окном – день или ночь.

Подготовьте две разные картинки (одну для дня, другую для ночи).

Теперь добавьте простой скрипт:

<script type="text/javascript">  var currDay = new Date();  var dayTime = currDay.getHours();  if (dayTime <= 21) {   document.write("<img src='day.jpg'>");  } else {   document.write("<img src='night.jpg'>");  }  </script>  

 

Здесь мы проверяем текущее время, если сейчас больше 21:00, тогда будет показываться фоновая картинка для ночи, в противном случае будет показана фоновая картинка для светлого времени суток.

 

 

  • Добавление на сайт онлайн часов с помощью формы

Добавить онлайн часы на сайт с помощью JavaScript и формы довольно просто. Основная концепция заключается в том, чтобы непрерывно записывать данные времени в поле формы каждую 1 секунду, используя обновленное время с компьютера пользователя.

Вы можете скопировать и вставить приведенный ниже код на свой сайт и, при желании, немного поиграться с ним:

<form name="Clock">   <input type="text" size="10" name="timer">  </form>  <script type="text/javascript">  function showCurrentTime(){   var currDate = new Date();   var hours = currDate.getHours();   var minutes = currDate.getMinutes();   var seconds = currDate.getSeconds();   if (minutes <= 9) {    minutes = "0" + minutes;   }   if (seconds <= 9) {    seconds = "0" + seconds;   }   document.Clock.timer.value = hours + ":" + minutes + ":" + seconds;   setTimeout("showCurrentTime()", 1000);  }  showCurrentTime();  </script>  

 

 

Некоторые пояснения кода:

  • Если минуты/секунды меньше или равны 9, мы добавляем перед цифрой времени 0, чтобы формат секунд и минут был в двухзначном виде с ведущим нулем.
  • В рассмотренном коде основной частью является метод JavaScript setTimeout, который запускает функцию showCurrentTime() каждую секунду. Данный метод обновляет функцию каждую секунду, что создает иллюзию, что часы действительно тикают.
  • Помните, формат часов в JavaScript от 0 до 23, а не от 1 до 24!
  • Важно! Не используйте форму на своем реальном сайте для показа часов. Такая реализация имеет свои преимущества, но в данном уроке она используется только лишь для демонстрационных целей. Используйте для этого другие HTML элементы.