<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

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

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

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

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

В чём состоит особенность плагина Flipclock? Плагин оформлен на чистом CSS и поэтому его легко можно встроить в дизайн сайта. Разумеется, что плагин не только умеет отсчитывать время назад, но и вперёд.

Скачайте архив с плагином Flipclock с официального сайта: http://flipclockjs.com/. Перетащите из папки compiled два файла: flipclock.css и flipclock.js в папку со своим проектом.

Подключение таймера Flipclock

Вам надо подключить эти скачанные два файла и прописать ссылку на внешнюю библиотеку jQuery.

<html>
  <head>
    <link rel="stylesheet" href="flipclock.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="flipclock.js"></script>
  </head>

HTML код

Зададим HTML структуру. Создадим div с классом clock, где будут находиться сам счётчик. Под ним зададим div с классом message, в этом блоке будет выводиться сообщение, например об остановке таймера.

<body>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
..

JS код

Между тегами body или в отдельном js файле вставляем следующий код. Мы объявили переменную clock, когда загрузилось DOM дерево, которой передали функцию FlipClock для div с классом clock. А когда счётчик остановится stop: function(), в блоке с классом message выводится сообщение - The clock has stopped!, можно заменить этот текст на нужном вам языке, например на русском - Таймер остановлен!.

<script type="text/javascript">
  var clock;
  $(document).ready(function() {
   var clock;
   clock = $('.clock').FlipClock({
    clockFace: 'DailyCounter',
    autoStart: false,
    callbacks: {
      stop: function() {
      $('.message').html('The clock has stopped!')
      }
     }
    });
    clock.setTime(220880); //Устанавливаем нужное время в секундах
    clock.setCountdown(true); //Устанавливаем отсчет времени назад
    clock.start(); //Запускаем отсчет
  });
</script>

Остальной код - это параметры, значение которых хорошо описано в документации. Давайте разберём построчно, что конкретно они делают.

Демонстрация работы таймера обратного отсчёта

Таймер обратного отсчёта, начинает свой отсчёт с дней.

clockFace: 'DailyCounter'

Если стоит значение false, то таймер не будет запускаться автоматически, true - автоматический запуск.

autoStart: false

Здесь можно задать разные варианты, что произойдёт, когда таймер дойдёт до нуля.

callbacks: { // функция обратного вызова

Сделать таймер адаптивным

Чтобы при уменьшении экрана, он масштабировался, а не переносились на другую строку отдельные цифры. Для брейк поинтов в медиа-запросах прописать transform:scale().


Countdown плагин для WordPress

WP FlipClock плагин оказался слегка ущербным, поэтому я предлагаю вам альтернативную замену. Из проверенных мною 5-ти плагинов с таймерами обратного отсчёта, самым толковым оказался - Wp Dev Art.

https://wpdevart.com/wordpress-countdown-plugin/

Таймер можно добавить как в сайдбар, так и в пост в виде виджета. У таймера есть все необходимые настройки и английские слова можно заменить на русские. Но есть один недостаток, для того, чтобы изменить его внешний вид, необходимо обновиться до pro версии. В бесплатном варианте, таймер "умышленно уродлив", посмотрите сами.

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

На выручку придут нам наши знания по HTML/CSS, инспектор кода дал подсказку, где прячутся нужные нам стили оформления - это файл widget.php. Зайдем через админку, в редактор плагинов и заменим у цифер размер, цвет и этот "мерзкий зелёный" цвет фона.

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

Эти строчки кода я заменил на свои стили.

$output_css.= "background-color:#cccccc;\r\n";
  $output_css.= "font-size:30px;\r\n";
  $output_css.= "font-family:Arial;\r\n";
  $output_css.= "color:#ffffff;\r\n";

Теперь вы можете легко встраивать этот таймер в дизайн вашего сайта, меняя стили.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.