Красивые часы без Flash для uCoz
827материалов
228тем на форуме
3003комментария
6152пользователя

Красивые часы без Flash для uCoz


Комментарий автора:

Представляю Вам очень интересное и красивое украшения для Вашего сайта в системе uCoz от WebElement.ru. Красивые часы + дата без Flash для uCoz, элегантно будут смотреться на Вашем сайте, будь хот темный дизайн, хоть светлый. Украшение полностью построено на css, html и javascript без использования Flash. Скрипт очень легок в установке и не будет нагружать загрузку Ваших страниц на сайте. Возникнут вопросы или проблемы с установкой, то смело задавайте их в комментариях к материалу.

Установка часиков:

Теперь заходим в ПУ > Управление дизайном > Таблица стилей (CSS) и туда в самый вверх вставляем код
Код
.container {width: 320px; margin: 0 auto; overflow: hidden;}   
.clock {width:300px; margin:0 auto; padding:10px; border:none; color:#09f; }   
#Date { font-family: Arial, Helvetica, sans-serif; font-size:16px; text-align:center; text-shadow:0 0 2px #000; }   
ul { width:300px; margin:0 auto; padding:0px; list-style:none; text-align:center; }   
ul li { display:inline; font-size:30px; text-align:center; font-family: Arial, Helvetica, sans-serif; text-shadow:0 0 2px #000; }   
#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 10px #000;}   
50% {opacity:0; text-shadow:none;}   
100% {opacity:1.0; text-shadow:0 0 10px #000;}   
}   
@-moz-keyframes mymove {   
0% {opacity:1.0; text-shadow:0 0 10px #000;}   
50% {opacity:0; text-shadow:none;}   
100% {opacity:1.0; text-shadow:0 0 10px #000;}   
}

Теперь на странице, где хотите видеть часы, ставьте код:
Код
<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="container">   
<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>   
</div>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 03.08.2015 в 00:00
Материал просмотрен: 895 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта