• Главная
  • Карта сайта
Не найдено

Найпростіший таймер зворотного відліку на чистому javascript

У цій статті ми розповімо про те, як написати найпростіший код таймера зворотного відліку.

Для початку опишемо логіку роботи нашого таймера.

  1. Спочатку визначимо функцію ініціалізації таймера, яка буде робити наступне:
    1. Визначає дату закінчення таймера
    2. Розраховує кількість годин, хвилин і секунд до цієї дати
    3. Запускає функцію зворотного відлік
  2. Визначимо функцію, яка буде виводити певним чином час на сторінку
  3. Визначимо функцію, з повідомленням, що буде викликатися при закінченні часу

До всього вище перерахованого так само варто додати моменти, коли повинні викликатися ці функції. Ініціалізацію викликаємо при завантаженні сторінки, функція-висновок таймера на сторінку при ініціалізації і при кожному виклику функції відліку часу.

Створимо документ з 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 () зупиняє відлік таймера.

Наш приклад не розглядає відлік з днями, але розібравшись в коді ви і самі зможете без проблем додати дні. Або можна змінити спосіб відображення.

Доментрацію ви можете подивитися на демо-сторінці:

Завантажити доментрацію:

Завантажити доментрацію:

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью