Инструкция
myClockJS - прототип CSS3 часов с минимальным использованием подгружаемых графических элементов. В текущей версии их нет совсем.
Объекты часов и индикатора по возможности разнесены для масштабируемости.
Работает только в современных браузерах.
Ещё есть прототип CSS часов myClockCSS.
Исходники на GitHub myClockJS.
Текущие возможности:
- Инициализация из HTML, с возможностью дальнейшего добавления/изменения параметров в JS.
- Положение всех стрелок пропорционально текущему времени на компьютере. 12 сегментов для минут/часов.
- Скорость отображения секундной стрелки: 3 значения, от обычной секунды до непрерывного движения.
- Произвольные символы часов.
- Отключение отображения символов часов.
- Отключение отображение мелких делений по периметру часов. Есть рабочие варианты, но баги детектед.
- CSS настроен на максимальную масштабируемость элементов, в % от исходного контейнера.
- Прототип.
Планы:
- Добавить поддержку другими браузерами.
- Подумать, что делать с IE.
- Прочесать код.
- Увеличить число функций текущего индикатора и начать другие.
- Увеличить число функций текущих часов.
Из недр кода:
<div class="clock4 myClockJS"></div>
<div class="clock2 myClockJS" data-segments="111" data-second_delay="200"></div>
<div class="clock3 myClockJS" data-segments="110" data-second_delay="50" data-symbols="I,II,III,IV,V,VI,VII,VIII,IX,X,XI,XII"></div>
<div class="clock1 myClockJS" data-symbols_show="false"></div>
<!--
data-second_delay="200" // 50 > unlimited; 200 > by microsegments; 1000 > default
data-symbols="I,II,III,IV,V,VI,VII,VIII,IX,X,XI,XII" // set any symbols, delimited by ","; "1,2,3,4,5,6,7,8,9,10,11,12" > default
data-symbols_show="false" // hide symbols, "true" > default
data-segments="111" // mask for show segment types; true > 1; false > 0; [hour,seconds,microseconds] segments; "110" by default
some bugs here; now working samples >>
0 > work as [000]; 1 > work as [111]; 10 > work as [110]; 100 > work as [100]
-->