+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Динамические часы на JavaScript

Многие дизайнеры стараются придать своему сайту динамичность, используя для этого GIF-анимацию, флеш, различные Java-скрипты, позволяющие производить какие-либо действия без полной перезагрузки страницы. Многие добавляют на сайт и часы. Расскажем как.

Первый вариант
Мы советуем все скрипты по возможности подгружать на сайт, а не писать их в самой странице.
Итак, создаем файл timedate.js (имя можете использовать любое) и пишем в него следующий код:
var timeStr, dateStr;
function clock(){// задаем функцию
now= new Date();

// получаем время
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
timeStr= ((hours < 10) ? "0" : "") + hours;

// добавляем ноль, если показатели ЧАСЫ, МИНУТЫ, СЕКУНДЫ меньше 10

timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timeStr;

// получаем дату
date= now.getDate();
month= now.getMonth()+1;
year= now.getFullYear();
dateStr= ((date < 10) ? "0" : "") + date;
dateStr+= "." + ((month < 10) ? "0" : "") + month;
dateStr+= "." + year;
document.clock.date.value = dateStr;

Timer= setTimeout("clock()",1000);}
// заставляем скрипт выполняться каждую секунду
Всё, файл timedate.js готов, закрываем его.

Код у нас есть, здорово. Для добавления часов на сайт необходимо добавить строку между тегами <HEAD>
<script type="text/javascript" src="timedate.js"></script>
и изменить тег <BODY>:
<body onload="clock();">

Для запуска часов, пишем уже на странице нашего сайта следующее, например:
<form style='display: inline' name="clock">
<input type='text' readonly name="time" class="time">
<input type='text' readonly name="date" class="date">
</form>
Можете придать каждому из полей класс и изменить все что угодно, цвет, шрифт, бэкграунд и так далее. Параметр readonly не даст выделить ваши часы и нажать Del, поле в котором они находятся становится доступным только для чтения. Можете использовать input type='button' и часы будут на кнопке, видоизменить их можно тоже как угодно.

Второй вариант
Создаем снова файл timedate.js, пишем в него следующий код:
function clock(){
if (!document.all&&!document.getElementById) return
thetime=document.getElementById? document.getElementById("time"): document.all.time
/* thetime получает свойства элемента с итендификатором "time" */
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
if (hours<=9) hours="0"+hours
if (minutes<=9) minutes="0"+minutes
if (seconds<=9) seconds="0"+seconds
var newtime=hours+":"+minutes+":"+seconds
thetime.innerHTML=""+newtime+""
/* браузер с помощью свойства элемента innerHTML отображает получаемое текстовое значение на месте этого элемента*/

if (!document.all&&!document.getElementById) return
thedata=document.getElementById? document.getElementById("data"): document.all.data
var Digital=new Date()
var date=Digital.getDate()
var month=Digital.getMonth()+1
var fullyear=Digital.getFullYear()
if (date<=9) date="0"+date
if (month<=9) month="0"+month
var newdate=date+"."+month+"."+fullyear
thedata.innerHTML=""+newdate+""
setTimeout("clock()",1000)}
Файл timedate.js готов.

Вставляем на сайт тем же самым способом, подгружаем в <HEAD> и меняем <BODY>
Но теперь нам не надо создавать форму, теперь достаточно в любом месте сайта, где нам это больше всего нужно, написать
<span id="time"></span> и тут у нас будут часики
<span id="data"></span> - дата


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 10542