FlipClock.js - красивые часы и таймер на jQuery

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

После того как мы рассмотрели большое количество существующих библиотек, было принято решение, создания гибкого API, благодаря которому можно реализовать любой тип jQuery таймера или часов, с Flip эффектом. Ниже приведены необходимые требования, которые были рассмотрены при создании API.

Сложность

  • Использование в качестве часов.
  • Использование в качестве таймера.
  • Использование в качестве обратного отсчета.
  • Использование минимум CSS кода.
  • Свободный синтаксис.
  • Полнофункциональный API для создания пользовательского циферблата.

Необходимые плагины

Загрузка скриптов

Для правильной работы библиотеки FlipClock.js, подключим несколько файлов и создадим один контейнер для циферблата таймера и часов для максимальной портативности.

<html>
    <head>
        <link rel="stylesheet" href="/assets/css/flipclock.css">
    </head>
    <body>
        <div class="your-clock"></div>
        
        <script src="/assets/js/libs/jquery.js"></script>
        <script src="/assets/js/flipclock/libs/prefixfree.min.js"></script>
        <script src="/assets/js/flipclock/flipclock.min.js"></script>
    </body>
</html>

FlipClock.js использует jQuery для манипуляции с DOM, но вместо возвращения jQuery объекта, возвращает объект FlipClock.

var clock = $('.your-clock').FlipClock({
// ... настройки
});
var clock = new FlipClock($('.your-clock'), {
// ... настройки
});

Настройки

autoStart

(boolean) Если этот параметр установлен со значением false, таймер будет работать без автозапуска. Значение по умолчанию true.

countdown

(boolean) Если этот параметр установлен в true, то часы будут работать в обратном отсчете. Значение по умолчанию - false.

callbacks

(object) Объект функции обратного вызова. Для получения дополнительной информации взгляните на документацию обратного вызова.

classes

(object) Объект CSS классов, которые будут использоваться в DOM.

clockFace

(string) Используемое наименование часов для установки необходимого вида. Значение по умолчанию - HourlyCounter.

defaultClockFace

(string) циферблат. Значение по умолчанию - HourlyCounter.

Методы

start()

Метод запуска.

clock.start(function() {
});

stop()

Метод остановки.

clock.stop(function() {
});

setTime()

Установка времени.

clock.setTime(3600);

setCountdown()

Метод изменяет тип отсчета.

clock.setCountdown(true);

Вид часов

Почасовой счетчик

По умолчанию, есть 6 видимых цифр. HH: MM: SS

Пример 1

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClock(3600);
</script>

Пример 2 обратный отсчет

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClock(3600, {
        countdown: true
    });
</script>

Минутный счетчик

Есть 4 видимых цифр. MM:SS.

Пример 1

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.your-clock').FlipClip(3000, {
        clockFace: 'MinuteCounter'
    });
</script>

Пример 2 обратный отсчет

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.your-clock').FlipClip(3000, {
        countdown: true,
        clockFace: 'MinuteCounter'
    });
</script>

Дневной счетчик

Счетчик или обратный отсчет в формате DD:HH:MM:SS.

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClip(3600 * 24 * 3, {
        clockFace: 'DailyCounter',
        countdown: true
    });
</script>

12 часовой счетчик

Часы выведут на экран текущее время пользователя в формате 24 часов. Есть 6 видимых цифр. HH:MM:SS. Этот циферблат не имеет возможности обратного отсчета.

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClip({
        clockFace: 'TwelveHourClock'
    });
</script>

24 часовой счетчик

<div class="clock"></div>

<script type="text/javascript">
    var clock = $('.clock').FlipClip({
        clockFace: 'TwentyFourHourClock'
    });
</script>
ДЕМО СКАЧАТЬ

 

Перевод статьи FlipClock.js

Тэги: plugin

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.