циф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. А поиграться с настройками, можно в самом редакторе, ссылка на который в начале статьи.

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

11 комментариев:

  1. Потрясающие часы! Спасибо, Виктория! Только вот бы были поярче!

    ОтветитьУдалить
  2. Ирина, а для кого я в конце статьи все стили расписала, чтобы нужный вид предать. Как говорится -Бери и делай на свой вкус.Хоть красный, хоть белый, хоть разноцветный.

    ОтветитьУдалить
  3. Шикарнейшая фишка! Блеск! Сумел бы - воткнул бы в экран.

    ОтветитьУдалить
    Ответы
    1. Семён. Просто код копируем и устанавливаем так.-панель управления-дизайн-добавить виджет- в списке выбираем HTML/JavaScript. В открывшемся окне в поле вставляем весь код и сохраняем. Всё.

      Удалить
  4. Да, хорошая фишка для развлекательных блогов. В копилку)

    ОтветитьУдалить
  5. Light Knight, спасибо. Да в принципе любой подойдёт. Забирайте.

    ОтветитьУдалить
  6. Викуша, дорогая, ну, тупая я собака. Что и куда вставить - не разумею. Старый я козёл. Ну, очень старый и очень козел!

    ОтветитьУдалить
  7. Очень мило смотрится и не режет глаз. Спасибочки, Вика!

    ОтветитьУдалить
    Ответы
    1. Викуша, дорогая, я все равно не понял что куда вставить, разве что перо в задницу!

      Удалить
    2. Люба, я игралась со стилями- получалось очень забавно. А тут , для примера решила выложить с белым фоном букв. А то некоторые только увидят не того цвета или наоборот и не нравиться. Поэтому так все настройки подробно описала, пусть каждый делает на свой вкус. Спасибо за визит.

      Удалить
  8. Семён, ладно без часиков обойдёмся на Вашем блоге.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML