Azotirovanie.ru

Инженерные системы и решения
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Таймер обратного отсчета в 18 строк кода javascript

Таймер обратного отсчета в 18 строк кода javascript.

Таймер обратного отсчета в 18 строк кода javascript.

Бывает, что вам для чего-то нужен таймер обратного отсчета, в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на javascript в 18 строк кода.

  • Установите правильную дату окончания
  • Высчитайте оставшееся время
  • Приведите дату к удобному формату
  • Выведите данные таймера, как многоразовый объект
  • Отобразите часы на странице и остановите их, когда они достигнут нуля

Установите правильную дату окончания

Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:

var deadline = '2015-12-31';

var deadline = '31/12/2015';

Или длинный формат

var deadline = 'December 31 2015';

Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:

var deadline = 'December 31 2015 23:59:59 GMT+02:00';

Высчитайте оставшееся время

Следующий шаг — высчитать оставшееся время. Чтобы это сделать, нам нужно написать функцию, которая будет брать строку с временем окончания и считать разницу между этим временем и текущим. Вот как это выглядит:

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
>;
>

Для начала мы создаем переменную t, чтобы хранить оставшееся время. Date.parse() метод встроен в javascript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.

var t = Date.parse(endtime) — Date.parse(new Date());

Приведите дату к удобному формату

Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:

var seconds = Math.floor( (t/1000) % 60 );

Разберемся, что здесь происходит.

  • Делим миллисекунды на 1000, чтобы перевести их в секунды
  • Делим общее число секунд на 60 и сохраняем остаток — вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
  • Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции

Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.

Выведите данные таймера, как многоразовый объект

Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.

Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:

Читайте так же:
Счетчик акрон 01 поверка

Отобразите часы на странице и остановите их, когда они достигнут нуля

Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:

Затем напишите функцию, которая будет отображать данные внутри нашего div'а:

function initializeClock(id, endtime) <
var clock = document.getElementById(id);
var timeinterval = setInterval(function() <
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '
' +
'hours: '+ t.hours + '
' +
'minutes: ' + t.minutes + '
' +
'seconds: ' + t.seconds;
if(t.total

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM.

Дальше мы будем использовать setInterval, чтобы запускать анонимную функцию каждую секунду, которая будет делать следующее:

  • Высчитывать оставшееся время
  • Выводить оставшееся время в наш div
  • Если оставшееся время = 0, останавливать часы

Единственное, что осталось, запустить часы следующим образом:

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк javascript кода.

Подготовьте ваши часы для отображения

До стилизации нам будет нужно немного усовершенствовать некоторые вещи.

  • Убрать начальную задержку, чтобы таймер показывался незамедлительно
  • Сделать скрипт часов более эффективным, чтобы не приходилось непрерывно перестраивать все часы
  • Добавить нули по желанию

Убираем начальную задержку

В часах мы используем setInterval, чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.

Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval(ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock. Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval. Таким образом, часы будут показываться без задержки.

В вашем javascript замените это:

var timeinterval = setInterval(function()< . >,1000);

function updateClock() <
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '
' +
'hours: '+ t.hours + '
' +
'minutes: ' + t.minutes + '
' +
'seconds: ' + t.seconds;
if(t.total

Делаем скрипт более эффективным

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Теперь сделаем ссылку на эти элементы. Добавьте следующий код прямо после определения переменной clock.

Читайте так же:
По данному счету счетчики не найдены

var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

Дальше нам нужно изменить функцию updateClock, чтобы обновить только числа, а не все часы. Новый код будет выглядеть так:

function updateClock() <
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;

Добавляем ведущие нули

Если вам нужны ведующие нули, вы можете заменить код такого вида:

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

Заключение

Мы рассмотрели, как сделать простой таймер обратного отсчета на javascript. Все, что вам осталось, это добавить стили. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 2 ):

18 строк кода Казалось бы, что может быть проще, ведь это блог для чайников. Выложи 2 файла в исходниках, прокомментируй каждую строку и будем вам вам счастье. Но нет, стиль изложения как самого первого урока. Попрыгунчики — сначала мы сделаем так, потом вот так, ну а для того, чтобы выглядело все прилично еще вот так. В итоге что мы имеем? Груду никак не с чем не связанных скриптов, из которых чайнику для того, что бы проверить работоспособность кода надо потратить немало времени. Может быть потому и комментариев 0? Имхо

Сам скрипт заработал но в статье нет стилей. Также красиво как на картинке не получилось сделать. Искал другие решения и нашел классный сервис генерации gif таймеров обратного отсчета https://countdownmail.com , он типа для емайлов на на сайт тоже можно поставить.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

онлайн таймер

онлайн таймер

Таймер онлайн – начать обратный отсчет времени бесплатно

Современные гаджеты призваны существенно облегчить жизнь – и онлайн таймер является одним из наиболее полезных, удобных и функциональных устройств. Он поможет отсчитать любой интервал времени, не забыть об окончании задачи, рационально распределить режим работы и отдыха. Наш таймер онлайн на 100% бесплатный, простой в использовании, практичный – именно такой, как нужен вам.

Читайте так же:
Сброс счетчика эпсон л800

7 ситуаций, когда поможет таймер обратного отсчета

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

  • при готовке блюд, чтобы соблюсти рецепт;
  • во время занятий спортом – тренируйтесь ровно столько, сколько нужно;
  • для работы за компьютером – для глаз полезен 1 час работы и 15 мин. отдыха;
  • чтобы не опоздать на важную встречу, свидание, урок, автобус;
  • за развлечениями – узнайте, сможете ли вы за 1 мин. одеться, прочитать 200 слов, собрать из LEGO башню, пройти 10 лестничных пролетов и т.д.;
  • для грамотного тайм-менеджмента и планирования задач во время дня;
  • когда нужно кормить ребенка, принимать лекарства, делать укол.

Таймер онлайн во весь экран гораздо удобней мобильного приложения – страница быстро загружается, а севшая батарея смартфона не станет проблемой.

История таймера

Первый школьный звонок - таймер, созданный Платоном

Удивительно, но первый таймер появился в Древнем Китае более 2,5 тыс. лет назад. Он представлял собой палочку из смолы и опилок, которую поджигали с одного конца, на другом конце был грузик – при перегорании нити крепления он падал со звоном. Тогда же Платон в Греции изобрел аналог для приглашения учеников на уроки, схожими разработками занимался и Леонардо да Винчи.

Первый механический таймер появился в середине 1800-х годов, это был традиционный, и используемый сегодня будильник, стрелки которого переводятся на нужное время. Уже к концу XX века возник электронный таймер – наиболее точное устройство, применяемое сейчас в смартфонах.

Пошаговая инструкция: как пользоваться таймером?

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

  1. Нажмите «Старт», чтобы проверить тип сигнала и его громкость на обнуленном таймере.
  2. Выберите временной интервал над счетчиком – диапазон от 1 минуты до 1 часа, можно добавлять время в один клик.
  3. Если требуется указать другой промежуток, щелкните кнопку «+» и введите данные вручную – можно добавить описание.
  4. Нажмите «Старт» и таймер онлайн начнет обратный отсчет, после истечения времени сработает звуковой сигнал.
  5. Для остановки отсчета раньше времени и обнуления щелкните «Обнулить».
  6. Если хотите, чтобы таймер работал беззвучно, нажмите на соответствующий значок справа от клавиши «Старт».

Онлайн таймер можно остановить без сброса результата, для этого используется кнопка «Стоп», для возобновления обратного отсчета нажмите «Старт».

Читайте так же:
Счетчик каскад как прошить

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

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

Таймер Baseus Таймер Heyo rotation countdown timer YGH-5237

Цифровой таймер-секундомер с часами rst 04200. предусмотрена функция расчета опаздывания таймера от необходимого времени. запоминание последней установки. используется жидкокристаллический точечно-матричный дисплей с анимацией цифр. модель оснащена пятью функциями: тайм.

Самовывоз, Почта РФ, Курьером, Логистическая компания

Радиодатчик Rst 04200

Таймер механический обратного отсчета Brennenstuhl MC120 (1506590)

Розетка-таймер, отсчет времени: механический, способ монтажа: открытая установка, IP20

Самовывоз, Почта РФ, Курьером, Логистическая компания

Таймер механический обратного отсчета Brennen.

Таймер обратного отсчета MC 120 до 120 минут, 230В, 16А.

Розетка-таймер, количество каналов: 1, отсчет времени: механический, максимальный ток нагрузки: 16 А

Самовывоз, Почта РФ, Курьером, Логистическая компания

Таймер обратного отсчета MC 120 до 120 минут.

Таймер обратного отсчета PS-110

Таймер, отсчет времени: электронный, способ монтажа: открытая установка

Самовывоз, Почта РФ, Курьером, Логистическая компания

Таймер обратного отсчета PS-110

CASIO Часы-секундомер CASIO HS-3V-1RET

CASIO Часы-секундомер CASIO HS-3V-1RET по выгодной цене

Самовывоз, Почта РФ, Курьером, Логистическая компания

CASIO Часы-секундомер CASIO HS-3V-1RET

Самовывоз, Почта РФ, Курьером, Логистическая компания

Секундомер CASIO HS-3V-1 COLLECTION

Пользователь может устанавливать обратный отсчет до двух часов. Устройство Brennenstuhl просто настраивать и включать. Имеет защиту от детей, так что Вы можете не волноваться, если они играют рядом с работающим прибором. Особенности: Механический таймер обратного отчета.

Самовывоз, Почта РФ, Курьером, Логистическая компания

Таймер механический обратного отсчета Brennen.

Таймер механический обратного отсчета Brennenstuhl MC120 (1506590)

Пользователь может устанавливать обратный отсчет до двух часов. Устройство Brennenstuhl просто настраивать и включать. Имеет защиту от детей, так что Вы можете не волноваться, если они играют рядом с работающим прибором. Особенности: — Механический таймер обратного отче.

Самовывоз, Почта РФ, Курьером, Логистическая компания

Таймер механический обратного отсчета Brennen.

Таймер обратного отсчета Baseus Heyo Rotation Black

Будильник с вращающейся регулировкой, звуковым напоминанием, магнитным креплением. Функция: установить напоминание о времени. Напряжение 4,5 В (3 батарейки AAA) . Отсчет вверх и вниз. Размер: 78 * 78 * 27.5mm, материал: металл — алюминий, АБС

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

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

Таймер обратного отсчета — это Расширения WordPress для Elementor, чтобы добавить таймер обратного отсчета, чтобы продемонстрировать предстоящие события, важные достижения, специальные предложения, предстоящую страницу и многое другое. Это может быть мощным маркетинговым инструментом, чтобы создать чувство срочности и поощрять ваших посетителей к принятию мер. Добавление и настройка виджета займет всего несколько минут. Вы можете добавить неограниченное количество счетчиков на свой сайт или страницу.

Гибкие настройки Расширения позволяют управлять и настраивать обратный отсчет и каждый из его элементов, следуя вашим целям. Доступны два типа тайминга: до определенной даты и вечнозеленый таймер. Выберите «Блок» или «Встроенный» тип вида и единицы времени, которые будут отображаться на счетчике. Виджет поставляется с пятью цифровыми анимациями, чтобы сделать элемент более интересным и уникальным. По истечении времени вы можете выбрать одно из дальнейших действий, таких как отображение сообщения/кнопки для посетителей, включение перенаправления на другую страницу или просто скрытие обратного отсчета.

Читайте так же:
Обнуление счетчик картриджа xerox phaser 3100

Мы позаботились о том, чтобы вам было легко начать работу с плагином Countdown. С помощью Расширения вы получаете 5 уникальных стилизованных и готовых шаблоны. Это лишь несколько примеров, которые могут вдохновить вас на создание своего стиля. Он предоставляет вам быстрый старт в несколько кликов.

Расширения имеет простые и гибкие настройки стиля. Вы можете управлять размером, типографикой, цветами, фоном, границей и другими вещами для различных элементов. Можно применять различные стили для различных состояний цифр, таких как нормальный или наведите курсор.

Таймер обратного отсчета для Elementor исключительно совместим со всеми современными браузерами. Не имеет значения, какие пользователи браузера просматривают ваш сайт: Chrome, Firefox, Opera, Safari или Edge. Все будет отлично смотреться на всех устройствах и во всех браузерах.

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

  • Поддержка Из-за даты и Evergreen типов таймера
  • Предоставляет типы блочных или встроенных видов
  • Поддержка 5 цифровых анимаций: флип часы, круг, затухание, рулон цифры, светящиеся
  • Различные действия после истечения времени
  • Возможность создания неограниченного количества таймеров
  • Возможность добавления/удаления единиц времени
  • Редактирование меток единиц времени
  • Управление разделителем цифр
  • Отзывчивый и дружелюбный к любому устройству
  • Настраиваемые шрифты, цвета, границы, Фоны и т. Д.
  • Параметры быстродействия
  • Хорошо работает со всеми темы WordPress, построенными на Elementor
  • Полностью Seo Дружественный
  • Включенный файл pot для быстрого перевода на любой язык
  • Идеально подходит для направления RTL
  • Быстрая и плавная установка
  • Протестировано и совместимо до WordPress 5+
  • Легкий и быстрый
  • Все основные браузеры поддерживают Chrome, Firefox, Safari, Opera и Edge
  • Простота в использовании и настройке с современным пользовательским интерфейсом
  • Руководство по установке и подробное руководство пользователя
  • Шесть месяцев Включена поддержка для покупателей CodeCanyon

Установка Расширения занимает всего несколько секунд. Кроме того, вам не нужно делать какие-либо дополнительные настройки. Расширения готов к работе сразу после установки — вам нужно только установить и активировать его в WordPress. Подробнее о возможностях и настройках см. в интерактивной документации.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector