Виджет часов на JS + CSS 3. Часть 2

Итак в предыдущей статье мы создали при помощи HTML и CSS3 макет часов, сегодня мы заставим его двигаться.
Смотрим код ниже и коментарии :

function Clock () {
 if (!(this instanceof Clock)) {
  return new Clock();
 }
 // Функция для поворота элемента на заданный градус
 var rotate = function (o, d) {
  o.style.webkitTransform = 'rotate('+d+'deg)';
  o.style.mozTransform = 'rotate('+d+'deg)';
  o.style.msTransform = 'rotate('+d+'deg)';
  o.style.oTransform = 'rotate('+d+'deg)';
  o.style.transform = 'rotate('+d+'deg)';
 };

 // Приватный объект для хранения DOM элементов необходимых при работе плагина
 var dom = {};
 // Верхний элемент часов
 dom.clock = document.createElement('DIV');
 dom.clock.className = 'clock';

 // Создадим набор чисел для циферблата, и "провернем" их что бы убрать из нашего CSS блоки вида span + span
 var number;
 for (var i = 1; i <= 12; i++) {
  number = document.createElement('SPAN');
  rotate(number, (i%12)*30);
  number.innerHTML = i;
  dom.clock.appendChild(number);
 };

 var d = new Date(), // текущее время
  s = d.getSeconds(), // секунды
  m = d.getMinutes(), // минуты
  h = d.getHours(), // часы
  timer; 
 // Часовая стрелка
 dom.hour = document.createElement('DIV');
 dom.hour.className = 'clock-hour';
 dom.clock.appendChild(dom.hour);

 // Минутная стрелка
 dom.minute = document.createElement('DIV');
 dom.minute.className = 'clock-minute';
 dom.clock.appendChild(dom.minute);

 // Секундная стрелка
 dom.second = document.createElement('DIV');
 dom.second.className = 'clock-second';
 dom.clock.appendChild(dom.second);

 // Функция хода часов
 var tick = function () {
  var o = {};
  // увеличиваем время на 1 секунда (++s) и обнуляем его если оно равно 60 (s%60)
  if (!(s = ++s%60)) {
   // Если секунды были обнулены проводим те же действия с минутами
   if (!(m = ++m%60)) {
    // И с часами, только их обнуляем при равенстве 24
    h = ++h%24
    o.hours = h;
   }
   o.minutes = m;
  }
  o.seconds = s;
  // Изменения во времени ложим в обьект и передаем дальше
  self.set(o);
 };


 // Обьект публичных методов
 var self = {
  // Запускаем часы
  start : function () {
   if (timer) clearInterval(timer);
   timer = setInterval(tick, 1000);
  },
  // Останавливаем ход часов
  stop : function () {
   if (timer) clearInterval(timer);
  },
  // Получить текущее время
  get : function (o) {
   return {seconds:s,minuutes:m,hours:h};
  },
  // Устанавливаем времея
  set : function (o) {
   if (!o) return;
   if (o.seconds != undefined) {
    s = o.seconds;
    rotate(dom.second, o.seconds*6);
   }

   if (o.minutes != undefined) {
    m = o.minutes;
    rotate(dom.minute, o.minutes*6);
   }

   if (o.hours != undefined) {
    h = o.hours;
    rotate(dom.hour, (o.hours%12)*30);
   }
  },
  // Ссылка на верхний элемент часов
  elem : dom.clock
 };
 // Устанавливаем текущее время
 self.set({seconds:s, minutes:m, hours:h});
 // Запускаем часы
 self.start();
 // Возвращаем обьект часов
 return self;
}

Использование :

var c = new Clock();
document.getElementsByTagName('BODY')[0].appendChild(c.elem);

I

II

III

IV

V

VI

VII

VIII

IX

X

XI

XII