Часы на сайт — один из скриптов, который может показаться бесполезным, так как у всех есть системные часы. Однако некоторые хотят поставить такие часы как элемент дизайна. Но эффект эксклюзивности будет достигнут, только если эти часы будут уникальными, сделанными в цветовой гамме и стиле сайта. Поэтому копировать готовые часы у кого-то чаще всего будет неуместно, лучше сделать свои. Способов довольно много:
- Можно сделать часы во flash, но не у всех есть среда разработки flash (вариант использования не лицензионной программы не рассматриваем).
- А можно сделать с помощью javascript. Правда если речь идет о стрелочных часах, то стрелки часто делаются с помощью рисования линий или точек, что не всегда красиво.
- Есть еще SVG — на мой взгляд за этим форматом будущее. К сожалению c кроссбраузерностью этого решения пока не все гладко.
- Ну и еще вариант — использовать javascript и стрелки отображаемые с помощью спрайтов. Его и рассмотрим. Способ тоже не без минусов — получается довольно большой объем файлов стрелок (3 стрелки в приведенном ниже примере занимают чуть больше 100 кбайт). Хорошо что интернет сейчас быстрый у многих 🙂 Результат изображен ниже.
Используется 5 графических элементов. Фон, логотип для часов, и 3 стрелки. Другими словами, можно легко сделать любой внешний вид стрелок и фона, используя лишь графический редактор.
Исходники примера можно скачать здесь.
С изменением фона и логотипа все просто, а как быстро и без рутины подготовить спрайты для своих уникальных стрелок, можно прочитать в посте про клонирование объектов в векторном редакторе. Впрочем, подсказка есть в исходниках — там можно заметить два файла SVG — один с одиночными стрелками, другой с клонированными (наклон с шагом 6 градусов). Для создания стрелок использовал векторный редактор Inkscape 0.48.