Cкрипт обратного отсчёта

ГлавнаяJava скрипты → Обратный отсчёт

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

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

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


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

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

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

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

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

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

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



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

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

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

24h02m59s

1 days, 0:03:34

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



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

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

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

Международный женский день - 8 Марта!
(До начала праздника осталось всего:)




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

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

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

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

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

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

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

Поделись ссылкой с друзьями:

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