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

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

0 1 284

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

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

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

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

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

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

Дата прописывается непосредственно в html документе.

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

Ссылка на файл: obr_otschet_1.rar 323

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

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

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

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

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

Ссылка на файл: obr_otschet_2.rar

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

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

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

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

Для правильной работы этого таймера обратного отсчёта на вашем сайте, вам нужно прописать код перед закрывающемся тегом </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-ий вариант

Ссылка на файл: obr_otschet_3.rar

Похожие новости