Как сделать таймер обратного отсчета на сайте

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

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

Для создания таймера обратного отсчета я буду использовать библиотеки Jquery, это очень распространенная вещь которую легко настроить и использовать. Для начала скачайте архив с файлами и распакуйте его. У вас появиться три папки и один html файл:

файлы таймера

Первая папка содержит CSS таблицу стилей соответственно и внешний вид таймера будет настраиваться именно в ней. Вторая папка содержит все изображения, так же в ней есть psd исходник, так что поправить графику не составит труда. В третей папке, находятся сам JavaScript файл менять там не чего не нужно просто оставляем все как есть. Ну а редактировать и настраивать сам таймер обратного отсчета для сайта мы будем непосредственно в html коде, который у нас находится в файле index.html

<!DOCTYPE>
<html>
  <head>
    <title>Таймер обратного отсчета для сайта</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/jquery.countdown.js"></script>
    <link href="css/media.css" rel="stylesheet" type="text/css" />
    <script>
      $(function(){
        $(".digits").countdown({
          image: "img/digits.png",           format: "dd:hh:mm:ss",
          endTime: new Date(2014, 11, 21)
        });
      });
    </script>
  </head>
  <body>
     <div class="wrapper">
      <div class="cell">
<div id="holder">
          <h1>Сайт заработает через:</h1>
<div class="digits"></div>
<div class="name0">Дней</div><div class="name1">Часов</div><div
class="name1">Минут</div><div
class="name1">Секунд</div>
        </div>
      </div>
    </div>
  </body>
</html>

Давайте разбираться, что вам необходимо, чтобы у вас заработала данная конструкция, для начала нужно внести между тегами head основные строки. Вам необходимо подключить библиотеку JQuery, делается это с помощью строки

Далее прикрепить сам JavaScript с помощью следующей строчки:

Конечно, директории файлов вы можете изменять как вам удобно, главное не забывайте в коде это указывать. Далее у нас прикрепляется таблица стилей и остается главная настройка это endTime: new Date(2014, 11, 21), здесь вы тупо выставляете дату, когда заработает ваш проект или что у вас там произойдет. Но в настройке даты есть своя особенность во-первых, таймер рассчитан максимум на 30 дней поэтому для настройки даты вы фактически меняете только один показатель а именно день, второй момент на JQuery отсчет ведется не с 1 а с нуля, поэтому если к примеру вы хотите выставить срок до 22 ноября 2014 года а текущая дата 19 то есть старт через 3 дня, то выглядеть это будет как в примере выше "new Date(2014, 11, 23)", или же через 20 дней то расчет следующий 20+1+19=40 и соответственно "new Date(2014, 11, 40) . Расчет я думаю не сложный тут и первоклассник справится, так что здесь ни чего страшного нет.

Далее у нас остается сам текст который вы легко можете исправить и конечно же дизайн, ну тут я думаю вы без проблем сможете разобраться со стандартным CSS и HTML, и подогнать внешний вид счетчика под ваши требования. Главная задача решена, и вы теперь легко сможете сделать таймер обратного отсчета на своем сайте, если возникнут какие либо проблемы с настройкой, пишите.

Дата публикации:2014-11-19

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Автор: Алексей Мезенцев