Веб-дизайнеру
Веб-разработчику
Дополнительно
Цифровые часы JQuery и CSS3 с датой!
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня мы хотим, создать простые цифровые часы jquery с датой и временем. Сделаем мы это с помощью небольшого скрипта и CSS3 кода. Также мы будем иметь для красивый эффект анимации – моргание двоеточия. Это только начало!
Такие современные часы будут особенно полезны посетителям Вашего сайта, которые всегда будут видеть часы у себя на виду. Ранее мы уже делали часы HTML5 на Canvas. Что же, приступим…
HTML код
Разметка действительно простая, гибкая и легко адаптируется к любым ситуациям, которые могут возникнуть. Создаем div с классом clock – это наша обертка. Далее идет пустой div с классом Date, в который будет записана информация о текущей дате.
И в конце концов неупорядоченный список ul, который будет включать в себя часы, минуты и секунды.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="clock"> <div id="Date"></div> <ul> <li id="hours"></li> <li id="point">:</li> <li id="min"></li> <li id="point">:</li> <li id="sec"></li> </ul> </div> |
CSS стили
Теперь Вы можете видеть основные стили. К стилизации css часов нужно подойти творчески, и конечно же, Вы можете задать любые желаемые стили, цвет, фон и так далее… Ниже представлен пример того, что можно получить в итоге.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.container { width: 960px; margin: 0 auto; overflow: hidden; } .clock { width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; } #Date { font-family: Calibri, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; } ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; } ul li { display:inline; font-size:8em; text-align:center; font-family: Calibri, sans-serif; text-shadow:0 0 5px #00c6ff; } #point { position:relative; bottom:6px; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; } @-webkit-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } } @-moz-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } } |
На этом со стилями все, перейдем к скрипту jquery.
JQuery скрипт
В первую очередь, необходимо подключить библиотеку JQuery:
|
1 |
<script type="text/javascript" src="/jquery-1.6.4.min.js"></script> |
И вот сам скрипт часов, который можно добавить в html страницу или лучше, конечно, вынести в отдельный файл js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
$(document).ready(function() { // Create two variable with the names of the months and days in an array var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] // Create a newDate() object var newDate = new Date(); // Extract the current date from Date object newDate.setDate(newDate.getDate()); // Output the day, date, month and year $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear()); setInterval( function() { // Create a newDate() object and extract the seconds of the current time on the visitor's var seconds = new Date().getSeconds(); // Add a leading zero to seconds value $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); },1000); setInterval( function() { // Create a newDate() object and extract the minutes of the current time on the visitor's var minutes = new Date().getMinutes(); // Add a leading zero to the minutes value $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); },1000); setInterval( function() { // Create a newDate() object and extract the hours of the current time on the visitor's var hours = new Date().getHours(); // Add a leading zero to the hours value $("#hours").html(( hours < 10 ? "0" : "" ) + hours); }, 1000); }); |
Используемые параметры скрипта
new Date()– выводит значение текущей даты и времени в браузере компьютера пользователя;setDate()– задает день месяца (от 1 до 31), по местному времени;getDate()– возвращает день месяца (от 1 до 31) на указанную дату, в соответствии с местным временем;getSeconds(),getMinutes()иgetHours()– выводит значение текущего времени (часы, минуты и секунды) в браузере компьютера пользователя;( seconds < 10 ? "0" : "" ) + seconds)- добавление нуля к значениям секунд, минут и часов. Символы?и:,используемые выше, включают тройной оператор. Это специальный оператор, который возвращает значение до двоеточия, если условие перед запросом (?)true, или значение после двоеточия, если условиеfalse;setInterval- является стандартной функцией JavaScript. Необходима для выполнения и в миллисекундах.
Заключение
Наконец, мы создали простые цифровые css часы с использованием функций JQuery. Если у кого есть какие-либо вопросы, замечания или комментарии, пожалуйста, дайте мне знать! Успехов 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
Отличные часики!
Вы просто мастер своего дела!
Очень рад что нашёл Ваш сайт, как раз то что мне нужно.
Если интересно, то нашёл Вас через гугл по запросу “заголовки PSD”.
/
Спасибо большое за приятные слова)
Спасибо за такой ценный ресурс! Много примеров пригодилось, до этого попадались постоянно мусорные сайты, с кучей рекламы, “левыми” баннерокрутилками, и содержимым 200x годов. У Вас всегда свежий, рабочий, а главное нужный контент!