Гаджет JSClock - стрелочные часы


Оглавление



Введение


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

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


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


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


Минимализм


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

HTML

CSS

JavaScript

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

Рамки


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

HTML

CSS

JavaScript

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

Круглые рамки


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

HTML

CSS

JavaScript

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

Эллипс


В этом примере показано, как придать циферблату часов эллиптическую форму.

HTML

CSS

JavaScript

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

Циферблат


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

HTML

CSS

JavaScript

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

Стрелки


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

HTML

CSS

JavaScript

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

Надпись


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

HTML

CSS

JavaScript

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

Локальное время и UTC


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

HTML

CSS

JavaScript

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

JSClock + SVG


В этом примере показано, как c помощью SVG можно создать фантазийное обрамление часов.

HTML

CSS

JavaScript

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

JSClock + SVG анимация


В этом примере показано, как разнообразить оформление часов c помощью SVG анимации.

HTML

CSS

JavaScript

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

Описание API


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


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


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

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

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


Вызов: var clock = new JSGadget.Clock(owner, options, onDateChange);

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

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

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

{
  utc: false, //флаг использования времени UTC вместо локального
  title: "", //надпись на циферблате
  gap: 5, //зазор вокруг шкалы циферблата
  dh: { //часовые деления циферблата
    c: "black", //цвет
    w: 2, //толщина
    l: 10, //длина
    f: "l" //форма: l-линия, t-треугольник, c-круг, n-не отрисовывать
  },
  dm: { //минутные деления циферблата
    c: "black", //цвет
    w: 1, //толщина
    l: 4, //длина
    f: "l" //форма: l-линия, t-треугольник, c-круг, n-не отрисовывать
  },
  hh: { //часовая стрелка
    c: "black", //цвет
    w: 3, //толщина
    l: 25, //длина
    l0: 5, //длина обратного конца
    f: "l" //форма: l-линия, t-треугольник
  },
  mh: { //минутная стрелка
    c: "black", //цвет
    w: 2, //толщина
    l: 30, //длина
    l0: 8, //длина обратного конца
    cr: 3, //радиус центрального круга
    f: "l" //форма: l-линия, t-треугольник
  },
  sh: { //секундная стрелка
    c: "red", //цвет
    w: 1, //толщина
    l: 35, //длина
    l0: 10, //длина обратного конца
    cr: 2, //радиус центрального круга
    f: "l" //форма: l-линия, t-треугольник
  },
  font: { //шрифт
    size: 12, //размер в px, опционально начертание (напр. "bold 16")
    family: "sans-serif" //семейство
  }
};
Все размеры, за исключением размера шрифта, задаются в процентах от ширины и высоты родительского элемента.

onDateChange - необязательный параметр, представляющий собой функцию обратного вызова, вызываемую при смене даты. Если данный параметр используется, то параметр options тоже должен присутствовать, хотя бы в виде пустого объекта {}.

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

Функция resize()


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

Вызов: clock.resize();

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

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

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


1.2.1
JavaScript компонент JSClock вошел в состав проекта JSGadget и его пространства имен JSGadget

До 1.2.1
До версии 1.2.1 JavaScript компонент Clock существовал, как самостоятельный проект.

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