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

 

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 елементи.

 

 

Tags: JavaScript

Recent Posts

Правильний вибір якісних гральних карт

Відомо, що перші гральні карти були винайдені династією Тан в Китаї ще в 9 столітті.… Read More

15/11/2020

Як знайти нову роботу – кращі тактики

Давно минули ті часи, коли люди отримували роботу одразу ж після закінчення навчання, і залишалися… Read More

13/11/2020

Ліцензування Zoom в Україні – тарифи і ціни

Самоізоляція 2020 року поставила людей в досить суворі умови – незважаючи на вимушені карантинні заходи,… Read More

10/11/2020

Десятка найбільш хокейних міст України

Чи є в Україні хокей? Багато шанувальників цього виду спорту асоціюють гру з шайбою на… Read More

09/11/2020

Переваги б/в ноутбуків та критерії вибору техніки

Сучасний ринок комп'ютерної техніки постійно оновлюється, щорічно пропонуючи користувачам нові і більш потужні моделі ПК… Read More

03/11/2020

Найкращі водоспади світу (частина 1)

Водоспад – це одне з найбільш хвилюючих і найкрасивіших творінь матінки-природи у світі. По всьому… Read More

31/10/2020