Главная›CSS-верстка

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

41 комментарий

Цифровые часы

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

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

Примеры

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

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

Часы работают полностью на 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

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

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

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

* * *

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

Смотрите также

Динамическое изменение размера шрифта на jQuery

25 комментариев

Публикация статьи “Умные динамические колонки с применением CSS и jQuery” стала поводом для написания сегодняшнего поста. Суть очень схожа и речь здесь пойдет про размер шрифта. Задача – реализовать динамическое ...

Умные динамические колонки с применением CSS и jQuery

54 комментария

Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют “резиновыми”). Недостатком фиксированных колонок при их использовании в “резиновом” ...

Переключатель размера шрифта сайта на jQuery

40 комментариев

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

jQuery Form Styler - плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

2614 комментариев

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; ...

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

  1. Сергей
    29 апреля 2011 г. в 18:25

    Прикольно, возможно продублирую у себя, если еще какой прибамбас придумаю :)

  2. smirnoff
    29 апреля 2011 г. в 18:32

    Действительно,вещь бесполезная для серьезных блогов или сайтов , но решение интересное и достойно ,найдет своих пользователей несомненно!

  3. Dimox
    29 апреля 2011 г. в 18:37

    Тем, кому хочется убрать мигание – делается это просто. Нужно из скрипта удалить следующий код:

    $(digit+'.colon').css({opacity: 1}).each(function() {
	$(this).delay(400).animate({opacity: 0},250);
})
  4. Андрей Гурылёв
    29 апреля 2011 г. в 19:08

    Очень странно мигание происходит. Этих самых двоеточий. Как будто в два этапа. На первом этапе медленно и красиво появляется, аналогично и уходит, а на втором этапе практически коротким мгновенным щелчком это происходит. Секунды делятся на чётные и нечётные таким образом, а должна быть каждая секунда одинаковой.
    Браузер, если что 12.0.742.12 dev

    1. Dimox
      29 апреля 2011 г. в 19:35 / ответ на коммент Андрей Гурылёв

      Я проверял во всех популярных браузерах (в финальных релизах) – ничего такого не заметил.

    2. Nodar Giorgadze
      30 апреля 2011 г. в 06:12 / ответ на коммент Андрей Гурылёв

      Точки просто “медленно” затухают, а потом резко появляются, никаких этапов тоже не заметил.

  5. alexpts
    29 апреля 2011 г. в 19:12

    Мне нравится )

  6. Денис
    29 апреля 2011 г. в 19:46

    Вообще офигеть :)

  7. Sonikelf
    30 апреля 2011 г. в 15:56

    Красиво, но куда и зачем притулить даже не знаю.. :)

  8. Антон
    1 мая 2011 г. в 16:35

    главное, Чистом CSS ;)

  9. EnChikiben
    4 мая 2011 г. в 15:23

    Чего прикольно простые часы ни чего не обычного и сложного…

  10. viktor37
    9 мая 2011 г. в 10:38

    Да не чё так,классно получилось.

  11. Вадим
    15 мая 2011 г. в 21:59

    Часы конечно хорошие, но секундные цифры лишние, т.к две точки и есть секунды:)

    1. egorr
      16 мая 2011 г. в 14:43 / ответ на коммент Вадим

      Автором двигал азарт, а не практическая надобность. Он бы и десятые прицепил…

  12. Евгений Воробьев
    4 июля 2011 г. в 18:56

    Ахха!
    Классные часики!
    Хотя правда пользы от них 0))

  13. Djinn
    6 июля 2011 г. в 20:31

    Здравствуйте! Скачал архив… а как устанавливать не нашел…интересует установка на dle…если можно, пошагово…

    1. egorr
      7 июля 2011 г. в 11:25 / ответ на коммент Djinn

      О как! И полы вам дома пусть придет помыть!

      1. Djinn
        7 июля 2011 г. в 12:38 / ответ на коммент egorr

        Нет, лучше вам. Рас вы тан нуждаетесь…

      2. Djinn
        7 июля 2011 г. в 12:41 / ответ на коммент egorr

        И не забудь указать на мою безграмотность… умник…

  14. Escaflowne
    26 сентября 2011 г. в 10:32

    Установил на 4bike.org.ua респект автору !

  15. kiji
    9 октября 2011 г. в 13:08

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

    1. Dimox
      9 октября 2011 г. в 13:20 / ответ на коммент kiji

      Как-то, наверное, можно. Нужно дорабатывать скрипт.

  16. Leestex
    5 декабря 2011 г. в 08:21

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

    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-ти…
    смысл тогда этих трех строк? :)

    1. Dimox
      5 декабря 2011 г. в 10:55 / ответ на коммент Leestex

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

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

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

    2. Антон
      5 декабря 2011 г. в 15:40 / ответ на коммент Leestex

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

  17. Max
    19 февраля 2012 г. в 03:08

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

    1. Dimox
      19 февраля 2012 г. в 11:26 / ответ на коммент Max

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

      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.

  18. kolia
    26 февраля 2012 г. в 23:41

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

  19. Эрик
    21 августа 2012 г. в 00:30

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

  20. Marat
    8 апреля 2013 г. в 01:34

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

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

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

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.