Уроки JavaScript – як отримати поточну дату і час

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

Об’єкт дати Date() в JavaScript

Щоб використовувати цей об’єкт дати, ви повинні спочатку створити його екземпляр. Для цього виконайте наступне:

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

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

Деякі методи об’єкта дати:

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

Припустимо, вам потрібно отримати сьогоднішню дату. Тоді використовуйте наступну конструкцію:

<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

1) Показ різних картинок на сайті в залежності від часу доби

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

Підготуйте дві різні картинки (одну для дня, іншу для ночі).

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

<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, тоді буде показуватися фонова картинка для ночі, в іншому випадку буде показана фонова картинка для світлого часу доби.

2) Додавання на сайт онлайн годинника з допомогою форми

Додати онлайн годинник на сайт за допомогою 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 елементи.