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

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

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

Виды таймеров обратного отсчета

Первый вариант — таймер отсчитывает указанное вами необходимое время до окончания какой либо акции. Например вы устанавливаете скидку на какой-то товар на 10 дней, и таймер будет добросовестно отсчитывать время до окончания 10-ти дневного срока.
Второй вариант — таймер отсчитывает время до указанной вами даты. То есть вы устанавливаете дату окончания акции, а таймер показывает сколько осталось времени до этой даты.

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

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

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

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

Но может быть для кого-то этого вполне достаточно. Вот код простого таймера.

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

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

Это полноценный таймер обратного отсчета для сайта на JS. Посмотреть работу таймера можно здесь: Пример таймера. В примере таймер отсчитывает время до Нового года.

Такой таймер подойдет для любого сайта. Сложностей в его установке нет.

В файл CSS сайта или перед тегом </head> страницы с таймером добавляете код стилей. Если вставляете стили непосредственно в страницу, не забудьте обернуть его в теги <style> и </style>.

В файл страницы вставляете код, приведенный ниже:

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

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

И последний вариант подойдет для лендингов – чтобы при всегда выводилось например 10 дней (можно указать любое время)

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

Vassilis Dourdounis jQuery Countdown plugin v1.0

Данный скрипт изначально доступен в 2-х вариантах (в светлом и темном исполнении).
Пример темной версииПример светлой версии

Данный скрипт работает на базе фреймворка jQuery, поэтому перед установкой скрипта проверяем, подключен ли он к странице. Если нет, то вставляем в «голову» сайта (перед </head>) код:
<script src=»http://code.jquery.com/jquery-latest.min.js» type=»text/javascript»></script>

Подключение файлов скрипта осуществляется следующим кодом (его тоже в «голову» сайта):
<script language=»Javascript» type=»text/javascript» src=»https://mywpnote.ru/skriptyi-i-gotovyie-resheniya/skriptyi-taymerov-dlya-slozhyih-saytov-i-prostyih-html-stranits/js/jquery.lwtCountdown-1.0.js»></script>
<link rel=»Stylesheet» type=»text/css» href=»style/main.css»></link>
При этом напоминаю, что предварительно вам нужно закачать содержимое архива с таймером на ваш хостинг (в созданную вами папку или просто в корень сайта) и подготовить правильные ссылки на файлы. Поэтому если впоследствии таймер у вас не заработал, то проверяйте ссылки. Ссылка на файл задается параметром src="ссылка на файл".

В таком виде вы подключите светлую версию скрипта. Ежели вы хотите темную, то вместо ссылки style/main.css в коде выше, вы должны поставить style/dark.css

Если после подключения к вашей странице файла стилей у вас нарушился внешний вид сайта, то необходимо будет подчистить код в файле стилей. За помощью обращайтесь через форму контактов или на биржу фрилансеров (к примеру www.work-zilla.ru).

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

Код вызова таймера выглядит следующим образом:
<script language=»javascript» type=»text/javascript»>
jQuery(document).ready(function() <
$(‘#countdown_dashboard’).countDown( <
targetDate: <
‘day’: 10,
‘month’: 1,
‘year’: 2014,
‘hour’: 11,
‘min’: 0,
‘sec’: 0
>
>);
>);
</script>

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

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

Сайт разработчика: www.littlewebthings.com/projects/countdown/

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