function timer_on() {timeoutId = setTimeout(callWin, 3000)} function timer_off() {clearTimeout(timeoutId)}
</script>
Первый параметр функции setTimeout() – имя функции, которая будет вызываться, когда таймер остановится после заданного вторым параметром времени (в миллисекундах)
Методы setInterval() и clearInterval() вызывают какой-либо программный код через заранее заданный интервал времени и прерывать данный цикл:
<html><head><script type="text/javascript">
var tmr;
function si() {
if (confirm('Прошло 5 секунд, остановить цикл?')) clearInterval(tmr);
}
</script></head><body onLoad="tmr=setInterval(si, 5000);">
Каждые 5 секунд будет появляться надпись с предложением прервать цикл.
</body></html>
Если переменную tmr не объявить как глобальную (до всех функций), то программа выполняться не будет. Имя функции указывается без скобок.
Объект Date
Объект Date позволяет объявлять переменные, содержащие календарную дату. В следующем примере создается переменная, в которую будет помещена дата создания HTML-документа.
LD = new Date(document.lastModified)
90
Методы LD.getDate, LD.getMonth, LD.getYear, LD.getHours, LD.getMinutes, LD.getSeconds позволяют извлечь из даты день, ме-
сяц, год, часы, минуты, секунды.
Следующий пример показывает, как организовать изображение работающих цифровых часов на странице:
<html><head><title>Часы в поле формы</title></head>
<body onLoad="myclock()"> <script type="text/javascript"> function myclock() {
ndata=new Date() // Получить текущее время с компьютера клиента
hours= ndata.getHours(); // Получить текущий час mins= ndata.getMinutes(); // Получить текущие минуты secs= ndata.getSeconds(); // Получить текущие секунды
/* Привести изображение минут и секунд к удобному для восприятия человеком виду*/
if (mins < 10) {mins = "0" + mins } if (secs < 10) {secs = "0" + secs }
/* Сформировать строку с изображением текущего времени и вывести ее на экран через текстовый элемент */ document.getElementById("clock").value =
" "+ hours+":" + mins+":" +secs;
setTimeout("myclock()", 1000); // Вызвать данную функцию через секунду
}
</script>
<input type="text" size="9" id="clock"> </body></html>
91
Метод getElementById() рассмотрен ниже.
Объект document
Объект document является корнем DOM-дерева страницы, и, соответственно, через него можно получить доступ ко всем HTMLэлементам, а также динамически формировать HTML-страницу на стороне клиента.
Метод getElementById() позволяет обратиться и (или) изменить атрибуты HTML-элемента, если задан его уникальный идентификатор (см. пример выше).
Метод getElementsByTagName() позволяет вернуть массив ссылок на HTML-элементы заданного типа:
var parr = document.getElementsByTagName('p');
alert('Содержание первого абзаца:\n'+parr[0].innerText);
Специальный символ \n осуществляет перенос каретки на новую строку (аналог тега <br>). Позволяет оформлять текст в модальных окнах и формировать удобочитаемый HTML-код (исходный, а не визуализированный).
Для динамического формирования HTML-кода страницы используются следующие методы объекта document: метод open() открывает чистый документ (если что-то было в документе, то эти данные стираются), методы write() и writeln() производят запись в новый документ HTML-элементов, а метод close() сообщает обозревателю, что документ сформирован и его можно отображать. Рассмотрим пример, в котором используются все указанные методы:
<html><head><script type="text/javascript">
function testloop() {
var Str1 = '<hr align="center" width="' ; document.open();
for (var size = 5; size <= 50; size+=5) document.writeln (Str1+ size+'%">');
92