Бесплатное в сети!
» » Таймер обратного отсчета на сайт

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

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

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

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

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

круговая анимация чисел

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

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

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

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

обратный отсчёт 2 вариант

Демо

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

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

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

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

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

обратный отсчёт 3 вариант

Демо

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

<script>
 year = 2014; month = 11; day = 10; hour= 23; minute= 59; sec= 59;
</script>

Параметры в скрипте

  • year - это текущий год;
  • month - это порядковый номер текущего месяца;
  • day - необходимый день, до которого и будет осуществляться отсчёт времени.

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

<link rel="stylesheet" href="css/style4.css" />

Перед закрывающемся тегом </body> прописать следующий код:

<script type="text/jаvascript" src="js/jquery-04.3.1.js"></script>

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

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

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

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

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

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

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