Скрипты таймеров для сложых сайтов и простых html-страниц

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

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


Vassilis Dourdounis jQuery Countdown plugin v1.0

lwtcountdown

Данный скрипт изначально доступен в 2-х вариантах (в светлом и темном исполнении).
Пример темной версииПример светлой версии

Данный скрипт работает на базе фреймворка jQuery, поэтому перед установкой скрипта проверяем, подключен ли он к странице. Если нет, то вставляем в «голову» сайта (перед </head>) код:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Подключение файлов скрипта осуществляется следующим кодом (его тоже в «голову» сайта):
<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
<link rel="Stylesheet" type="text/css" href="style/main.css"></link>

При этом напоминаю, что предварительно вам нужно закачать содержимое архива с таймером на ваш хостинг (в созданную вами папку или просто в корень сайта) и подготовить правильные ссылки на файлы. Поэтому если впоследствии таймер у вас не заработал, то проверяйте ссылки. Ссылка на файл задается параметром src="ссылка на файл".

В таком виде вы подключите светлую версию скрипта. Ежели вы хотите темную, то вместо ссылки style/main.css в коде выше, вы должны поставить style/dark.css

Если после подключения к вашей странице файла стилей у вас нарушился внешний вид сайта, то необходимо будет подчистить код в файле стилей. За помощью обращайтесь через форму контактов или на биржу фрилансеров (к примеру www.work-zilla.ru).

Затем в месте, где вы хотите, чтобы таймер обратного отсчёта выводился, вставляете следующий код (независимо от выбранной вами темы оформления скрипта):
<div id="countdown_dashboard">
<div class="dash weeks_dash">
<span class="dash_title">недели</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">дни</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<pan class="dash_title">часы</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">минуты</span>
<div class="digit">0</div>
<div class="digit">>0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">секунды</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>

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

Код вызова таймера выглядит следующим образом:
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetDate: {
'day': 10,
'month': 1,
'year': 2014,
'hour': 11,
'min': 0,
'sec': 0
}
});
});
</script>

Здесь цифры нужно заменить на необходимые вам (день, месяц, год, час, минуты, секунды). После этого вы должны получить работающий таймер.
Скачать скрипт

Подробное описание настроек скрипта доступно на английском языке на сайте разработчика.

Сайт разработчика: www.littlewebthings.com/projects/countdown/


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

Simple jcountdown

simple_jQuery_countdown

Этот плагин также использует библиотеку jQuery, однако изначально не обладает визуальными изысками, зато имеет широкий спектр функциональных настроек. Все визуальные настройки можно дополнительно сделать в файле стилей.
ДемоСкачать скрипт

Лично я столкнулся с проблемой в подборе таймера для сайта, когда нужно было интегрировать простейший из них в акции на сайте. Все найденные мной скрипты были с визуальным оформлением, хотя мне требовался лишь простейший вывод чисел. Решение нашлось в англоязычном сегменте интернета, откуда и был скачан этот скрипт. Пример работы таймера вы можете наблюдать на сайте www.tvintel.com.ua в разделе «Акции».

Подробности о скрипте и настройке: https://github.com/tomgrohl/jQuery-plugins/tree/master/jcountdown


Martin Angelov jQuery Countdown Plugin

jQuery Countdown Plugin

Построен на базе jQuery, красивый и стильный таймер обратного отсчета. Цифровые значения под таймером вызываются дополнительной функцией, которую можно найти в скриптах.
ДемоСкачать скрипт

Подробности о скрипте: http://tutorialzine.com/2011/12/countdown-jquery/


Если у вас не получилось установить таймер самостоятельно, то наверняка вы убедились, что работать с кодом довольно тяжело или по крайней мере требует некоторых знаний и практики. Однако вы всегда можете обратиться к специалистам, и за хорошее вознаграждение они обязательно вам помогут. При этом помощь может быть как с установкой, так и с доработкой таймера под ваши нужды. Помимо бирж фриланса, вы можете обратиться ко мне напрямую через форму контактов. Специалисты различных областей и специализаций водятся здесь:
www.work-zilla.ru

Скрипты таймеров для сложых сайтов и простых html-страниц: 15 комментариев

  1. Евгений

    Скажите как поставить 6 разных таймеров на одну страницу.
    Все подтягивают первую дату.

  2. Евгений

    Здравствуйте
    Скажите как сделать несколько рабочих таймеров на одной странице?

          1. vetraz Автор записи

            Используйте блоки с разными id при вызове скрипта. Вы правильно сделали у себя на странице. Вот только не понимаю, зачем у вас подключен jQuery 3 раза (jquery-latest.min.js, jquery-latest.js)

  3. Евгений

    Убрал jquery, количество дней не соответствует дате встановленой в сам код.
    Как это можно исправить?

    1. Евгений

      Спасибо за вашу, помощь.

      Вышел с ситуации заменив таймер на другой.

  4. Владимир

    Всем привет подскажите пожалуйста видел где то на сайте таймер загруженности производства когда заходишь на сайт от шкала идет до 75% ни где не могу найти такой а очень хочется поставить. Заранее спасибо

    1. vetraz Автор записи

      Добрый день! Не совсем понятна концепция. Заходишь на сайт и полоска (прогресс-бар) пробегает от 0 до N процентов?

    1. vetraz Автор записи

      Удалить неделю можно просто из разметки
      <div class="dash weeks_dash">...</div>

      Для центрирования можно в стилях для класса .dash {…} удалить:
      float: left;
      margin-left: 20px;

      и добавить:
      margin: 10px;
      display: inline-block;

      Для айдишника там же #countdown_dashboard добавить
      text-align: center;

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *