Цифровые часы JQuery и CSS3 с датой! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryЦифровые часы JQuery и CSS3 с датой!
Дата: 24.06.2013 в 22:38 | Просмотров: 10427

Цифровые часы JQuery и CSS3 с датой!

часы jquery, css часы
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы хотим, создать простые цифровые часы jquery с датой и временем. Сделаем мы это с помощью небольшого скрипта и CSS3 кода. Также мы будем иметь для красивый эффект анимации – моргание двоеточия. Это только начало!

Такие современные часы будут особенно полезны посетителям Вашего сайта, которые всегда будут видеть часы у себя на виду. Ранее мы уже делали часы HTML5 на Canvas. Что же, приступим…

HTML код

Разметка действительно простая, гибкая и легко адаптируется к любым ситуациям, которые могут возникнуть. Создаем div с классом clock – это наша обертка. Далее идет пустой div с классом Date, в который будет записана информация о текущей дате.

И в конце концов неупорядоченный список ul, который будет включать в себя часы, минуты и секунды.

CSS стили

Теперь Вы можете видеть основные стили. К стилизации css часов нужно подойти творчески, и конечно же, Вы можете задать любые желаемые стили, цвет, фон и так далее… Ниже представлен пример того, что можно получить в итоге.

На этом со стилями все, перейдем к скрипту jquery.

JQuery скрипт

В первую очередь, необходимо подключить библиотеку JQuery:

И вот сам скрипт часов, который можно добавить в html страницу или лучше, конечно, вынести в отдельный файл js.

Используемые параметры скрипта

  • new Date() – выводит значение текущей даты и времени в браузере компьютера пользователя;
  • setDate() – задает день месяца (от 1 до 31), по местному времени;
  • getDate() – возвращает день месяца (от 1 до 31) на указанную дату, в соответствии с местным временем;
  • getSeconds(), getMinutes() и getHours() – выводит значение текущего времени (часы, минуты и секунды) в браузере компьютера пользователя;
  • ( seconds < 10 ? "0" : "" ) + seconds) - добавление нуля к значениям секунд, минут и часов. Символы ? и : ,используемые выше, включают тройной оператор. Это специальный оператор, который возвращает значение до двоеточия, если условие перед запросом (?) true, или значение после двоеточия, если условие false;
  • setInterval - является стандартной функцией JavaScript. Необходима для выполнения и в миллисекундах.

Заключение

Наконец, мы создали простые цифровые css часы с использованием функций JQuery. Если у кого есть какие-либо вопросы, замечания или комментарии, пожалуйста, дайте мне знать! Успехов :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.alessioatzeni.com/blog/css3-digital-clock-with-jquery/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Владимир:

      Отличные часики!

    1. Вы просто мастер своего дела!

      Очень рад что нашёл Ваш сайт, как раз то что мне нужно.

      Если интересно, то нашёл Вас через гугл по запросу “заголовки PSD”.

    1. Спасибо за такой ценный ресурс! Много примеров пригодилось, до этого попадались постоянно мусорные сайты, с кучей рекламы, “левыми” баннерокрутилками, и содержимым 200x годов. У Вас всегда свежий, рабочий, а главное нужный контент! :smile:

Добавить комментарий