Методы-таймеры объекта window
|
setInterval |
Устанавливает интервал времени, через который будет исполняться указанный программный код. Код будет выполняться через равные промежутки до тех пор, пока интервал не будет отменен с помощью clearInterval |
|
setTimeout |
Устанавливает интервал времени, через который исполнится указанный программный код. Код будет выполн один раз. Можно предотвратить исполнени кода, если до истечения интервала вызвать clearTimeout |
|
clearInterval |
Отменяет действие метода setInterval |
|
clearTimeout |
Отменяет действие метода setTimeout |
Поскольку объект window является главным в иерархии, его можно не указывать и ссылаться на его свойства и методы непосредственно. Например:
document.write("Hello");есть тоже самое, что и
window.document.write("Hello");Большинство из методов объекта window мы рассмотрим позднее вместе с другими элементами, такими как элементы формы и т.д. Сейчас же мы остановимся на setTimeout/clearTimeout и setInterval/clearInterval.
setTimeout
устанвливает время, через которое будет (оноразово) выполнен заданный код.
setTimeout("<выражение>", msec)Вызов setTimeout не приостанавливает выполнения программы и не заставляет систему переходить в ожидание на указанное время. Программа продолжает выполняться, просто указанный код будет выполнен по истечении заданного времени.
setTimeout возвращает число - идентификатор установленного интервала. Если Вам нужно отменить выполнение кода до того, как истек интервал, следует вызвать clearTimeout и передать ему, в качестве аргумента, идентификатор, возвращенный setTimeout.
setInterval
Во всем схоже с setTimeout, за исключением того, что код выполняется не одноразово, а постоянно, через укзанный промежуток времени. Для отмены этого выполнения, следует воспользоваться методом clearInterval, который полностью аналогичен clearTimeout.
Примеры
<SCRIPT LANGUAGE="JavaScript">
function hour() {
alert('Час прошел!');
}
</SCRIPT>
<BODY onload="setTimeout('hour()',3600000);">Через час после зугрузки этой страницы, пользователь получит сообщение "Час прошел!".
<SCRIPT LANGUAGE="JavaScript">
function hour() {
alert('Час прошел!');
setTimeout('hour()',3600000);
}
</SCRIPT>
<BODY onload="setTimeout('hour()',3600000);">Каждый час пользователь будет получать сообщение "Час прошел!". Обратите внимание на рекурсию в hour().
И последний, чуть более сложный пример.
<SCRIPT LANGUAGE="JavaScript">
var counter = 0;
function second() { counter++; }
setInterval('second()',1000);
function ask_time() {
alert("Вы здесь уже "+counter+" сек.");
}
</SCRIPT>
...
<INPUT TYPE=BUTTON VALUE="Время" onclick="ask_time()">Всякий раз, когда пользователь нажмет кнопку, ему будут сообщать сколько секунд он уже смотрит эту страницу. Разумеется, при следующем нажатии, время изменится.
Индивидуальные задания
-
Придумать Задачу для исследования 7 свойств из таблицы CSS свойств и соответствующих им JavaScript свойств. Номера свойств выбирать по следующему принципу: 1 свойство — это номер Вашего порядкового номера в группе. Далее номера свойств берутся через интервал равный количеству человек в группе.
-
Создать абсолютно позиционируемый элемент на странице, содержащий картинку с жучком на прозрчном фоне. Создать движение жучка при нажатии на кнопку «Поехали». Цвет фона блока с жучком, а также направления движения должны изменяться согласно условия Вашего индивидуального задания.
-
Фон — 10 оттенков зелёного цвета. Направление: бежим на запад и обратно до нажатия кнопки стоп, длину пути в одном направлении вводим в поле формы
-
Фон — 10 оттенков синего цвета. Направление: бежим на восток и обратно до нажатия кнопки стоп,длину пути в одном направлении вводим в поле формы
-
Фон — 10 оттенков красного цвета. Направление: бежим на север и обратно до нажатия кнопки стоп,длину пути в одном направлении вводим в поле формы
-
Фон — 10 оттенков желтого цвета. Направление: бежим на юг и и обратно до нажатия кнопки стоп,длину пути в одном направлении вводим в поле формы
-
Фон — 10 оттенков коричневого цвета. Направление: бежим на северо-запад и обратно до нажатия кнопки стоп,длину пути в одном направлении вводим в поле формы
-
Фон — 10 оттенков серого цвета. Направление: бежим на северо-восток и обратно до нажатия кнопки стоп,длину пути в одном направлении вводим в поле формы
-
Фон — 10 оттенков розового цвета. Направление: бежим на юго-запад и обратно до нажатия кнопки стоп,длину пути в одном направлении вводим в поле формы
-
Фон — 10 оттенков фиолетового цвета. Направление: бежим на юго-восток и обратно до нажатия кнопки стоп,длину пути в одном направлении вводим в поле формы
-
Фон — 10 оттенков оранжевого цвета. Направление: бежим по кругу до нажатия кнопки стоп, радиус круга вводим в поле формы
-
Фон — 10 оттенков голубого цвета. Направление: бежим по квадрату до нажатия кнопки стоп,длину ребра квадрата вводим в поле формы
-