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

 

 

Share

Последние посты

Обзор технологии виртуальной АТС и ее преимуществ для бизнеса

При быстро сменяющихся технологиях современного делового общения, нужно всегда быть впереди, — и это уже… Читать далее

29/03/2024

Антуан де Сент-Экзюпери

Никогда не теряй терпения — это последний ключ, отпирающий двери Антуан де Сент-Экзюпери   Читать далее

28/03/2024

Сомерсет Моэм

Когда вы станете старше, вы поймете, что в мире можно хоть как-нибудь жить только при… Читать далее

27/03/2024

Михаил Грушевский

Все учатся своему родному языку, а наша беда такова, что нужно учить его больше, чем… Читать далее

26/03/2024

ТОП-5 надежных покерных обменников

Профессиональный покер – это многочисленные турниры и крупные суммы, что требует правильной настройки финансовых инструментов.… Читать далее

25/03/2024

Гай Юлий Цезарь

Все вокруг стремятся истребить врагов, но не объединиться с друзьями Гай Юлий Цезарь   Читать далее

24/03/2024