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

 

 

Recent Posts

Френк МакКінні Кін Хаббард

Є два способи командувати жінкою, але ніхто їх не знає Френк МакКінні Кін Хаббард  

17 години ago

Роберт Шеклі

Найгірше, що в інформаційній війні завжди програє той, хто говорить правду, адже він обмежений правдою,…

2 дні ago

Річард Бах

Якщо тобі колись захочеться знайти таку людину, яка зможе здолати будь-яку, навіть найважчу біду і…

3 дні ago

Що таке CDN і чому він потрібен вашому сайту | огляд в 2025

Уявіть, що ви відкрили піцерію у Києві. Ваша піца настільки смачна, що її хочуть замовити…

7 днів ago

Що таке Varnish Cache і як він прискорить ваш сайт (початківцям)

Уявіть, що ваш веб-сайт — це велика бібліотека, а ваш сервер — це головний бібліотекар.…

1 тиждень ago

Що таке WAF (Web Application Firewall) і чому без нього сайт у небезпеці

Уявіть, що ваш офіс захищений надійною охоронною системою: у вас є міцні двері, сигналізація та…

1 тиждень ago