Html код счетчик дней

Простой таймер обратного отсчета на Javascript

Скрываем таймер после окончания времени и выводим сообщение, что время истекло

Данное решение предложил в комментариях Игорь.

Добавляем в HTML блок с сообщением

Добавляем такие стили в CSS:

.deadline-message < display: none; font-size: 24px; font-style: italic; >.visible < display: block; >.hidden

В скрипте меняем функцию инициализации таймера function initializeClock(id, endtime) <. >, остальное оставляем так же, как было:

function initializeClock(id, endtime) < var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() < var t = getTimeRemaining(endtime); if (t.total daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); > updateClock(); var timeinterval = setInterval(updateClock, 1000); >

В данной функции изменилось то, что при истечении времени таймера, на сам таймер добавляется класс .hidden (скрывает таймер), а на сообщение об окончании времени вешается класс .visible (отображает сообщение), а так же прекращаем выполнение функции вызовом метода clearInterval(timeinterval); . А вывод единиц времени помещен после проверки истекло время или нет.

Рабочий пример Таймера обратного отсчета с выводом сообщения об истечении времени

Нажмите кнопку Rerun, чтобы убедиться, что все работает как надо.

Таймер обратного отсчета времени с рестартом

Суть таймера в том, что при окончании времени таймер не останавливается, не выводится никакое сообщение, а просто начинается новый отсчет:

Таймер установлен на 5 секунд и при окончании времени будет перезапущен еще на 5 секунд

function getTimeRemaining(endtime) < var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return < total: t, days: days, hours: hours, minutes: minutes, seconds: seconds >; > function initializeClock(id, endtime) < var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() < var t = getTimeRemaining(endtime); if (t.total daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); > updateClock(); var timeinterval = setInterval(updateClock, 1000); > var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline);

Разница в JS-коде между вариантом с выводом сообщения об окончании времени только в замене этого кода

Обратите внимание, что при обнулении таймера нам нужно задать новый дедлайн, и он может быть совсем другим, чем первоначальный, который указан на предпоследней строке кода:

var deadline = new Date(Date.parse(new Date()) + 5 * 1000);

Рабочий пример таймера обратного отсчета времени с рестартом

Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…

В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…

Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких…

Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок,…

Источник

Таймер обратного отсчета для сайта

Мы разработали МеgaTimer, новый бесплатный таймер обратного отсчета онлайн с функциями зацикливания и отложенного запуска. Благодаря данным настройкам, счетчик может автоматически обнуляться каждый день. Мегатаймер – это простой онлайн-сервис, не требующий знания программирования и сложной настройки. Мы максимально упростили интерфейс, используя бегунки и переключатели, чтобы вы смогли настраивать таймер для своего сайта очень гибко. Изменение размеров, шрифтов, типов и форматов – позволяет сделать полностью кастомизированный счетчик обратного отсчета для своего сайта бесплатно.

Счетчик обратного отсчета на сайт

Счетчик обратного отсчета позволяет повысить конверсию вашего сайта или landing page. Используя таймер обратного отсчета, можно гибко выстроить коммуникацию с вашими пользователями. Рассмотрим основные типы таймера обратного отсчета: Счетчик до определенной даты: Данный тип позволяет выставить время окончания таймера, причем учитывая локальное время пользователя. То есть, если счетчик автоматически будет пересчитывать время для пользователей, находящихся в разных часовых поясах. Теперь, вам не нужно ломать голову как закончить акцию по всей России в один момент времени. Либо вы можете выбрать конкретный часовой пояс в таймере обратного отсчета. Данный вариант обычно используют локальные сайты или интернет-магазины из конкретного города или региона. Счетчик на промежуток времени: Данный формат счетчика эффективно используется для таймеров, которые отсчитывают несколько часов или минут, заставляя посетителя сайта быстрее сделать нужное целевое действие. Например «У вас есть 10 минут, чтобы оформить заявку получить скидку 30% на все товары». Начало отсчета может быть прямо сейчас, либо отсчет таймера начнется с момента первого посещения клиентом сайта. Таймер будет автоматически отсчитывать время для каждого нового пользователя, который зашел на страницу. Зацикленный таймер: Один из самых популярных (и наиболее востребованных) типов счетчика обратного отсчета. Каждый день, таймер может перезапускаться с определенной периодичностью в нужное время. Можно настроить счетчик на локальное время пользователя, либо жестко задать часовой пояс. Данный вид таймеров используется для перезапуска акций на самые популярные товары. Например «Успейте сегодня купить сайт по акции со скидкой 40%». Вставка скрипта обратного отсчета Вы сможете легко установить скрипт обратного отсчета Megatimer. Теперь нет необходимости искать Javascript и jquery таймер обратного отсчета, так как счетчик легко устанавливается через html вставку таймера. Html код счетчика генерируется на сервисе и его нужно просто вставить на сам сайт.

Обратная связь

Если у вас есть предложения по улучшению качества сервиса или по функционалу таймера – пишите на почту support@lpmotor.ru Если вы уже используете наш таймер обратного отсчета на своем сайте – напишите нам о вашем сайте и расскажите, как вы используете функционал счетчика. Лучшие истории будут попадать в раздел «Примеры использования», где вы сможете прорекламировать свою деятельность и свой сайт полностью бесплатно. Web-благотворительность Мы надеемся, что вам понравился наш сервис и генерируемые таймеры обратного отсчета, так как мы делали его с любовью и не собираемся на нем зарабатывать. Мы разрабатываем классные и бесплатные сервисы, которые помогут тысячам владельцев сайтов решить их маленькие проблемы.

Источник

Таймер обратного отсчёта на чистом JavaScript

В этой статье рассмотрим таймер обратного отсчета, построенный на чистом CSS и JavaScript. Он написан с использованием минимального количества кода без использования jQuery и каких-либо других сторонних библиотек.

Таймеры обратного отсчёта могут использоваться на сайтах для различных целей. Но в большинстве случаев они применяются для отображения времени, которое осталось до наступления какого-то крупного события: запуска нового продукта, рекламной акции, начала распродажи и т.д.

Демо таймера обратного отсчёта

Простой таймер обратного отсчета с днями, часами, минутами и секундами. Очень легко настраивается. Создан на чистом CSS и Javascript (без зависимостей).

Подключение и настройка таймера

1. Вставить в нужное место страницы html-разметку таймера:

Таймер обратного отсчета отображает четыре числа: дни, часы, минуты и секунды. Каждое число находится в элементе . Первый класс ( timer__item ) используется для стилизации элемента, а второй — для таргетинга в JavaScript.

2. Добавить стили (базовое оформление):

.timer__items { display: flex; font-size: 48px; } .timer__item { position: relative; min-width: 60px; margin-left: 10px; margin-right: 10px; padding-bottom: 15px; text-align: center; } .timer__item::before { content: attr(data-title); display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 14px; } .timer__item:not(:last-child)::after { content: ':'; position: absolute; right: -15px; }

Стилизовать таймер обратного отсчета можно так как вы этого хотите.

Вышеприведённый CSS использует flexbox. Знак «:» и текст под каждым компонентом даты выводиться на страницу с помощью псевдоэлементов.

document.addEventListener('DOMContentLoaded', function() { // конечная дата, например 1 июля 2021 const deadline = new Date(2021, 06, 01); // id таймера let timerId = null; // склонение числительных function declensionNum(num, words) { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; } // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов function countdownTimer() { const diff = deadline - new Date(); if (diff 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0; $days.textContent = days < 10 ? '0' + days : days; $hours.textContent = hours < 10 ? '0' + hours : hours; $minutes.textContent = minutes < 10 ? '0' + minutes : minutes; $seconds.textContent = seconds < 10 ? '0' + seconds : seconds; $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']); $hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']); $minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']); $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']); } // получаем элементы, содержащие компоненты даты const $days = document.querySelector('.timer__days'); const $hours = document.querySelector('.timer__hours'); const $minutes = document.querySelector('.timer__minutes'); const $seconds = document.querySelector('.timer__seconds'); // вызываем функцию countdownTimer countdownTimer(); // вызываем функцию countdownTimer каждую секунду timerId = setInterval(countdownTimer, 1000); });

4. Установить дату окончания. Например, до 1 июля 2021:

// конечная дата const deadline = new Date(2021, 06, 01);

Структура кода JavaScript

Основную часть кода занимает функция countdownTimer :

Эта функция выполняет расчёт оставшегося времени и обновляет содержимое элементов .timer__item на странице.

Расчёт оставшегося времени осуществляется посредством вычитания текущей даты из конечной:

// new Date() - текущая дата и время const diff = deadline - new Date();

Вычисление оставшегося количества дней, часов, минут и секунд выполняется следующим образом:

const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;

Встроенная функция Math.floor используется для округления числа до ближайшего целого (посредством отбрасывания дробной части).

Вывод оставшегося времени на страницу:

Переменные $days , $hours , $minutes , $seconds содержат элементы (таргеты), в которые выводятся компоненты времени.

Изменение содержимого элементов выполняется через textContent . Если значение меньше 10, то к нему добавляется символ «0».

Получение элементов (выполняется с помощью querySelector ):

// получаем элементы, содержащие компоненты даты const $days = document.querySelector('.timer__days'); const $hours = document.querySelector('.timer__hours'); const $minutes = document.querySelector('.timer__minutes'); const $seconds = document.querySelector('.timer__seconds');

Функция declensionNum используется для склонения числительных:

// склонение числительных function declensionNum(num, words) { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; }

Для постоянного вычисления оставшегося времени и вывода его на страницу используется setInterval .

Хранение идентификатора таймера осуществляется в переменной timerId :

// id таймера let timerId = null;

Использование setInterval для запуска функции countdownTimer каждую секунду:

// вызываем функцию countdownTimer каждую 1 секунду timerId = setInterval(countdownTimer, 1000);

Остановка таймера по истечении времени выполняется в функции countdownTimer :

function countdownTimer() { . if (diff 

// класс для создание таймера обратного отсчета class CountdownTimer { constructor(deadline, cbChange, cbComplete) { this._deadline = deadline; this._cbChange = cbChange; this._cbComplete = cbComplete; this._timerId = null; this._out = { days: '', hours: '', minutes: '', seconds: '', daysTitle: '', hoursTitle: '', minutesTitle: '', secondsTitle: '' }; this._start(); } static declensionNum(num, words) => { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; } _start() { this._calc(); this._timerId = setInterval(this._calc.bind(this), 1000); } _calc() { const diff = this._deadline - new Date(); const days = diff >0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0; this._out.days = days < 10 ? '0' + days : days; this._out.hours = hours < 10 ? '0' + hours : hours; this._out.minutes = minutes < 10 ? '0' + minutes : minutes; this._out.seconds = seconds < 10 ? '0' + seconds : seconds; this._out.daysTitle = CountdownTimer.declensionNum(days, ['день', 'дня', 'дней']); this._out.hoursTitle = CountdownTimer.declensionNum(hours, ['час', 'часа', 'часов']); this._out.minutesTitle = CountdownTimer.declensionNum(minutes, ['минута', 'минуты', 'минут']); this._out.secondsTitle = CountdownTimer.declensionNum(seconds, ['секунда', 'секунды', 'секунд']); this._cbChange ? this._cbChange(this._out) : null; if (diff 

// 1. Получим элементы в которые нужно вывести оставшееся количество дней, часов, минут и секунд const elDays1 = document.querySelector('.timer-1 .timer__days'); const elHours1 = document.querySelector('.timer-1 .timer__hours'); const elMinutes1 = document.querySelector('.timer-1 .timer__minutes'); const elSeconds1 = document.querySelector('.timer-1 .timer__seconds'); // 2. Установим время, например, на одну минуту от текущей даты const deadline1 = new Date(Date.now() + (60 * 1000 + 999)); // 3. Создадим новый объект, используя new CountdownTimer() new CountdownTimer(deadline1, (timer) => { elDays1.textContent = timer.days; elHours1.textContent = timer.hours; elMinutes1.textContent = timer.minutes; elSeconds1.textContent = timer.seconds; elDays1.dataset.title = timer.daysTitle; elHours1.dataset.title = timer.hoursTitle; elMinutes1.dataset.title = timer.minutesTitle; elSeconds1.dataset.title = timer.secondsTitle; }, () => { document.querySelector('.timer-1 .timer__result').textContent = 'Таймер завершился!'; });