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

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

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

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

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

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

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

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

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

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

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

  • year - это текущий год;
  • month - это порядковый номер текущего месяца;
  • day - необходимый день, до которого и будет осуществляться отсчёт времени.
Для правильной работы этого таймера обратного отсчёта на вашем сайте, вам нужно прописать код перед закрывающемся тегом </head>:
htmlCOPY
<link rel="stylesheet" href="css/style4.css" />
Перед закрывающемся тегом </body> прописать следующий код:
htmlCOPY
<script type="text/jаvascript" src="js/jquery-04.3.1.js"></script>
Для отображения на странице вашего сайта таймера отсчёта времени, пропишите код в нужное вам место:
htmlCOPY
<center> <div id="countbox"></div> </center>
И ещё одно изменение, которое вам необходимо сделать - это в стилевом файле style4.css. Откройте его в текстовом редакторе и замените везде
http://ваш-сайт.ru/... на адрес вашего сайта.

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

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

Скачать

Пока ждёте таймер, - поддержите проект и посмотрите рекламу.

Купить прокси IPv4 для социальных сетей
Комментарии
Вячеслав
Вячеслав
Большое спасибо! По виду классные таймеры, посмотрим как будут работать.
Добавить комментарий

=

1