В этой статье мы расскажем о том, как написать простейший код таймера обратного отсчёта.
Для начала опишем логику работы нашего таймера.
- Вначале определим функцию инициализации таймера, которая будет делать следующее:
- Определяет дату окончания таймера
- Рассчитывает количество часов, минут и секунд до этой даты
- Запускает функцию обратного отсчёт
- Определим функцию, которая будет выводить определенным образом время на страницу
- Определим функцию, с сообщением, которая будет вызываться при истечении времени
Ко всему выше перечисленному так же стоит добавить моменты, когда должны вызываться эти функции. Инициализацию вызываем при загрузке страницы, функция-вывод таймера на страницу при инициализации и при каждом вызове функции отсчета времени.
Создадим документ с 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() останавливает отсчет таймера.
Наш пример не рассматривает отсчет с днями, но разобравшись в коде вы и сами сможете без проблем добавить дни. Или можно изменить способ отображения.
Доментрацию вы можете посмотреть на демо-странице:

Скачать доментрацию:

Комментарии
Засада!!!
Не могу разобраться с кодом таймера.
1. Нужно только 60 секунд с циклом. setInterval()
2. Настройки для вывода разного текста на определенном этапе работы таймера.
Пример: 60-59-58--...--31 сек.(висит одна надпись).30------10(другая надпись) и т.д.
Ведь время зависание надписи каждую "мs" или "s" тоже имеет значение?
С css проблем нет,а тут завис...
RSS лента комментариев этой записи