Это простой скрипт, который показывает системное время на JavaScript простым текстом. Часы, минуты и секунды через двоеточие – и все.
Для того, чтобы задать свой стиль часам, достаточно определить стиль для блока с ID – #time . В CSS Вы можете задать свой шрифт для часов, его цвет и размер. Если Вам нужны не простые часы, а более сложные, то посмотрите Flash часы для сайта . Откуда скрипт берет данные о времени? Показывается время именно то, которое установлено на устройстве.
УстановкаВставьте следующий код в то место на сайте, где хотите увидеть часы. На uCoz это может быть, например, «Верхняя» или «Нижняя части сайта»:
200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00
setInterval(function () {
date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h < 10) ? "0" + h: h,
m = (m < 10) ? "0" + m: m,
s = (s < 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);
Скрипт сразу покажет в том месте, где Вы его установили, строчку текста с часами. Например, «00:00:00 » . Секунды, минуты и часы, кстати, всегда двузначные, поэтому смена значений происходит гладко.
Простые цифровые часы, которые будут выводит время вашей системы. Здесь все сделано на JavaScript, что вы можете их редактировать в дизайн. Установка их также проста как и сами они, вы можете поставить их вверх сайта, где можно основном их увидеть. Плюс в том, как говорилось, вы их можете сделать как вам нужно, все зависит от ID – #time где в Панель HTML кодов работает, но все подробнее.Это основной скрипт их:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
setInterval(function () {
date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h < 10) ? "0" + h: h,
m = (m < 10) ? "0" + m: m,
s = (s < 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);
В самом верху мы видим:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
Просто добавляем жирный текст и желтый оттенок и стрелки.
200?"200px":""+(this.scrollHeight+5)+"px");">«00:00:00»
И вот что получилось:
Так что сами видите, как все поменялось, и теперь вы сами можете все сделать и красиво выставить под свои стили. Что другие невозможно сделать, так как там идет Flash, что здесь их нет.
Теперь в добавок часы на Flash
200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">
Так что можете выбрать, какие вам больше нравятся и поставить, ведь одни можно в блок установить, а вот первые больше нравятся, так как они гибкие и под настройку, что каждый может сделать.
Сделаем электронные часы с датой и временем с помощью jQuery и CSS3 для небольшой анимации.
HTMLРазметка простая и гибкая. Создаем DIV с классом clock , DIV с классом Date , который будет отображать дату и неупорядоченный список, содержащий часы, минуты и секунды.
CSS
Стили оформления с небольшой анимацией:
Container {width: 960px; margin: 0 auto; overflow: hidden;} .clock {width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; } #Date { font-family: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; } ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; } ul li { display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; } #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 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } } @-moz-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } }
JSПодключаем jQuery библиотеку
И далее наш скрипт $(document).ready(function() { // Создаем две переенные с названиями месяцев и дней недели в массиве var monthNames = [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ]; var dayNames= ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"] // Создаем объект newDate() var newDate = new Date(); // Извлекаем текущую дату из объекта Date newDate.setDate(newDate.getDate()); // Навыходе день, дата, месяц и год $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()); setInterval(function() { // Создаем объект newDate() и извлекаем секунды текущего времени var seconds = new Date().getSeconds(); // Добавляем начальный ноль к значению секунд $("#sec").html((seconds < 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });
- new Date() - создает новый объект Date со значением текущей даты и текущего времени в браузере компьютера.
- setDate() - метод устанавливает день месяца (от 1 до 31), по местному времени
- getDate() - метод возвращает день месяца (от 1 до 31) для указанной даты по местному времени
- getSeconds(), getMinutes() и getHours() - эти методы позволяют извлекать секунды, минуты и часы текущего времени в браузер.
- (seconds < 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
- Функция setInterval - это стандартная jаvascript функция, не часть jQuery . Выполняет код много раз, через равные промежутки времени (миллисекунды).
