Оглавление

17.5. Таймеры. Создание часов на Web-странице

Таймеры   позволяют  однократно   или  многократно  выполнять  указанную функцию через определенный интервал времени.

 

Для управления таймерами используются следующие методы объекта window:
□  setTimeout()    создает   таймер,   однократно   выполняющий   указанную функцию или выражение спустя заданный интервал времени:
<Идектификатор> = setTimeout(<Функция или выражение>, <Интервал>);
□  ciearTimeout(<идектификатор>)   останавливает таймер, установленный методом setTimeout().
□  setinterval()   создает таймер, многократно выполняющий указанную функцию или выражение через заданный интервал времени.
<Идентификатор> = setinterval(<Функция или выражение>, интервал>) ;
□  ciearinterval(<Идентификатор>) останавливает таймер, установленный методом setinterval().
Здесь <Интервал> — это промежуток времени, по истечении которого выполняется <Функция или выражение>. Значение указывается в миллисекундах.
Приведем пример использования таймеров. В листинге 50 созданы часы на Web-странице, отображающие время вплоть до секунды. Добавим также возможность остановки и запуска часов.

 

Листинг 50. Часы на Web-странице


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Часы на Web-странице</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
var clock1;
function f_start() { // Запускаем таймер
   clock1 = setInterval("f_time();", 1000);
   document.getElementById("div_start").style.display = "none";
   document.getElementById("div_end").style.display = "block";
}
function f_time() { // Считываем текущее время
   var d = new Date();
   var msg = (d.getHours()<10) ? "0" : "";
   msg += d.getHours();
   msg += (d.getMinutes()<10) ? ":0" : ":";
   msg += d.getMinutes();
   msg += (d.getSeconds()<10) ? ":0" : ":";
   msg += d.getSeconds();
   document.getElementById("div1").innerHTML = msg;
}
function f_end() { // Останавливаем таймер
   clearInterval(clock1);
   document.getElementById("div_start").style.display = "block";
   document.getElementById("div_end").style.display = "none";
}
//-->
</script>
</head>
<body onload="f_start();">
<div id="div1"></div>
<div id="div_start">
  <input type="button" value="Запустить часы" onclick="f_start();">
</div>
<div id="div_end">
  <input type="button" value="Остановить часы" onclick="f_end();">
</div>
</body>
</html>

 

Посмотреть пример...

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити