★ О содержании страницы
★ Задержка метода alert
★ Задержка метода window.open
★ Задержка свойства innerHTML
★ Задержка метода document.write
★ Задержка метода document.getElementById
★ Задержка с помощью переменной, пропорциональной времени
★ Задержка в новом окне
О содержании страницы
Речь пойдет о выводе элемента WEB-страницы (текст, изображение и др.) в
заданный момент времени. Это можно сделать либо с помощью функции setTimeout(),
либо с помощью переменной, пропорциональной времени. Рассмотрены задержки при
выводе с помощью методов alert(), documtent.write(),document.getElementById,
window.open() и свойства innerHTML.
Задержка метода alert
Самый простой код описывает задержку метода alert
<script>
function MM(){
setTimeout("alert('Задержка в пол-секунды')",500);
}
</script>
<body>
<input type="button" value="ПУСК" onclick="MM()">
Нажмите кнопку alert.
Задержка метода window.open
Следующий скрипт содержит задержку открытия окна по методу window.open()
<script>
function ZW(){
c=window.open("18.jpg","","width=600,height=350,left=600, top=300");
setTimeout("c.close();",2000);
}
function MD(){
window.setTimeout("ZW()",500);
}
</script>
<body>
<input type="button" value="ПУСК" onclick="MD()">
Нажмите кнопку "ПУСК". Открывшееся окно закрывается автоматически по коду
setTimeout("c.close();",2000).
Задержка свойства innerHTML
Следующий скрипт содержит задержку вывода изображения (2 сек) с помощью
свойства innerHTML
<p id="tam"></p>
<script>
function WN(){
im="<p align=center><img SRC='531.jpg'width=300 height=200>"
setTimeout('tam.innerHTML=im',2000)
setTimeout("location.reload()",4000)
</script>
<body>
<input type="button" value="inner" onclick="MD()">
Нажмите кнопку. Открывшееся окно закрывается автоматически по коду
setTimeout("location.reload()",4000).
Задержка метода documtent.write()Очередной скрипт содержит задержку закрытия изображения,
выведенного с помощью метода document.write. Здесь использована задержка
закрытия окна, созданного как переменная z.
<script>
function WP(){
{
z = window.open("","","width=650,height=400,left=400, top=150");
z.document.write("<p align=center><img SRC='620.jpg' width=600 height=450>")
setTimeout('z.window.close()',3100)
}
</script>
<body>
<input type="button" value="write" onclick="WP()">
Нажмите кнопку. Открывшееся окно закрывается автоматически по коду
setTimeout('z.window.close()',3000).
Задержка метода document.getElementById
В методе document.getElementById код задержки отображается весьма длинной
строкой.Например, для изменения цвета бордюра фигуры с задержкой:
setTimeout('document.getElementById("my").style.borderColor = "red"',2000)
Можно упростить написание кода, если разбить его на части, сделав каждую часть
переменной:
xb='document.getElementById("my")'
yb='.style.borderColor = "red"'
zb=xb+yb
setTimeout(zb,2000)
В представленном примере у фигуры (прямоугольник), код которой содержит
идентификатор 'my', через 2 секунды происходит смена цвета бордюра
с желтого на красный.
P.S. переменную zb в коде задержки ставить в кавычки не надо.
Задержка с помощью переменной, пропорциональной времени
Следующий скрипт содержит задержку вывода изображения с помощью переменной,
пропорциональной времени (x).
<p id="trim"></p>
<script>
var x=0
function WW(){
window.setTimeout("WW()",100);
x++
if (x>15)
{
im1="<p align=center><img SRC='620.jpg' width=300 height=200>"
trim.innerHTML=im1
}
if (x>40)
{
document.getElementById('trim').style.display ='none'
}
}
</script>
<body>
<input type="button" value="inner" onclick="WW()">
Здесь переменная х наращивается пропорционально 100 мсек. Нужное действие
программы указывается в условии, фиксирующем то или иное значение х.
Нажмите кнопку. Открывшееся окно закрывается автоматически по коду
if (x>40)
{
location.reload()
}
При желании повторить вывод рисунка, сначала нужно обновить страницу.
Последний скрипт можно использовать для всех рассмотренных методов. Для этого
достаточно взять коды выводов из предыдущих скриптов.
Задержка в новом окне
Ниже приводится код скрипта, который позволяет добавлять элементы в новое окно
с задержкой по времени. Важно, что во всех кодах должен присутствовать
символ, соответствующей переменной нового окна.
<script>
function Show()
{
var xow = window.open("","","width=500,height=500,left=320, top=150,");
s1="<span style='font-size:35;color:green'>Без задержки</span>"
xow.document.write(s1)
xow.setTimeout('document.write("<body bgcolor=cyan>")',2000)
xow.b="<span id='my' style='font-size:45;color:green'>Задержка текста
в новом окне</span>" //строку не разрывать
xow.setTimeout('document.write(b)',2000)
xow.setTimeout('document.getElementById("my").style.color="red"',3000)
xow.im11="<img id='mym' SRC='18.jpg' style=' width:200; height:130;
margin-left:50px;'><BR><BR>" //строку не разрывать
xow.setTimeout('document.write(im11)',5000)
xow.im22="<img SRC='150.jpg' style='width:200; height:130;
margin-left:50px;'>" //строку не разрывать
xow.setTimeout('document.write(im22)',7000)
xow.setTimeout('document.getElementById("mym").style.display="none"',7000)
xow.setTimeout("window.close()",9000)
}
</script>
<body>
<input type="button" value=zader onClick="Show()">
Нажмите кнопку. В новом окне будет продемонстрирована задержка текста,
изменения цвета строки, вывода рисунка и его исчезновения.
Открывшееся новое окно закрывается автоматически по коду
xow.setTimeout("window.close()",8000)
Чтобы 2-ой рисунок после исчезновения первого не скакнул высоко вверх
надо в конце кода первого рисунка надо поставить <BR><BR>
