Уроки 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

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

Авраам Линкольн

Мы не поможем людям, делая за них то, что они могли бы сделать сами Авраам… Читать далее

15/03/2024

Как хранить кофе, чтобы он не терял вкус и аромат

Вкус приготовленного напитка зависит не только от сорта кофе, способа и степени прожарки, помола зерен,… Читать далее

11/03/2024

Габриэль Гарсиа Маркес

Возраст — это не то, сколько тебе лет, а то, — как ты их чувствуешь… Читать далее

10/03/2024

Краткое описание лицензий с открытым исходным кодом

Если вы создаете программное обеспечение, которым хотите поделиться, или используете программный продукт, который хотите модифицировать,… Читать далее

09/03/2024

Нил Гейман

Люди думают, что будут счастливы, если переедут в другое место, а потом оказывается: куда бы… Читать далее

20/02/2024

Уроки JavaScript — как начать работать с объектами

Объекты являются одной из самых важных и мощных функций JavaScript, и во многих встроенных функциях… Читать далее

17/02/2024