Электронные часы на javascript для сайта
 | |
| Не кого не удивить электронным временем на сайте, но здесь представлены на цифровых часов на JavaScript, что подключены стили CSS. Теперь вы можете их редактировать по цветовой гамме, это сделать как широкие или наоборот уменьшить, что в этом плане отличное решение под редактирование пол свой интернет ресурс. Здесь не используется flash, все очень просто. Устанавливаем скрипт в нужное место, и прописываем стили. Будут показывать текущий день недели и безусловно время. Мысль состоит в том, чтоб никак не элементарно вывести информацию на цифровом табло в интернет-ресурсе, однако еще незначительно ее приукрасить, мы используем маленький результат подергивания функциональной доли часов Проверено на тестовой площадке: На светлом:  Темный фон:  Установка: По месту, где хотите их наблюдать: Код <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> CSS: Код .container {width: 319px; margin: 0 auto; overflow: hidden;} .clock {width:311px; margin:0 auto; padding:9px; border:none; color:#0f81ce; } #Date {font-family: Arial, Helvetica, sans-serif;font-size: 17px;text-align:center;text-shadow: 0 0 1px rgba(21, 20, 20, 0.97);} ul { width:299px; margin:0 auto; padding:0px; list-style:none; text-align:center; } ul li { display:inline; font-size:32px; text-align:center; font-family: Arial, Helvetica, sans-serif; text-shadow:0 0 2px rgba(12, 12, 12, 0.96); } #point { position:relative; -moz-animation:mymove 1s cubic-bezier(0.25, 0.1, 0.24, 0.91) infinite; -webkit-animation:mymove 1s cubic-bezier(0.25, 0.1, 0.22, 1) infinite; padding-left:10px; padding-right:10px; } @-webkit-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 10px rgba(14, 14, 14, 0.96);} 50% {opacity:0; text-shadow:none;} 100% {opacity:1.0; text-shadow:0 0 10px rgba(12, 12, 12, 0.98);} } @-moz-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 10px rgba(8, 8, 8, 0.97);} 50% {opacity:0; text-shadow:none;} 100% {opacity:1.0; text-shadow:0 0 10px rgba(6, 6, 6, 0.98);} } Стили можно расположить в самом низу, они не будут конфликтовать с другими, где все настройки понятны, это сама форма и вывод палитры на разнообразные фоны и элементы стиля сайта. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |