Авторизация

ГлавнаяСкрипты java и phpТаймер обратного отсчета

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

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

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

Мы с вами рассмотрим 3 варианта таймера обратного отсчёта. Для первых 2-ух вариантов в архив положены html файлы для примеров, а последний вариант полностью изложен здесь на странице.

Первый вариант обратного отсчёта

Первый пример: круговая анимация вокруг цифр

Второй пример: чёрный фон

Третий пример: белый фон

Четвёртый пример: чёрный фон с отражением цифр

В первом варианте представлены 4 разных примера по оформлению скрипта для таймера обратного отсчёта, и все они являются универсальными по адаптации. В первом примере используется анимация, цвет которой, изменяется в css файле, а эффект появления цифр выставляется по вкусу из значений в скрипте обратный отсчёт.
Дата прописывается непосредственно в html документе.

Скачать таймер обратного отсчёта 1-ый вариант


Второй вариант обратного отсчёта

24h02m59s

1 days, 0:03:34

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

Для отображения русских слов, замените на нужное в скрипте в самом начале.

Скачать таймер обратного отсчёта 2-ой вариант


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

День победы - 9 Мая!
( До начала праздника осталось всего: )




Для изменения даты отсчёта времени в этом варианте вам просто нужно в скрипте obr-otchet.js в самой первой строке заменить цифры на свои:


year = 2014; month = 11; day = 10; hour= 23; minute= 59; sec= 59;
Параметры в скрипте
  • year - это текущий год;
  • month - это порядковый номер текущего месяца;
  • day - необходимый день, до которого и будет осуществляться отсчёт времени.

Для правильной работы этого таймера обратного отсчёта на вашем сайте, вам нужно прописать код перед закрывающемся тегом </head>:
<link rel="stylesheet" href="css/style4.css" />

Перед закрывающемся тегом </body> прописать следующий код:
<script type="text/javascript" src="js/jquery-04.3.1.js"></script>

Для отображения на странице вашего сайта таймера отсчёта времени, пропишите код в нужное вам место:

Код для *.html


<center>
 <div id="countbox"></div>
</center>

И ещё одно изменение, которое вам необходимо сделать - это в стилевом файле style4.css. Откройте его в текстовом редакторе и замените везде
http://ваш-сайт.ru/... на адрес вашего сайта.

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

Скачать таймер обратного отсчёта 3-ий вариант


Рейтинг: 4.7/5     Оценили: 90

Рекомендую почитать

Комментарии к статье 2

Александр

User: АлександрДля меня четвёртый пример обратного отсчёта: чёрный фон с отражением цифр стильно и симпатично смотрится, поневоле привлекая внимание ...

Евгений

User: ЕвгенийСпасибо!
Отличный таймер, очень помогает в работе сайта и для соответствующих страниц с продажами!