DEMO |
Для начала демо-пример
Теперь заходим в ПУ > Управление дизайном > Таблица стилей (CSS) и туда в самый вверх вставляем код
Code .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;} }
Теперь на странице, где хотите видеть часы, ставьте код
Code <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>
|
|
Добавлять комментарии могут только зарегистрированные пользователи. Регистрация | Вход
|
Полезная информация
Мы настоятельно рекомендуем вам использовать браузеры последних версий. Нажмите на иконку, чтобы перейти к скачиванию нужного вам браузера
Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px
Mozilla Firefox - один из лучших браузеров (рекомендуем)
Opera - Популярный браузер, но не полностью поддерживает CSS3
Google Chrome - один из лучших и быстрых браузеров
Safari - Качественый браузер от компании Apple
Яндекс.Браузер - браузер от Яндекс на платформе Chrome
|