Гаджет JSCounter - механический счетчик


Оглавление



Введение


Гаджет JSCounter предназначен для отображения на WEB-странице имитации механического счетчика. Гаджет допускает отображение произвольного количества десятичных разрядов и некоторые возможности по адаптации внешнего вида под Ваш вкус и требования путем передачи различных опций в конструктор JavaScript компонента и использования CSS оформления. Различные варианты использования и оформления гаджета можно посмотреть на примерах ниже.

Для загрузки минифицированного JavaScript файла гаджета JSCounter перейдите по ссылке jscounter-1.1.1.min.js
Для загрузки исходного JavaScript файла гаджета JSCounter перейдите по ссылке jscounter-1.1.1.src.js


Демонстрация


Для просмотра/сокрытия исходного HTML, CSS и JavaScript кода, воспользуйтесь кнопкой Показать/Скрыть код.
Для просмотра результата работы кода, воспользуйтесь кнопкой Показать результат.


Минимализм


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

HTML

CSS

JavaScript

В начало страницы

Разрядность


В этом примере показано, как передавая различные параметры в конструктор JavaScript компонента можно управлять разрядностью счетчика.

HTML

CSS

JavaScript

В начало страницы

Цвет


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

HTML

CSS

JavaScript

В начало страницы

Обрамление CSS


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

HTML

CSS

JavaScript

В начало страницы

Динамика


В этом примере показано, как вызовом функций JavaScript объекта счетчика инкрементировать и декрементировать его показания.

HTML

CSS

JavaScript

В начало страницы

Описание API


Данное описание актуально для текущей версии 1.1.1 JavaScript компонента.


Пространство имен


Для уменьшения вероятности конфликта имен с другими JavaScript библиотеками, все компоненты проекта JSGadget входят в единое пространство имен JSGadget.

В начало страницы

Конструктор JSGadget.Counter()


Вызов: var counter = new JSGadget.Counter(owner, options, val);

counter - переменная, которой присваивается созданный объект.

owner - обязательный параметр, представляющий собой родительский блочный элемент HTML страницы, обычно <div>. Родитель может передаваться как в виде объекта jQuery, так и в виде строки, понятной библиотеке jQuery.

options - необязательный параметр, представляющий собой объект, определяющий различные опции. Обект options должен содержать только те поля, значения которых отличаются от значений по умолчанию. Структура объекта options и значения полей по умолчанию:

{
  digits: 1, //разрядность
  color: "black", //цвет
  aniMs: 500 //длительность анимации перевода цифры (мс)
};

val - необязательный параметр, представляющий собой начальное отображаемое значение в виде строки (по умолчанию - 0). Отображаемые символы: цифры с 0 по 9. Если данный параметр не является строкой, то предепринимается попытка преобразования его к строке. Если длина строки меньше заданной разрядности, то она дополняется нулями в начале. Если длина строки больше заданной разрядности, то она усекается с конца. Если данный параметр используется, то параметр options тоже должен присутствовать, хотя бы в виде пустого объекта {}.

В начало страницы

Функция setVal()


Данная функция вызывается для установки отображаемого значения.

Вызов: counter.setVal(val);

counter - переменная, которой был присвоен объект, созданный при вызове конструктора.

val - новое отображаемое значение в виде строки. Отображаемые символы: цифры с 0 по 9. Если данный параметр не является строкой, то предепринимается попытка преобразования его к строке. Если длина строки меньше заданной разрядности, то она дополняется нулями в начале. Если длина строки больше заданной разрядности, то она усекается с конца.

В начало страницы

Функция inc()


Данная функция вызывается для инкрементирования отображаемого значения.

Вызов: counter.inc();

counter - переменная, которой был присвоен объект, созданный при вызове конструктора.

В начало страницы

Функция dec()


Данная функция вызывается для декрементирования отображаемого значения.

Вызов: counter.dec();

counter - переменная, которой был присвоен объект, созданный при вызове конструктора.

В начало страницы

История версий


1.1.1
Первый релиз JavaScript компонента JSCounter.

В начало страницы
Демонстрация