Categories: JavaScriptУроки программирования

Уроки 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 элементы.