Меню

Красивый счетчик до даты



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

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

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

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

Счетчик обратного отсчета позволяет повысить конверсию вашего сайта или landing page. Используя таймер обратного отсчета, можно гибко выстроить коммуникацию с вашими пользователями. Рассмотрим основные типы таймера обратного отсчета:

Счетчик до определенной даты:

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

Либо вы можете выбрать конкретный часовой пояс в таймере обратного отсчета. Данный вариант обычно используют локальные сайты или интернет-магазины из конкретного города или региона.

Счетчик на промежуток времени:

Данный формат счетчика эффективно используется для таймеров, которые отсчитывают несколько часов или минут, заставляя посетителя сайта быстрее сделать нужное целевое действие. Например «У вас есть 10 минут, чтобы оформить заявку получить скидку 30% на все товары».

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

Зацикленный таймер:

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

Данный вид таймеров используется для перезапуска акций на самые популярные товары. Например «Успейте сегодня купить сайт по акции со скидкой 40%».

Вставка скрипта обратного отсчета

Вы сможете легко установить скрипт обратного отсчета Megatimer. Теперь нет необходимости искать Javascript и jquery таймер обратного отсчета, так как счетчик легко устанавливается через html вставку таймера. Html код счетчика генерируется на сервисе и его нужно просто вставить на сам сайт.

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

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

Web-благотворительность

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

Источник

17 отличных скриптов обратного отсчета, которые вам могут понадобиться в любой момент

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

Сегодня мы подготовили для вас подборку скриптов с таймерами обратного отсчета. Это, как нам кажется, лучшие примеры реализации подобной функции.

01. Анимированный счетчик на javascript

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

Читайте также:  Когда ставиться обратный клапан до счетчика или после

Сайт-источник: http://codecanyon.net/item/javascript-animated-counter/233648
Предпросмотр: http://codecanyon.net/item/javascript-animated-counter/full_screen_preview/233648

02. Страница «На реконструкции» в стиле параллакс

Страница «На реконструкции» в стиле параллакс позволит вам «украсить» свою страницу «Скоро открытие» динамическим трехмерным облачным небом, на котором будет расположен ваш логотип или графический элемент на ваше усмотрение. Скрипт работает во всех современных браузерах (Chrome, Safari, Opera, Safari, IE9)

03. Страница «На реконструкции» с обратным отсчетом

Очень простая и адаптивная страница «на реконструкции» с обратным отсчетом. Здесь можно отметить наличие руководства, с помощью которого вы без труда подстроите страницу под собственные нужды.

04. Fancy Countdown – jQuery-плагин

Fancy Countdown представляет собой конфигурируемый jQuery-плагин, позволяющий вас создавать привлекательные таймеры обратного отсчета. Он очень прост в использовании. Вы можете указать необходимую дату. Плагин поставляется с расширяемым АПИ, и настройка займет не более 3-х минут. Стоит отметить работоспособность на iPhone, iPad и т.д, а также на смартфонах с поддержкой javascript.

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

06. Целевая страница «Coming Soon»

javascript-счетчик до открытия веб-сайта с 6 разными эффектами + jQuery.

07. Счетчик для сайта на реконструкции

Отличный скрипт обратного отсчета до открытия сайта с использованием кода Ajax и jQuery. Вам не требуется заводить базу данных для нормальной работы скрипта. К тому же, скрипт совместим как с браузерами с включенной поддержкой javascript, так и с браузерами, где поддержка отсутствует.

08. WordPress-плагин: Coming Soon

Coming Soon – это плагин для WP, который позволяет вам заменить главную страницу сайта на модную и удобную страницу-оповещение о скором открытии. Вы можете добавлять собственный логотип, фоны, шапки и подвалы и многое другое. Здесь также представлены богатая палитра уже готовых набросков.

09. Виджет Broadcast Countdown

Данный виджет включает в себя настройку двух режимов: повторяющегося и единовременного. Здесь можно выставить текстовый заголовок обратного отсчета, потоковый URL, а также опцию для настройки таймера на обратный отсчет до единовременного события. Стоит отметить наличие выбора даты и времени на jQuery, что значительно облегчает процесс.

10. WordPress-сайт в разработке или не отвечает по техническим причинам

Плагин DP Maintenance включает возможность добавить режим закрытия сайта на разработку или на время технических работ. Стоит отметить, что плагин представляет на выбор 3 адаптивных шаблона.

11. 5sec Maintenance Mode

Плагин предлагает 6 забавных шаблонов с оформляемым обратным отсчетом. Все шаблоны оптимизированы под поисковые системы и Google.

12. Плагин jQuery Countdown

Плагин очень просто встроить с возможностью останавливать его и запускать вновь.

Данный обратный отсчет оформлен красивой анимацией. Проект пока что находится в стадии бета.

14. jQuery Countdown Timer

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

15. Добавляем таймер с обратным отсчетом на сайт

Научитесь встраивать таймер с обратным отсчетом в собственный сайт посредством jQuery.

Сайт-источник ушел в небытие | Предпросмотр отправился туда же

16. T(-) Countdown: плагин для WordPress

WordPress-плагин T(-) Countdown поможет вам отобразить стильный таймер обратного отсчета без использования Flash (в боковой панели посредством виджета или в сообщение при помощи короткого тэга). Отличный способ оповещать людей о предстоящем событии.

17. Uji Countdown: настраиваемый таймер обратного отсчета на HTML5

Uji Countdown позволяет вам отображать обратный отсчет в сообщениях или на страницах. Самый простой способ встраивания полностью настраиваемого таймера на HTML5.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Источник

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

Дата публикации: 2012-08-13

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

Логику скрипта мы напишем на языке Javascript, с использованием библиотеки jQuery. А визуальное оформление создадим с помощью обычного HTML. Для тех, кто не знает, библиотека jQuery – это библиотека, написанная на языке Javascript. Если сказать другими словами, то это набор готовых функций, для облегчения взаимодействия Javascript и HTML.. Эта библиотека предоставляет нам очень большой выбор различных функций и методов по доступу к атрибутам и содержимому выбранных элементов. Итак, давайте приступим.

Читайте также:  Счетчик дней без вредной привычки

1. Создание HTML разметки.

Первым делом создадим визуальную часть нашего скрипта, то есть разметку на основе HTML. Для этого создадим новый файл под названием index.html. Вот с таким содержимым:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Как Вы видите имеется общий контейнер с идентификатором в котором будет расположен наш таймер. В нем содержится вспомогательный контейнер с идентификатором который служит для более красивого отображения таймера. Далее обратите внимание, что в контейнерах с идентификаторами ‘id=’min’, будут содержатся — дни, часы, минуты и секунды соответственно. Между этими контейнерами вставлены блоки с идентификаторами которые служат разделителями для каждого элемента таймера (как обычно разделитель для времени — это символ «:»). Так как каждый элемент времени таймера (секунды, минуты, часы, дни) выводится в двузначном формате, то для более красивого отображения времени я предусмотрел для каждого разряда времени свой блок. К примеру, для отображения секунд предусмотрен блок с идентификатором и для каждого разряда предусмотрен свой блок: для единиц — блок для десятков — Остальные элементы времени по аналогии.

Теперь необходимо создать файл для хранения правил css, для нашего скрипта, как Вы видите я подключаю файл style.css, поэтому его и создадим. Вот его содержимое:

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

Теперь нам осталось создать сам таймер и вывести на экран.

2. Подготовка к кодированию на Javascript.

Первым делом давайте создадим пустой файл script.js, в котором будут храниться скрипты на языке Javascript, и сохраним его в папке js. Далее давайте подключим этот файл к нашему скрипту (между тегами head):

Далее нам понадобится библиотека jQuery, которую можно скачать с официального сайта //jquery.com кликнув по кнопочке DOWNLOAD. После скачивания библиотеки также ее сохраним в папке js и подключим к нашему скрипту:

3. Создаем логику таймера.

Итак, для начала перейдем в файл script.js и откроем код для работы с библиотекой jQuery:

Как Вы помните, для того что бы начать работу с библиотекой jQuery, необходимо выбрать элемент document нашей страницы, и для него вызвать обработчик события ready (который сработает после полной загрузки страницы), и в этом обработчике описываем функцию в теле которой и ведем кодирование с использованием библиотеки jQuery.

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

Итак, давайте создадим функцию get_timer() которая и будет функцией вызова таймера. Далее в этой функции создадим переменную date_new, в которой будем хранить дату от которой нужно вести обратный отсчет. Дата будет представлять собой строку формата:

Месяц День,Год ЧЧ:ММ

К примеру, если мы хотим назначить датой отсчета 1 июля 2012 года и время 12.00, то строку необходимо сформировать таким образом:

Читайте также:  Счетчик газа bk g65 с электронным корректором тс220

Теперь давайте приведу часть кода функции для дальнейших пояснений:

Обратите внимание, далее создаем объект класса Date (записываем его в переменную date_t) и передаем его конструктору — дату отсчета времени. Класс Date предназначен для работы с датами и временем. Если конструктору, не передавать ни каких значений, то будет создан объект класса Date с текущими датой и временем. Которую, мы можем вывести, если нам это необходимо. Дата и время в объекте Date, хранятся не в явном виде, а в виде количества миллисекунд прошедших с 0 часов 0 минут 1 января 1970 года. Поэтому мы можем узнать, сколько пройдет миллисекунд между временем отсчета и текущей датой, что мы и делаем и сохраняем результат в переменную timer.

То есть в переменной timer у нас содержится количество миллисекунд до времени отсчета. Значит, нам осталось только узнать, сколько это будет дней, часов, минут и секунд, а затем просто вывести это на экран. Первым делом переведем миллисекунды в привычное для нас время (продолжаем кодировать функцию get_timer()):

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Итак, для начала сделаем небольшую проверку, но то, не закончен ли отсчет. Если количество миллисекунд в переменной date_t больше чем в переменной – date, значит необходимо продолжать отсчет. Если же меньше – то мы с помощью jQuery производим выборку блока с идентификатором clock ($(«#clock»)) и при помощи метода html() вставляем в выбранный блок данные, которые переданы ему параметром (метод html() выводит данные, которые переданы ему параметром, в выбранный блок).

Первым делом найдем количество дней до даты отсчета. Для этого переменную таймер делим на количество миллисекунд в одном дне, а это можно узнать из выражения – 24*60*60*1000 (в одной секунде 1000 миллисекунд, в одной минуте 60 секунд, в одном часе 60 минут и в одном дне 24 часа). С помощью функции parseInt() мы отбрасываем у результата дробную часть, так как эта функция, приводит строку, переданную ей параметром, к целочисленному результату (попросту говоря, возвращает число, а если это невозможно, то NaN). Далее если получившееся число меньше 10 – добавляем 0, так как каждый элемент времени нужно выводить в двузначном формате. И затем с помощью метода toString() приводим получившийся результат (переменную day), к строковому типу данных (это нам понадобится для более красивого отображения времени, но об этом позже). Как видите здесь все просто – немного математики и все.

Далее часы определяем по аналогии с днями, только переменную делим уже на количество миллисекунд в одном часе. Но теперь необходимо отбросить дни, так как мы сейчас получили общее количество часов до указанной даты отсчета. Для этого мы с помощью операции – остаток от деления отбрасываем дни. Для обозначения этой операции используется символ — % и возвращает эта операция — остаток от деления левого операнда на правый операнд. То есть мы как бы делим общее число получившихся часов на 24 (количество часов в одном дне) и берем от результата только остаток от деления – так как целая часть от деления – это уже дни, а мы их уже получили.

Затем находим минуты – все по аналогии. Переменную таймер делим на количество миллисекунд в одной минуте и отбрасываем часы (как и в примере выше – берем остаток от деления общего количества минут на 60 – количество минут в одном часе).

И последнее, находим секунды. Для этого все также делим переменную таймер на количество миллисекунд в одной секунде и отбрасываем минуты. Все также берем остаток от деления общего количества секунд на 60 – количество секунд в одной минуте.

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

Источник

Adblock
detector