Программирование - это просто - Web-программирование на JS: Тема сегодняшнего урока: «Java Script: Программа 'Часы'».

Web-программирование на JS: Тема сегодняшнего урока: «Java Script: Программа 'Часы'».

Автор megabax

23.04.2010 г.

Урок 13. Управление шрифтами в CSS New Page 1

Тема сегодняшнего урока: «Java Script: Программа 'Часы'».

До сих пор мы изучали разные тонкости языка JavaScript, но так и не начали программировать. Поэтому сегодня мы "состряпаем" пусть для начала и маленькую, но программку. И так, рассмотрим пример:

<HTML>
<HEAD>
<TITLE>Урок 28. Java script: Программа "Часы"</TITLE>
</HEAD>

<SCRIPT Language="JavaScript" type="text/javascript">
function format2(ANumber)
{
if(ANumber<=9) return "0"+ANumber; else return ""+ANumber;
}

function clock_start()
{
var Digital=new Date();
var hours=Digital.getHours();
var minutes=Digital.getMinutes();
var seconds=Digital.getSeconds();
my_div=document.getElementById("clock");
my_div.innerHTML=""+format2(hours)+"."+format2(minutes)+"."+format2(seconds);
setTimeout("clock_start()",1000);
}

</SCRIPT>

<BODY OnLoad="clock_start()">
<div id="clock">
</BODY>
</HTML>

Данная программа покажет нам простые электронные часы:

А теперь разберем ее более подробно.

Функция format2:

function format2(ANumber)
{
if(ANumber<=9) return "0"+ANumber; else return ""+ANumber;
}

добавляет нуль впереди числа из одной цифры. Это нужно что бы если у нас время, например 19 часов и 9 минут, то не писало 19.9, а писало 19.09.

Затем у нас идет обработчик часов:

function clock_start()
{
var Digital=new Date();
var hours=Digital.getHours();
var minutes=Digital.getMinutes();
var seconds=Digital.getSeconds();
my_div=document.getElementById("clock");
my_div.innerHTML=""+format2(hours)+"."+format2(minutes)+"."+format2(seconds);
setTimeout("clock_start()",1000);
}

Он создает объект типа Date, извлекает из него текущее время и записывает в тэг <div>, который находит по ID при помощи метода getElementById. Сам тэг у нас имеет Id "clock":

Про тэг <div> вы уже знаете из уроков, посвященных языкам HTML и CSS.

Наконец, команда setTimeout("clock_start()",1000) у нас заново запускает подпрограмму "clock_start()" через 1000 миллисекунд (1 секунду). Таки образом, мы обеспечиваем ежесекундное обновление показания часов.

С уважением, Шуравин Александр, e-mail: Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script '; document.write( '' ); document.write( addy_text93031 ); document.write( '<\/a>' ); //-->\n Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script , автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

Последнее обновление ( 23.04.2010 г. )

« След.		Пред. »

Вернуться