Привет, друзья. Пробуем сегодня подключить в блоге красивые электронные часы, отображающие дату и точное время. Сделаем это 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>
<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. А поиграться с настройками, можно в самом редакторе, ссылка на который в начале статьи.
Спасибо за внимание и до встречи
Потрясающие часы! Спасибо, Виктория! Только вот бы были поярче!
ОтветитьУдалитьИрина, а для кого я в конце статьи все стили расписала, чтобы нужный вид предать. Как говорится -Бери и делай на свой вкус.Хоть красный, хоть белый, хоть разноцветный.
ОтветитьУдалитьШикарнейшая фишка! Блеск! Сумел бы - воткнул бы в экран.
ОтветитьУдалитьСемён. Просто код копируем и устанавливаем так.-панель управления-дизайн-добавить виджет- в списке выбираем HTML/JavaScript. В открывшемся окне в поле вставляем весь код и сохраняем. Всё.
УдалитьДа, хорошая фишка для развлекательных блогов. В копилку)
ОтветитьУдалитьLight Knight, спасибо. Да в принципе любой подойдёт. Забирайте.
ОтветитьУдалитьВикуша, дорогая, ну, тупая я собака. Что и куда вставить - не разумею. Старый я козёл. Ну, очень старый и очень козел!
ОтветитьУдалитьОчень мило смотрится и не режет глаз. Спасибочки, Вика!
ОтветитьУдалитьВикуша, дорогая, я все равно не понял что куда вставить, разве что перо в задницу!
УдалитьЛюба, я игралась со стилями- получалось очень забавно. А тут , для примера решила выложить с белым фоном букв. А то некоторые только увидят не того цвета или наоборот и не нравиться. Поэтому так все настройки подробно описала, пусть каждый делает на свой вкус. Спасибо за визит.
УдалитьСемён, ладно без часиков обойдёмся на Вашем блоге.
ОтветитьУдалить