Lecaw

Учимся создавать Web-сайты

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

June 3, 2013 674hits

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

ДЕМО Исходные файлы

 

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

Авторы

Objective HTML
Justin Kimbrell

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

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

FlipClock.js требуется несколько файлов для правильной работы. Небольшой контейнер содержит все циферблаты jQuery таймера и jQuery часов для максимальной портативности.

<html>
	<head>
		<link rel="stylesheet" href="#">
	</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 плагином, но вместо возвращения JQuery объекта, возвращает объект FlipClock.

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

Настройки

autoStart

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

countdown

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

callbacks

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

classes

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

clockFace

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

defaultClockFace

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

Методы

start()

Метод запуска, просто вызовите метод .start () на объекте FlipClock.

clock.start(function() {
});

stop()

Метод остановки, просто вызовите метод .start ()на объекте FlipClock.

clock.stop(function() {
});

setTime()

Установка времени, просто вызовите метод .setTime ()на объекте FlipClock.

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>

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

Минутный счетчик, который будет отслеживать время. Каждую секунду jQuery часы будут увеличиваться, но когда метка достигнет 1 часа, часы будут полностью остановлены. Есть 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>

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

Ежедневные jQuery часы выведут на экран счетчик или обратный отсчет в формате 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 часовой счетчик

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

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

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

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

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

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий