Найпростіший таймер зворотного відліку на чистому javascript
У цій статті ми розповімо про те, як написати найпростіший код таймера зворотного відліку.
Для початку опишемо логіку роботи нашого таймера.
- Спочатку визначимо функцію ініціалізації таймера, яка буде робити наступне:
- Визначає дату закінчення таймера
- Розраховує кількість годин, хвилин і секунд до цієї дати
- Запускає функцію зворотного відлік
- Визначимо функцію, яка буде виводити певним чином час на сторінку
- Визначимо функцію, з повідомленням, що буде викликатися при закінченні часу
До всього вище перерахованого так само варто додати моменти, коли повинні викликатися ці функції. Ініціалізацію викликаємо при завантаженні сторінки, функція-висновок таймера на сторінку при ініціалізації і при кожному виклику функції відліку часу.
Створимо документ з js-кодом - timer.js і додамо в нього наступний код:
window.onload = function () // чекаємо завантаження сторінки {initializeTimer (); // викликаємо функцію ініціалізації таймера} function initializeTimer () {var endDate = new Date (2020,9,31,8,31); // отримуємо дату закінчення таймера var currentDate = new Date (); // отримуємо поточну дату var seconds = (endDate-currentDate) / 1000; // визначаємо кількість секунд до закінчення таймера if (seconds> 0) {// перевірка - минула дата зворотного відліку var minutes = seconds / 60; // визначаємо кількість хвилин до закінчення таймера var hours = minutes / 60; // визначаємо кількість годин до закінчення таймера minutes = (hours - Math.floor (hours)) * 60; // підраховуємо кількість хвилин, що залишилися в поточному годині hours = Math.floor (hours); // ціле кількість годин до закінчення таймера seconds = Math.floor ((minutes - Math.floor (minutes)) * 60); // підраховуємо кількість залишилися секунд в поточній хвилині minutes = Math.floor (minutes); // округляємо до цілого кількість хвилин, що залишилися в поточному годині setTimePage (hours, minutes, seconds); // виставляємо початкові значення таймера function secOut () {if (seconds == 0) {// якщо секунду закінчилися то if (minutes == 0) {// якщо хвилини закінчилися то if (hours == 0) {// якщо годинник закінчилися то showMessage (timerId); // виводимо повідомлення про закінчення відліку} else {hours--; // зменшуємо кількість годин minutes = 59; // оновлюємо хвилини seconds = 59; // оновлюємо секунди}} else {minutes--; // зменшуємо кількість хвилин seconds = 59; // оновлюємо секунди}} else {seconds--; // зменшуємо кількість секунд} setTimePage (hours, minutes, seconds); // оновлюємо значення таймера на сторінці} timerId = setInterval (secOut 1000) // встановлюємо виклик функції через кожну секунду} else {alert ( "Встановлена дата вже пройшла"); }} Function setTimePage (h, m, s) {// функція виставлення таймера на сторінці var element = document.getElementById ( "timer"); // знаходимо елемент з id = timer element.innerHTML = "Годинник:" + h + "<br> Хвилини:" + m + "<br> Секунди:" + s; // виставляємо нові значення таймеру на сторінці} function showMessage (timerId) {// функція, що викликається по закінченню часу alert ( "Час минув!"); clearInterval (timerId); // зупиняємо виклик функції через кожну секунду}
Варто відзначити деякі моменти, по мимо коментарів.
Наприклад new Date () задаємо дату, без параметрів - задається поточна дата. А параметри задають конкретну дату, в форматі "рік, місяць, день, година, хвилина, секунда", не обов'язково вказувати параметри справа наліво, тоді вони будуть прийняті за 0. Тобто можна вказати тільки рік або рік, місяць і день. Місяць задається починаючи від 0 (0 - січень), а наприклад 11 - грудень.
Math.floor () округлює до цілого числа.
setInterval () задає повторювану функцію, в нашому випадку функцію зворотного відліку. clearInterval () зупиняє відлік таймера.
Наш приклад не розглядає відлік з днями, але розібравшись в коді ви і самі зможете без проблем додати дні. Або можна змінити спосіб відображення.
Доментрацію ви можете подивитися на демо-сторінці:
Завантажити доментрацію: