Часы с помощью css3 и jQuery

​

Создадим часы, используя библиотеку jquery и css3 свойство transform: rotate. Transform также может принимать значения scale, skew и translate. Все эти значения могут анимироваться с помощью transition, аналогично скриптам jQuery. В данной статье мы подробно рассмотрим, как создать часы используя transform.

Как и с помощью jquery, анимировать практически любое css свойство стало возможным с помощью transition. Можно придумать очень интересные эффекты, основанные на связке transition и :hover. Конечно, воспроизвести всё то, на что способна библиотека jquery не получится, но некоторые оригинальные эффекты стали возможными с помощью css.

Графика

​

Для начала нам нужна графика для часов. Необходимы 4 элемента: стрелки часов, минут, секунд и сама панель.

HTML

Разметка представляет собой собой простой маркированный список. Каждый элемент списка является подвижной частью механизма часов (стрелки) с соответствующими id.

CSS

#clock {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 20px auto 0 auto;
  background: url(clockface.jpg);
  list-style: none;
}

#sec, #min, #hour {
  position: absolute;
  width: 30px;
  height: 600px;
  top: 0px;
  left: 285px;
}

#sec {
  background: url(sechand.png);
  z-index: 3;
}
   
#min {
  background: url(minhand.png);
  z-index: 2;
}
   
#hour {
  background: url(hourhand.png);
  z-index: 1;
}

CSS достаточно простой. Поскольку стрелки часов, минут и секунд имеют одинаковые размеры и спозиционированы относительно одного блока, можно объединить стили для них в одно правило, тем самым уменьшив css. Внешний контейнер ul позиционирован относительно, так что стрелки часов будут перемещаться с помощью transform только внутри него. Свойство rotate не влияет на поведение элементов в потоке, поэтому при повороте блоки со стрелками будут расположены по-прежнему в контейнере ul.

jQuery и JavaScript

1. Получить информацию о времени для часов
2. Рассчитать и установить с помощью CSS угол поворота для каждого элемента
3. Обновлять динамически стиль через определенный интервал времени

Стоит отметить, что jquery не имеет проблем с обработкой CSS3. В нашем случае свойства присваиваются динамически, а не берутся из общих стилей, поэтому весь код успешно проходит валидатор 2.1!

Получаем время

Возможно вывести информацию о текущем времени с помощью PHP, и когда я начал писать скрипт, вариант с PHP был первой моей мыслью. Затем я пришел к выводу, что лучше для этого подойдет javascript. Весь необходимый функционал для получения даты и времени в javascript доступен через объект Date. Имейте ввиду, что время полученное в этом случае локальное, а не серверное!

Для получения информации о времени будем использовать объект Date. Компоненты времени присвоим в соответствующие переменные. Каждой из трех составляющих часов мы можем назначить свой временной интервал с помощью методов GetSeconds, GetMinutes и GetHours:

var seconds = new Date().getSeconds();

Этот код будет присваивать в переменную seconds число от 0 до 59.

Получаем угол

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

var sdegree = seconds * 6;

Часовая стрелка работает по другому сценарию. Инкремент для часов равен 12, таким образом каждый час стрелка поворачивается на 30 градусов (360/12=30). Часы были бы слишком простыми, если бы стрелка могла поворачиваться на 30 градусов каждый час. Часовая стрелка должна двигаться маленькими приращениями в соответствии с минутной стрелкой. Например в 4:30 она должна находиться на полпути между 4 и 5 часами. Реализуем это так:

var hdegree = hours * 30 + (mins / 2);

Здесь добавляем значение равное количеству минут деленных на 2, что даст ряд чисел от 0.5 до 29.5 (свойство rotate может обрабатывать числа с плавающей точкой), это как раз задаст инкремент в 30 градусов через каждый час.

Установка стилей

Стиль для свойства rotate:

#sec {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

Дальше применяем jquery (если вы используете версию jquery >= 1.8 то вставлять в код вендороные префиксы не нужно):

 $("#sec").css({
  "transform": "rotate(45deg)"
});

С использованием вышеприведенного синтаксиса в jquery возникает проблема с переменной “sdegree”(которая содержит угол поворота). Сначала я пытался вставить переменную напрямую в скобки, но такой способ не работал. Правильный вариант:

var srotate = "rotate(" + sdegree + "deg)";

И jquery превратит это в:

$("#sec").css({ "transform": srotate });

Складываем воедино

Весь jquery код:

$(function() {
 
      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";
      
      $("#sec").css({ "transform": srotate });
          
      }, 1000 );
      
      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";
      
      $("#hour").css({ "transform": hrotate});
          
      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";
      
      $("#min").css({ "transform" : mrotate });
          
      }, 1000 );
});

Функция setInterval является таймером и выполняется каждую секунду. Переменные, которые получают время из объекта Date, находятся внутри таймера и каждую секунду обновляют свои значения. Без функции setInterval часы превратились бы в бесполезную картинку с показателем времени полученным при первоначальной загрузки страницы.

Теперь часы полностью готовы к работе.

Альтернативные варианты

Flash является очевидным решением, но в том случаем если у вас есть код ActionScript. Тем не менее, я бы не стал использовать этот вариант. Возможно даже использовать PHP совместно с GD image библиотекой для поворота частей часов, но это уже выше моих сил.

Daniel Bakan написал похожую статью “Как написать полноэкранное приложение оптимизированное под устройства IOS” в которой он создает аналогичные часы. Если вас это заинтересовало, можете прочитать статью здесь.

Заключение

Мы рассмотрели практическое применение CSS3 свойства rotate. Это лишь малая часть того, что можно сделать с помощью него. Очень интересные эффекты можно создать при наведении и масштабировании элементов.