цифpoвыe чacы нa CSSЗ и JQUERY

 Привет, друзья. Пробуем сегодня подключить в блоге красивые электронные часы, отображающие  дату и точное время. Сделаем это c пoмoщью  jQuerу и CSS  aнимaции. Приведённый ниже код, можно легко настроить под любой дизайн. И это разберём позже. А пока просто скопируйте его и установите в этом редакторе для просмотра. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {


var monthNames = [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ]; 
var dayNames= ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"]



var newDate = new Date();


newDate.setDate(newDate.getDate());


$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());


setInterval( function() {

var seconds = new Date().getSeconds();

$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);


setInterval( function() {

var minutes = new Date().getMinutes();

$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);


setInterval( function() {

var hours = new Date().getHours();

$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
}); 
</script>
<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>
<style>
.container {width: 560px; margin: 0 auto; overflow: hidden;}
.clock {width:400px; margin:0 auto; padding:30px; border:2px solid #F44336; color:#FFF; }


#Date { font-family: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #F44336; }
ul { width:400px; margin:0 auto; padding:0px; list-style:none; text-align:center; }
ul li { display:inline; font-size:4em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px #004D40; }
#point { position:relative; -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 20 px#283593;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #283593; }
}
@-moz-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #283593;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #283593; }    
}
</style>

Разберём настройки часов

В коде присутствует  скрипт библиотеки jQuerу. Я отметила его цветом. Во многих шаблон Блоггер он уже присутствует. Перейдите по предложенной ссылке, чтобы понять о чём идёт речь. Так что, эту строку нужно прото удалить.

Ну и остальное сам внешний вид электронных часов

width: 560px; -ширина всего контейнера

width:400px; - замените в двух местах ширину отображения даты и время

border:2px solid #F44336;- толщина рамки контейнера и цвет (можно убрать или поменять)

 color:#FFF; -цвет шрифта (установлен белый ) чтобы залить меняйте на желаемый.

 font-size:36px;-размер шрифта даты

text-shadow:0 0 5px #F44336; - тень вокруг текста в нескольких местах (можно изменить)

ffont-size:4em;-размер цифр (можно изменить)

#283593;- цвет мигающих точек (меняем в четырёх местах)

Всему контейнеру электронных часов можно задать нужный фон. Добавьте в класс ."container" значение  background: 

Допустим так .container {width: 560px;background: #2639fa; margin: 0 auto; overflow: hidden;}

Как видим, если подойти с фантазией, можно создать свои уникальные часики, изменив всего лишь стили Css.

Готовый код устанавливайте в гаджет HTML/JavaScript. А поиграться с настройками, можно в самом редакторе, ссылка на который в начале статьи.

Спасибо за внимание и до встречи