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


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

Речь пойдет о нескольких вариантах, в одном случае – это будет скрипт счетчика обратного отсчета, который будет зациклен на каждые 24 часа. То есть, вы сможете делать акцию. Например: “до конца дня — скидка 50%” и таймер будет показывать, сколько времени осталось до конца дня. По истечению суток, таймер перезапустится и снова начнет отсчет

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


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

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

Счётчик обратного отсчёта времени с перезапуском

Скачать исходник

Итак, счетчик обратного отсчета времени, который будет перезапускаться по истечении суток. Разработал его один умелец у которого блог mywpnote.ru. Наткнулся на блог около полугода назад, и он очень выручил меня в то время. Сегодня же хочу рассказать вам об одном из счетчиков, которые он разработал и описать, как его подключать.

Внешний вид таймеров такой:

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


Скачивайте исходники и в архиве вы увидите 4 папки с названиями vid1, vid2, vid3, vid4 – в них разные типы оформления таймеров. Вы можете посмотреть все и выбрать понравившийся. Способ подключения у всех одинаковый.

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

Как подключить скрипт счетчика обратного отсчета на свою landing page?

Открываем index.html– любым редактором (я пользуюсь sublime3) и видим следующий код.

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

Отсюда нужно скопировать в свой проект подключение таблицы стилей и скрипта (7 и 8 строка).


А также, в месте, на котором вы хотели бы разместить таймер, необходимо прописать тег div с классом “countbox” – 13 строка. В коде специально размещено несколько подключений таймеров, чтобы дать понять, что их можно использовать несколько раз на странице. У многих скриптов с этим проблемы, и второй раз они не хотят выводиться на экране.

Теперь необходимо просто скопировать папки img, css и js, а также их содержимое в свой проект — и все! Счетчик обратного отсчета будет работать! Как видите, это занимает максимум 5 минут, и такой важный элемент будет присутствовать у вас на сайте. Если возникнут вопросы — пишите в комментариях, я обязательно помогу подключить счетчик!

smartlanding.biz

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

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


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

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

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

Как Вы видите имеется общий контейнер с идентификатором id=»timer_wrap», в котором будет расположен наш таймер. В нем содержится вспомогательный контейнер с идентификатором id=»clock», который служит для более красивого отображения таймера. Далее обратите внимание, что в контейнерах с идентификаторами id=’day’, id=’hour, ‘id=’min’, id=’sec’ будут содержатся — дни, часы, минуты и секунды соответственно.


жду этими контейнерами вставлены блоки с идентификаторами id=»razd», которые служат разделителями для каждого элемента таймера (как обычно разделитель для времени — это символ «:»). Так как каждый элемент времени таймера (секунды, минуты, часы, дни) выводится в двузначном формате, то для более красивого отображения времени я предусмотрел для каждого разряда времени свой блок. К примеру, для отображения секунд предусмотрен блок с идентификатором id=’sec’ и для каждого разряда предусмотрен свой блок: для единиц — блок id=’sec1′, для десятков — id=’sec0′. Остальные элементы времени по аналогии.

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

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

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

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

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

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

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


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

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

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

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

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

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

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


July 1,2012 12:00

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

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

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

Итак, для начала сделаем небольшую проверку, но то, не закончен ли отсчет. Если количество миллисекунд в переменной 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 – количество секунд в одной минуте.

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

Затем после кода функции вызовем ее на исполнение:

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

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

4. Выводим таймер на экран.

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


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

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

Теперь так как переменные day, hour, min и sec у нас имеют строковый тип данных, то мы можем обращаться к любому символу этих переменных используя индексы — их номера в строке. К примеру если в переменной day у нас записана строка 10, то 1 — это символ с индексом 0, а 0 — с индексом 1, значит для вывода первого символа этой переменной можно написать вот так day[0].

Далее (пояснения веду с конца кода функции) выводим на экран единицы секунд (как я и говорил секунды выводятся в двузначном формате — первое число это десятки, второе — единицы) . Для вывода используем функцию animation() (код которой я приведу ниже), которая используется для анимированного вывода элементов таймера. То есть единицы секунд у нас выводятся всегда с анимацией, так как они изменяются каждую секунду. Далее, десятки секунд нужно выводить с анимацией только тогда, когда единицы секунд равны 9 (sec[1] == 9), так как в этом случае десятки изменят свое значение. В противном случае десятки должны быть неподвижны. Значит если sec[1] == 9, то мы выводим десятки секунд при помощи функции animation($(«#sec0″),sec[0]), если же нет, то мы выводим десятки попросту используя метод html() ($(«#sec0″).html(sec[0]);).

Далее единицы минут, нужно выводить с анимацией только тогда, когда десятки секунд равны 5 (sec[0] == 5) и единицы секунд равны 9 (sec[1] == 9). Затем десятки минут также необходимо выводить с анимацией лишь тогда, когда единицы минут равны 9 (min[1] == 9 ) и десятки секунд равны 5 (sec[0] == 5) и единицы секунд равны 9 (sec[1] == 9).

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

Теперь приведу код функции, которая выводит на экран элементы таймера при помощи анимации:

Первым делом обратите внимание на параметры, которые необходимо передавать этой функции. Первый параметр — это обычная выборка jQuery, к примеру $(«#min0″). Второй параметр — это данные, которые мы вставляем в выбранный блок (а выборка у нас передается в переменную vibor). Затем мы пишем выборку (сохраненную в переменной vibor), далее вызываем метод html() – которому передаем параметром переменную param (а в ней сохранены данные для вставки). Затем вызываем метод css() с помощью которого задаем стили для нашей выборки. То есть мы немного поднимаем выбранный блок вверх, при помощи правила marginTop (обратите внимание как в этом методе записываются правила состоящие из двух слов), со значением в -20px и задаем полную прозрачность выбранного блока, то есть как бы скрываем данный блок. Далее вызываем метод animate(), который дает возможность нам, создавать пользовательскую анимацию опираясь на правила css, которые мы ему передаем. К примеру, если у блока ширина 100px и методу animate() мы передаем правило для ширины равное 300px. То на экране мы увидим плавное увеличение ширины блока до 300px.

Методу animate() мы передаем правила css, которые будут опускать выборку на свое обычное местоположение, а также убирать прозрачность в блоке с выборкой.

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

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

Как мне кажется, таймер получился довольно неплохой и красивый.

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

Если возникнут вопросы — пишите, постараемся на них ответить. Всего доброго! Удачного Вам кодирования и до новых встреч!!!

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

webformyself.com

счетчик обратного отсчета на сайтДоброго времени, коротко небольшое введение что будем разбирать в данной статье. Это у меня уже как традиция, я имею ввиду логические цепочки ( Введение, Основное содержание, Заключение ).

И так по порядку: Что вы узнаете? и чему сможете научиться? Если примените все что я буду рассказывать. Будем учиться ставить на сайт или Лендинг ( Landing Page ) счетчик обратного отсчета. Помимо всей инструкции в картинках и подробным описанием, самого кода и примеров, в конце посмотрите Видео-урок по работе со счетчиками обратного отсчета ( вставка и подключение на свой сайт и другие технические моменты ).

Рассмотрим 3 счетчика, которые на мой взгляд смотрятся красиво, не перегружены кодом и работают как нужно.

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

Кто использует и для чего применяется счетчик обратного отсчета

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

обратный отсчет

Да, вспомнили, наверняка заходили и видели такие страницы, где например продается товар ( Ягоды годжи для похудения — это как пример ) и большим шрифтом сказано: «Акция закончится через:» и ниже сам счетчик тикает.

Так отлично, а для чего же собственно он нужен этот «Deadline» и для каких целей его ставят на сайт одностраничник или интерет-магазин?

Ответ: Таким образом подогревается скорость к покупке / подписке / и других действий. Т.е. искусственно создается впечатление, что какая-либо акция вот-вот закончится!!! и нужно срочно Покупать / Регистрироваться / Подписываться / Выполнять другие прочие действия

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

счетчик экзамен

Еще приведу пример — этакий жизненный счетчик, работающий безотказно и проверен на 100000 человек.

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

И так, представьте следующую ситуацию: через 2 месяца Вам предстоит сдавать сложнейший экзамен по математике. Какая первая реакция возникнет? Ответ: Аааа, еще целых 2 месяца — успею, столько времени впереди. Прошел 1 месяц и естественно никаких телодвижений и мозговых штурмов для подготовки к экзамену не проходило. Какие мысли возникают дальше? Ну ничего, есть еще 1 месяц в запасе — успею наверстать! Проходит еще 3 недели, осталась 1 неделя до экзамена.

Какие мысли? Вот блин, неделя до экзамена, а я нихрена ничего не делал(а) — What the Fuck? И как это часто случается, подготовка к экзамену происходит в последние ( 2-3 дня ). Уловили суть?

Т.е. работает тот же принцип, что и в счетчике обратного отсчета на сайте. Студент понимает — все деваться некуда, оттягивать время тоже нельзя — надо садиться и учить, заниматься для подготовки к экзамену. Отлично, разобрались… переходим к практике: как установить счетчик обратного отсчета на сайт / Landign page / Одностраничник

Устанавливаем счетчик на сайт

обратный счет

Рассмотрим 1 вариант счетчика, который встраивается на страницу средствами фрейма , тег <iframe> ниже вместе мы разберем как подключить к странице данный счетчик. По кнопке Демо посмотрите на работу счетчика, так же можете скачать архив со скриптом.

    skachat-skript

Механика его действия: пользователь заходит на страницу, содержащую данный счетчик и отсчет идет от заданных переменных, которые задают ( Дней, Часов, Минут, Секунд). Попробуйте обновите страницу «Демо» и всегда отсчитываться будет с 3 Часов 9 Минут и 49 Секунд. Эти переменную можно отрегулировать по вашему усмотрению и сделаем это чуть позже, когда подключим счетчик на отдельную страницу.

Исходная страница к которой будем подключать код счетчика, имеет следующий исходный код. Самая простая страница с текстом h1. ( index.html )

 

 Теперь нам нужно встроить тег iframe код фрейма /iframe на нашу страницу index.html

Что удобно, на странице index.html не нужно прописывать подключение ( js, style ) так как они автоматически подгрузятся из самого < iframe >

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

урок таймер

Проверяйте, у Вас все получится.

Теперь коснемся вопроса, как выставить свои значения ( Дней, Часов, Минут, Секунд ) чтобы стартовал счетчик. Для этого откройте файл ( Timer.html ) c помощью блокнота, спускаемся чуть вниз и вот в этом кусочке кода меняем цифры на свои значения

Для установки данного скрипта обратного отсчета на WordPress CMS Вам потребуется делать шаблон страницы или поста обычно они в шаблоне темы обозначаются ( Page, Single ) вот здесь инструкция  А чем собственно нужно делать этот шаблон?

А дело в том, что если Вы добавить скрипт счетчика в код файла ( Page / Single ) , то этот счетчик будет крутиться на каждом посте, которые опубликованы на вашем блоге. Поэтом целесообразно создать отдельный шаблон под страницу и при публикации указать созданный вами новый шаблон.

Скачать все 3 скрипта 

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

Описание и инструкцию 2 других скриптов смотрите в видео уроке

Видео урок вставки счетчика

Друзья, если есть какие-то вопросы, то смело можете оставлять комментарии. По 2 остальным скриптам я не стал расписывать длинную простыню там принцип подключения почти тот же. Но вы можете посмотреть подключение всех 3 скриптов в моем видео уроке, которое выше. Желаю Вам успешной работы.

С уважением, Александр Лукьянов

vpluce.ru

Приветствую вас дорогие читатели! В этом уроке я покажу, как сделать простенький таймер обратного отсчета!

Как создать таймер обратного отсчета для сайта на javascript?

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

Сделать такой таймер для своего сайта очень просто!

В этом уроке я не стал использовать никаких дополнительных библиотек и Фреймворков типа «jquery» и решил написать весь код на чистом javascript, в одном html файле.

Что умеет данный таймер?

Давайте опишем условия работы нашей программки:

  1. Можно установить количество дней, минут и секунд
  2. Каждую секунду происходит уменьшение времени соответственно на 1 секунду
  3. По истечению времени появится всплывающее окно с текстом о том, что таймер сработал

 

Как реализовать таймер?

Весь код можно рассмотреть или скачать ниже, а чтобы лучше разобраться в уроке, разбирать  код мы будем по отдельности!

HTML код:

  <div id="timer">  	<div id="hour">11</div>&nbsp;:  	<div id="minute">56</div>&nbsp;:  	<div id="second">45</div>  </div>  

Здесь все просто — имеется обертка для цифр с идентификатором — «timer», а в нее вложены еще 3 блока для цифр с соответствующими ID.

&nbsp; - это пробел, который чуть-чуть пододвигает двоеточие.

Если вам нужно задать начальное значение для отсчета, то изменять его нужно как раз в этом html коде.

CSS код:

  #timer{  margin: 20px auto;  text-align: center;  color: #333;  font-family: fantasy;  font-size: 100px;  cursor: default;  }    #timer div{  display: inline;  }  

Здесь мы задаем стили отдельно для обертки, прописывая стиль шрифта, его размер, цвет и так далее, а также прописываем свойство — «display: inline» для внутренних div’ов, чтобы цифры выстроились в одну полоску.

 

Ну и самое интересное — JavaScript код:

  function timer(){    	var hour = document.getElementById('hour').innerHTML;  	var minute = document.getElementById('minute').innerHTML;  	var second = document.getElementById('second').innerHTML;  	var end = false;  	  	if( second > 0 ) second--;  	else{  		second = 59;  		  		if( minute > 0 ) minute--;  		else{  			second = 59;  			  			if( hour > 0 ) hour--;  			else end = true;  		}  	}    	if(end){  		clearInterval(intervalID);  		alert("Таймер сработал!");  	}else{  		document.getElementById('hour').innerHTML = hour;  		document.getElementById('minute').innerHTML = minute;  		document.getElementById('second').innerHTML = second;  	}  }  window.intervalID = setInterval(timer, 1000);  

Как видите, мы создали функцию — «timer», которая будет срабатывать каждую секунду. Срабатывание этой функции достигается за счет установленного интервала (setInterval):

window.intervalID = setInterval(timer, 1000)

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

1000 миллисекунд — это одна секунда.

Этому интервалу мы присваиваем идентификатор — «intervalID «, для того, чтобы можно было остановить интервал, когда выйдет время.

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

Теперь давайте разберем непосредственно саму функцию «timer».

Сначала мы считываем текущие часы, минуты и секунды в переменные с соответствующими названиями.

Переменная — «end» нужна для того, чтобы остановить уменьшение таймера и вывести фразу — «Таймер сработал!». По умолчанию выставляем в false (ложь).

Далее идут простые условия:

Если секунд больше 0, то уменьшаем их на 1, иначе присваиваем им максимальное значение (60) и проверяем точно также минуты, а потом и часы

В итоге, если окажется, что количество оставшихся часов, и минут и секунд равно 0, то изменяем переменную end на true.

Далее, мы просто проверяем переменную end — если она равна истине, значит, таймер сработал и нужно вывести фразу и удались интервал, иначе просто обновляем значения часов, минут и секунд.

Весь код:

  <!DOCTYPE html>  <html>  <head>  <meta http-equiv='Content-Type' content='text/html; charset=utf8'>  <title>Создаем таймер обратного отсчета - Seo блог sergey-oganesyan.ru</title>  <script>  window.onload = function(){     	function timer(){    		var hour = document.getElementById('hour').innerHTML;  		var minute = document.getElementById('minute').innerHTML;  		var second = document.getElementById('second').innerHTML;  		var end = false;  		  		if( second > 0 ) second--;  		else{  			second = 59;  			  			if( minute > 0 ) minute--;  			else{  				second = 59;  				  				if( hour > 0 ) hour--;  				else end = true;  			}  		}    		if(end){  			clearInterval(intervalID);  			alert("Таймер сработал!");  		}else{  			document.getElementById('hour').innerHTML = hour;  			document.getElementById('minute').innerHTML = minute;  			document.getElementById('second').innerHTML = second;  		}  	}  	window.intervalID = setInterval(timer, 1000);  }  </script>  <style>  #timer{  margin: 20px auto;  text-align: center;  color: #333;  font-family: fantasy;  font-size: 100px;  cursor: default;  }    #timer div{  display: inline;  }  </style>  </head>  <body>    	<div id="timer">  		<div id="hour">11</div>&nbsp;:  		<div id="minute">56</div>&nbsp;:  		<div id="second">45</div>  	</div>    </body>  </html>  

Как видите, создать таймер обратного отсчета очень просто!

Прилагаю пример и исходный файл данного урока по javascript, на этом у меня все, подписывайтесь на обновления, желаю вам удачи, пока!

sergey-oganesyan.ru

Помните таймеры «до Нового Года осталось _ дней _ часов _ минут»? Сегодня таймер обратного отсчета транформировался в отличный маркетинговый инструмент — счетчики стоят на целевых страницах интернет-магазинов, на продающих страницах или лендинг-пейдж. «До окончания акции осталось — 5 дней, 15 часов, 40 минут» или «До начала распродажи осталось 7 часов, 15 минут, 35 секунд». Безусловно, таймеры «подогревают» интерес посетителя, побуждают его к совершению целевого действия на сайте, ограничивая время и создавая эффект срочности или дефицита товара.

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

E-timer

http://e-timer.ru/

Различные варианты настройки и оформления. Объем кода — маленький. Работа скрипта на стороне сервиса.

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

Hello Site — таймер

http://hello-site.ru/timer/

Три варианта таймера. Без настроек оформления (только через стили CSS). Объем кода — большой (скрипт + стили + код HTML). Работа скрипта на стороне пользователя.

Hello Site — таймер

Генератор флеш-таймера

http://frantsuzzz.com/timeronline/

Без поддержки jQuery — таймер сделан на flash. Несколько вариантов оформления. Объем кода — средний. Работа счетчика на стороне сервиса.

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

jQuery генератор даты обратного отсчёта

http://knigopad.ru/generator/6_b.htm

Без оформления. Объем кода — большой. Работа скрипта на стороне пользователя.

Пример работы:

До 100-летия осталось:

 

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

proТаймер (платный)

http://makedreamprofits.ru/pt/video/3.php

Платный генератор таймера обратного отсчета. Стоимость — 48 руб./месяц за 1 таймер или 199 руб./месяц за любое количество таймеров.

Семь видов дизайна, три размера, тринадцать цветов. Панель редактирования. Умные настройки. Есть демо-версия для тестирования. Объем кода — маленький. Работа скрипта на стороне сервиса.

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

www.apsolyamov.ru

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

Этот метод хоть и требует определённого знания хотя бы HTMLи CSS, зато имеет максимум возможностей для настройки. Изменяя код htmlи настраивая стили css, можно легко подогнать данный счётчик под любой дизайн.

Шаг 1.

Скопируйте архив с моего Яндекс.Диска и распакуйте архив на своём компьютере. Скачать архив.

В архиве у вас будет 4 файла:

counter.html – собственно html каркас счётчика

jquery.downCount.js – скрипт обратного отсчёта

style.css – стили оформления

time.png – изображения для счётчика

Все необходимые изменения вы будете делать именно в этих файлах.

Шаг 2.

Прежде чем приступить к установке счётчика, необходимо установить дату намеченного события. Дата должна быть в будущем времени, иначе счётчик не будет отображаться. Помните это, на случай если счётчик не отображается на экране.

Установка даты осуществляется в файле counter.html. Необходимо просто изменить дату и время. Все необходимые подсказки в файле присутствуют.

Шаг 3.

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

http://vashdomen.ru/wp-content/themes/vashatema/counter

Шаг 4.

В том месте, где необходимо отобразить таймер обратного отсчёта, нужно вставить вот такой код:

<center><iframe src="http://vashdomen.ru/wp-content/themes/vashatema/counter/counter.html" width="550" height="150" frameborder="0"></iframe></center>

Только учтите, делается вставка в редакторе кода. То есть вставляете код в html код той страницы, где нужно вывести таймер.

Так будет выглядеть таймер:

А вот и видеоурок «Как вставить таймер обратного отсчёта на сайт»

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

На мой взгляд, самый простой но, тем не менее, очень удобный сервис по созданию таймеров обратного отсчёта является TimeGenerator.

На выбор предлагается 4 варианта оформления счётчика. Нужно выбрать который подходит вам, и нажать на кнопку «Выбрать».

Далее нужно задать дату и время запланированного мероприятия и нажать на кнопку «Создать счётчик».

Копируете полученный код в буфер обмена (CTRL+C).

И завершающий этап, вставляете это код (CTRL+V) в нужном месте вашего шаблона. Опять же, делается это через редактор кода.

Пример таймера:

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

Это платный сервис, который ориентирован на интернет-предпринимателей, которые чётко знают для чего им таймер обратного отсчёта. Сервис proТаймер предоставляет многофункциональные таймеры с помесячной и годичной оплатой.

Эти таймеры настраиваются и под сервисы e-mail рассылок и под индивидуального пользователя. Привязаны к IP, а не к браузеру и поэтому счётчик у пользователя не начинается заново, даже если он зайдёт с другого браузера.

На пробу (2 часа), Вы можете попробовать полный функционал этого сервиса.

Процедура не хитрая, регистрируетесь – получаете доступ и пользуетесь.

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

На этом сегодня у меня всё, желаю вам удачи. И конечно жду ваших комментариев. До встречи в следующих статьях.

С уважением, Максим Зайцев.


1zaicev.ru

Онлайн-сервис Time Generator

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

Вы нажимаете на кнопку «Выбрать» под ним. А дальше, вам нужно будет задать до какого срока будет действовать ваше специальное предложение.

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

Куда вставлять код?

  • Eсли у вас сайт сделан без движка, то вы просто берете этот фрагмент кода и вставляете туда, где нужно, что бы осуществлялся вывод таймера.
  • Если же ваш сайт работает на какой-то CMS (Joomla, WordPress и т. д.), то вы можете вставлять этот код как в шаблон, так и в какой-нибудь виджет, запись или страницу.

Для вставки таймера на страницу нужно сделать следующее:

  1. 1.Переходим в административную часть WordPress, и создаём здесь новую страницу.
  2. 2.Переключаемся на вкладку текст и вставляем тот фрагмент кода, который мы только что скопировали.
  3. 3.1.Нажимаем на кнопку «Опубликовать» или «Обновить»

После этого выбранный таймер появится у вас на сайте.

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

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

Онлайн-сервис E-Timer

В отличии от предыдущего, сервис E-Timer позволяет нам осуществлять настройку внешнего вида таймера.

Когда мы переходим на сайт, то попадаем на такую страницу:

Где есть три блока, в виде спойлеров.

Самый первый блок — это «Основные настройки».

  1. 1.1.Для начала, мы должны указать — подключена ли у нас библиотека jQuery.

    Если вы используете сайт на котором уже применены какие-то анимации, вы знаете что там уже библиотека jQuery подключена, то вы выбираете пункт «Подключена на Вашем сайте».

    Если вы создаете сайт самостоятельно, и ни какие библиотеки у вас не подключены, соответственно, вам нужно выбрать пункт «Не подключена на Вашем сайте».

  2. 2.Включаем возможность перезапуска, т. е. по истечении какого-то промежутка времени ваш таймер будет перезапускаться и начинать отсчет заново. Здесь можно его отключать, либо выставить перезапуск каждый день, каждую неделю и каждый месяц.
  3. 3.Задаем дату до которой будет действовать ваше спецпредложение. Кроме даты можно задать часы и минуты.
  4. 4.При желании можно изменить текст заголовка «До окончания акции осталось:», Также мы можем изменять размер шрифта этой надписи, нажав на кнопочки + и -.

Следующий блок настроек, это «Настройки отображения таймера».

  1. 1.Здесь мы можем выбрать язык, на котором будут отображаться подписи дней, часов, минут и секунд. Можно выбрать русский, английский и украинский.
  2. 2.Задаем разделитель, который будет стоять между блоками. По умолчанию здесь стоит двоеточие, можно выбрать еще вертикальный слэш, две вертикальные линии и тире.
  3. 3.Далее, можно выбрать тип шрифта и цвет. По умолчанию он серого цвета. Можно выбрать цвет при помощи палитры:

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

  4. 4.Внутренний отступ. В первом поле мы задаем вертикальный внутренний отступ, а во втором — горизонтальный.
  5. 5.1.Настраиваем границы. По умолчанию границы нет. В первом поле задаем толщину в пикселях. Во-втором — радиус скругления углов. Если его увеличить, углы на таймере будут скругляться. Так же, можно выбрать цвет границы при помощи специальной палитры.
  6. 6.Параметры тени. Поэкспериментировав с эти настройками, вы можете посмотреть, как будет изменяться тень у вашего блока, и подобрать ту, которая больше всего вам понравиться.

И последний блок — это «Настройки отображения цифр».

  1. 1.Здесь мы, прежде всего, можем выбрать наименьшее значение таймера. Сейчас выбраны секунды, мы можем выбрать минуты, тогда у нас здесь будут отображаться только дни, часы и минуты.
  2. 2.Потом, точно также, настраиваем шрифт.
  3. 3.Здесь также можем увеличивать или уменьшать внутренний отступ, горизонтальный и вертикальный. А так же изменять цвет фона, настроить границы и так далее.

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

Можно этот код просто выделить и скопировать, либо нажать на кнопку «Копировать код в буфер».

После того, как код скопирован, вставляем его в то место, где нам нужно чтобы отображался таймер.

Онлайн-сервис Mega Timer

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

На самой первой вкладке — «Тип таймера», мы выбираем, как у нас будет происходить отсчет времени:

  1. 1.1.Мы можем осуществлять отсчет «До определенной даты», в этом случае на нужно будет задать дату окончания отсчета. При этом, мы также, можем выбрать опцию «По локальному времени пользователя», т. е. таймер будет подстраиваться под ту часовую зону, в которой находится ваш пользователь. Если эту галочку снять, то можно выбрать какой-то определенный часовой пояс, по которому будет осуществляться отсчет времени.
  2. 2.Так же мы можем задавать этот таймер «На промежуток времени». Начало отсчета может осуществляться либо с текущего момента, либо с первого посещения сайта вашим клиентом.
  3. 3.1.И последний тип — это «Циклический». Здесь вы можете задать определенный промежуток времени, через который таймер будет обнуляться, и отсчет начнется заново. Задается в часах. Так же может вестись отсчет по локальному времени пользователя, либо быть привязанным к какой то определенной часовой зане.

Далее нажимаем либо на кнопку «Следующий шаг» внизу, либо просто переходим на вкладку «Дизайн» в верхней части экрана.

Дальше мы можем выбрать один из предложенных дизайнов.

Выбираем понравившийся и нажимаем кнопку «Следующий шаг», и теперь в верхней части предпросмотра отображается как он будет выглядеть, а в нижней части находятся настройки внешнего вида:

Здесь я могу изменять толщину линий, радиус круга, тип линий и так далее.

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

При этом для разных дизайнов таймеров тут содержатся разные настройки.

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

После того, как вы задали все настройки, нужно нажать на кнопку «Следующий шаг».

И теперь, все что вам осталось — это скопировать сгенерированный кусочек кода и вставить его на страницу вашего сайта, в том месте, где вам нужно чтобы отображался счётчик.

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

Если у вас остались вопросы, то посмотрите видеоинструкцию, которую я подготовила для вас.

Видео инструкция

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

В одной из следующих статей я расскажу как создавать онлайн-калькуляторы на WordPress. Ели не хотите пропустить – подписывайтесь на рассылку.

Желаю вам весеннего настроения! До встречи в моих новых статьях!

С уважением Юлия Гусарь

impuls-web.ru

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

megatimer.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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