Цифровые часы на чистом CSS и jQuery

Цифровые часы на чистом CSS и jQuery

Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки с того самого счетчика. Эта идея никак не давала мне покоя, пока я не воплотил ее в реальность.

Честно говоря, я смутно представляю пользу от присутствия таких часов на сайте, но время бездарно потрачено, и не пропадать же добру, поэтому выкладываю в паблик то, что у меня вышло. Не исключено же, что кому-нибудь пригодится.

Примеры

Сделал отдельную страницу с десятком примеров. Из-за того, что они все на одной странице, процессор вашего компьютера может немного поднапрячься. Во втором примере я сделал точную копию цифр со счетчика ли.ру.

Как это работает

Часы работают полностью на jQuery. Сами же цифры рисуются на чистом CSS (т.е. никаких картинок и никакого текста). Каждая цифра состоит из 25 блоков, которые с помощью CSS выстраиваются в квадрат 5×5.

Вот так выглядит формируемый скриптом HTML-код каждой цифры:

<span>
	<b class="c11"></b><b class="c12"></b><b class="c13"></b><b class="c14"></b><b class="c15"></b>
	<b class="c21"></b><b class="c22"></b><b class="c23"></b><b class="c24"></b><b class="c25"></b>
	<b class="c31"></b><b class="c32"></b><b class="c33"></b><b class="c34"></b><b class="c35"></b>
	<b class="c41"></b><b class="c42"></b><b class="c43"></b><b class="c44"></b><b class="c45"></b>
	<b class="c51"></b><b class="c52"></b><b class="c53"></b><b class="c54"></b><b class="c55"></b>
</span>

Реализация данных цифровых часов мне самому очень понравилась, потому что:

  • Я в очередной раз попрактиковался на jQuery, а это доставляет мне большое удовольствие.
  • Благодаря CSS, во-первых, они легко масштабируются без потери качества, во-вторых, с помощью таких CSS-свойств, как box-shadow и border-radius, их можно здорово приукрасить, добавить различные эффекты, и вариантов оформления можно придумать просто уйму, лишь бы хватило фантазии.
  • Все это дело в сумме занимает всего несколько килобайт (за исключением фреймворка jQuery).
  • Работает кроссбраузерно, даже в IE6. В нем, правда, точки не мигают почему-то… ну это его проблемы.

Скачать

Для скачивания выкладываю только первый пример с вышеуказанной страницы с примерами, который содержит минимально необходимые стили.

Цифровые часы на чистом CSS и jQuery

Загрузок: 3011 | Размер: 2 Кб

Если вы где-то на своих сайтах поставите такие часы и оформите как-то оригинально, скидывайте в комментариях ссылки на примеры.

P.S. Фух, ну все, душу отвел =)

* * *

Хостинг-провайдер HOSTLIFE предлагает быстрый и надежный хостинг: виртуальный хостинг, виртуальный выделенные сервера (VPS/VDS), выделенные сервера. Гарантируется 30-дней период возврата средств. Скидки при оплате на большой срок.

Комментарии (41)
  1. 1
    kiji

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

  2. 3
    Leestex

    Идея — супер.
    Вот только я не пойму смысла трех строк:


    hou = (hou<10)?0+hou:hou;
    min = (min<10)?0+min:min;
    sec = (sec<10)?0+sec:sec;

    По сути — во всех трех случаях при любом условии будут одни и те же значения.

    К примеру:
    hou = 5 удовлетворяет условие, и будет равняться 0+5 = 5.
    если же hou = 11, условие не удовлетворяется, в итоге hou будет равняться всё также 11-ти…
    смысл тогда этих трех строк? :)

    • 4

      Нет, ты не прав.

      К примеру, время 9 часов, 7 минут и 5 секунд. Оно отобразится вот так: 09:07:05. Если же удалить эти 3 строки, то оно отобразится вот так: 9:7:5.

      Т.е. 0 не прибавляется к числу, а ставится рядом с цифрой, если эта цифра меньше 10.

    • 5
      Антон

      Как я понимаю, hou, min и sec это не числовые переменные, а строковые, а по сему + означает не сложение чисел 0 и конкретного числа секунд, минут или часов, а конкатенацию этих строк. В общем, учите javascript ;-)

  3. 6
    Max

    Доброго времени суток. Я совсем новичок в этом деле, поэтому хотел спросить у знатоков) Я скачал ваши часы, но не знаю как поменять размер/цвет и переместить… Пробовал команды:
    and . Я явно делаю не то или не так. Помогите пожалуйста.

    • 7

      Размер меняется в трех местах:

      1) width у .time span
      2) width у .time span.colon
      3) width и height и .time .colon b, .time span b

      При этом ширина у .time span должна быть обязательно в 5 раз больше ширины и высоты, указанных у .time span.colon и .time .colon b, .time span b.

      Цвет меняется через параметр background у .time .colon b, .time span b.

      Для сдвига нужно использовать margin для .time.

  4. 8
    kolia

    не плохо!я придумал свои часы на javascript и css, ещё не зная про этот сайт
    Думаю многие знакомы со временем в javascript,примеры идущих часов на javascript можно поискать в интернете.
    Моя фишка в том что использовал @font-face через который можно подгрузить любой стиль. «Электронный» стиль я нашёл на этом сайте http://xfont.ru/
    собственно пример часов можете посмотреть на моём сайте http://earnings4you.ru/

  5. 9
    Эрик

    Спасибо)) приличная работа проделана! Пригодились)

  6. 10
    Marat

    Я вот мучаюсь как бы сделать, чтоб они показывали конкретное время, точнее чтоб задать например московское время и неважно что там у пользователя или на сервере, всегда чтоб показывало именно московское. То есть как бы привязка к часовому поясу.
    И ещё вариант чтоб автоматом показывало время относительно часового пояса посетителя. То есть задано например московское время, а посетитель видит какое будет у него в это же время по его часовому поясу.

    Вот было бы неплохо, если бы доработать такие варианты…

Ваш комментарий