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

Приветствую вас на моем сайте!

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

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

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

Онлайн-сервис 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

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

auction-hammerВозможно вам уже доводилось сталкиваться с таймерами обратного отсчета на различных сайтах.
ще всего таймер используется в контексте какого-нибудь специального предложения, срок действия которого истекает. Дело в том, что на товар или услугу можно установить совершенно обычную цену, но при этом выставить ее как скидочную. Срок действия специального предложения при этом ограничен, а таймер обратного отсчета призван как раз для того, чтобы подстегнуть потенциального клиента на совершение целевого действия (добавления в корзину, звонку, онлайн-заказу и так далее).

Так уж устроена психология людей и ничего с этим не поделать. Если вы смотрите на большой стеллаж с винами и все их ценники стандартного белого цвета, то ничто не привлекает ваше внимание. В большинстве случаев, люди не сильно разбираются в винах, тем более, когда перед вами витрина, на которой их несколько сотен. Главным критерием выбора при этом становится цена. Что в таком случае делают маркетологи? Случайным образом (или не случайным) выбирают из всего ассортимента 1-2 бутылки и делают на них акцию. Цвет ценника при этом меняется, например, на желтый. При беглом осмотре такой витрины, первым делом человек обратит внимание на выбивающиеся из общей массы элементы. А маркетологи именно этого внимания и добивались.

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


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

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

Установка таймера обратного отсчета на сайт

optimizationНу а теперь, когда мы убедились в пользе таймера, самое время разобраться с его установкой. Сразу хочется отметить, что в интернете можно найти довольно много разновидностей подобных таймеров и многие из них так и называются — jQuery Countdown. Однако содержимое файла jquery.countown.js во всех отличается и не существует какого-то единого скрипта с таким названием. Просто это название используют все кому не лень.


Нам доводилось сталкиваться с довольно сложными в установке и «тяжелыми» скриптами, которые весили по 60 килобайт, а в скачанном архиве было более 50 файлов. Такие варианты мы сразу же отсеивали, пока, наконец, не нашли самый простой вариант. В архиве всего 2 файла, один из них сам JavaScript, а второй — спрайт с необходимыми изображениями. Ссылки на необходимые файлы будут в конце статьи.

HTML разметка

HTML разметка очень проста и интуитивно понятна. В нашем примере мы обернули все элементы в контейнер с классом cd-wrapper, чтобы выровнять его по центру экрана. Затем мы использовали основной контейнер, в котором будут происходить все процессы обратного отсчета и назвали его просто cd (от count down). Сразу за этим контейнером следуют подписи к дням, часам, минутам и секундам. На этом вся разметка собственно и заканчивается.

  <div class="cd-wrapper">  	<div id="cd"></div>  	<div class="d">  		<div>Дни</div>  		<div>Часы</div>  		<div>Минуты</div>  		<div>Секунды</div>  	</div>  	<div class="clear"></div>  </div>  

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


CSS стили

Слегка поработав со стилями мы установили необходимые отступы элементов, настроили положение двоеточий и выровняли их по вертикали относительно изображений с цифрами. Если вы захотите поменять значения отступов, то для этого вам нужно будет хорошенько вникнуть в разметку и стили. Более того, в самом файле jquery.countown.js есть дополнительные настройки ширины и высоты изображений. Также там устанавливается относительный путь к необходимому для работы таймера единственному изображению. В нашем случае это ‘./i/digits.png’, а в вашем путь, скорее всего, будет отличаться, поэтому обязательно обратите на это внимание.

  .cd-wrapper {  	display: inline-block;  	margin: 0 auto;  }  .cntSeparator {  	font-size: 50px;  	line-height: 70px;  	margin: 0 10px;  }  .cd-wrapper .d div {  	float: left;  	text-align: center;  	width: 104px;  	font-weight: bold;  	text-transform: uppercase;  	margin: 10px 0 0 36px;  }  .cd-wrapper .d div:first-child {  	margin-left: 1px;  }  .clear {  	clear: both;  }  

JavaScript

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

  <script src="./js/jquery.countdown.js"></script>  

Завершающим шагом будет инициализация функции в любом удобном для вас месте страницы. Это можно сделать внутри контейнера head, а можно и рядом с HTML разметкой. Самое главное, чтобы селектор в вызове функции countdown() был таким же как в HTML разметке. В нашем случае это идентификатор cd.

  $(function() {  	$('#cd').countdown({  		startTime: '03:23:17:25'  	});  });  

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

Необходимые файлы

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

  • jquery.countdown.js [3.6 Кб];
  • digits.png [23.7 Кб] (в зависимости от того, куда вы его загрузите, путь к этому изображению нужно будет указать в файле jquery.countdown.js).

makeasite.ru

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

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

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

Этот метод хоть и требует определённого знания хотя бы 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

Зачем на сайте нужен таймер

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

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

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

Как установить скрипт таймера на сайт

Основные варианты используемых на сайтах таймеров:

  1. Скрипт в виде набора файлов, отвечающих за функционирование и оформление счетчика. Подразумевается правка кода страницы или файла шаблона сайта вручную. Подходит для администраторов сайтов, работающих с WordPress на уровне кода. Подобное решение предполагает, что перед вставкой таймера будет произведено резервное копирование файлов сайта.
  2. Онлайн-таймер — скрипт, сгенерированный сторонним сервисом и содержащий обращения к нему. Простой и удобный вариант для быстрого подключения счетчика к сайту на любой CMS. Добавление кода счетчика производится в редакторе страницы вручную.
  3. Плагин таймера для WordPress. Готовое решение, без необходимости копаться в коде. Плагины обратных таймеров на все случаи жизни имеются в официальном репозитории WordPress. С установкой и настройкой такого плагина, как правило, не возникает трудностей.

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

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

E-Timer: скрипт таймера обратного отсчета на сайт

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

  • установки нужной даты или функции перезапуска;
  • настройки внешнего вида всех имеющихся элементов;
  • размещения готового кода таймера на своем сайте.

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

Основные настройки

Онлайн-сервис E-Timer: основные настройки

Во вкладке основных настроек скрипта задаются следующие параметры:

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

Настройки отображения таймера

Онлайн-сервис E-Timer: настройки отображения таймера

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

Настройки отображения цифр

Онлайн-сервис E-Timer: настройки отображения цифр

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

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

Как добавить код таймера на сайт

Онлайн-сервис E-Timer: таймер акции на сайт

Сгенерированный сервисом код отображается в специальном поле в правой части страницы онлайн сервиса, скопировать его оттуда и добавить в нужное место на своей странице не составляет никакого труда. Используется при вставке таймера на сайт html-режим редактора страницы, в этом случае javascript обрабатывается корректно, WordPress выводит работающий счетчик в том виде, какой был задан в настройках онлайн-сервиса.

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

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

Плагин-таймер: быстрое решение для WordPress

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

Evergreen Countdown Time

Как сделать таймер на сайте: плагин Evergreen Countdown Time

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

  • даты, до которой ведется отсчет;
  • цвета счетчика (черный или белый);
  • размера цифр и подписей (в пикселях);
  • метода отслеживания посетителей (по cookie или IP-адресу).

Настройки плагина Evergreen Countdown Time

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

[ec id="1"]

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

Countdown Timer Ultimate

Таймер времени на сайт: плагин Countdown Timer Ultimate

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

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

Настройки плагина Countdown Timer Ultimate

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

[wpcdt-countdown id="1"]

При необходимости можно вставить обратный таймер на сайт в файл шаблона через функцию:

<?php echo do_shortcode('[wpcdt-countdown id="1"]'); ?>

Внешний вид таймера, добавленного на страницу с помощью плагина, будет примерно следующий:

Вид таймера отсчета, созданного плагином Countdown Timer Ultimate

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

Uji Countdown

Плагин Uji Countdown: таймер обратного отсчета для сайта html

Наиболее продвинутый из рассматриваемых плагинов, использующий возможности HTML5. После установки плагина из репозитория в консоли WordPress (меню Настройки) появляется пункт Uji Countdown. Несмотря на англоязычный интерфейс, все настройки интуитивно понятны. Также присутствует блок предпросмотра, при необходимости быстро скорректировать выбранные опции не составляет труда.

Добавление собственного оформления доступно при переходе на вкладку Add new style. Здесь есть все, что может потребоваться при создании красивого и стильного таймера:

Настройки плагина Uji Countdown

Плагин интересен тем, что позволяет задавать разный цвет фона для верхней и нижней части цифрового блока (опция Select Box Color). Приятный бонус — большой выбор начертаний из всего многообразия Google Fonts. Во вкладке Settings имеются поля, в которых можно вручную прописать перевод используемых единиц времени (секунды, минуты, часы и т.д.).

Плаигн Uji Countdown: сохраненный стиль оформления таймера

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

Плагин Uji Countdown: как добавить таймер на сайт html 5

На панели инструментов в редакторе контента WordPress появляется кнопка в виде циферблата часов, при нажатии на которую в нужном месте страницы легко добавить таймер с выбранным стилем и задать нужное время. Здесь же можно выбрать действие, которое будет совершаться, если время истекло (скрывать цифры или делать редирект на определенный URL). В пункте Recurring Time присутствует возможность перезапуска таймера через определенные отрезки времени, что делает таймер «вечным». Как видим, в бесплатной версии плагина настроек много.

pro-wordpress.ru

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

И так по порядку: Что вы узнаете? и чему сможете научиться? Если примените все что я буду рассказывать. Будем учиться ставить на сайт или Лендинг ( 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. А визуальное оформление создадим с помощью обычного 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


You May Also Like

About the Author: admind

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

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

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

Adblock
detector