подразумевает возможность доступа и изменения части содержания
документа без необходимости загрузки или создания новой страницы. Другими словами, появляется возможность динамического изменения сценария исполнения скрипта без перезагрузки страницы или открытия нового окна. Простейший динамический сценарий основан на использовании свойства innerHTML и функции "показать-скрыть". Скрывать текст или рисунок можно также с помощью innerhtml, используя код tim.innerHTML='<style.display="none">' и не забывая указать id (здесь tim). Сначала посмотрим, как работает динамический сценарий. Скрипт этого сценария таков. <HTML> <HEAD> <TITLE>dinamik</TITLE> <p id="my"></p><p id="myt"></p><p id="mym"></p> <p id="tet"></p><p id="tuta"></p><p id="teta"></p> <p id="tmy"></p><p id="myt"></p><p id="tum"></p> <script language="JavaScript"> setTimeout("WW8()",21000); function WW8() { tet.outerHTML='<style.display="none">'//убираем текст w="КОНЕЦ" tum.innerHTML="<p align=center><span style='font-size:40;color:red'>"+w+"</span></p>" } var x=0; setInterval('WW()',100) function WW(){ x++; my.innerHTML="<span style='font-size:60;color:red'>"+x+"</span>" if (x>10) { w="выводим первый рисунок" my.innerHTML="<span style='font-size:40;color:red'>"+w+"</span>" tim.outerHTML="<img SRC='112.jpg' align=left width=300 height=200>"//выводим рисунок } if (x>40) { tim.outerHTML='<style.display="none">'//убираем рисунок } } WW() setTimeout("WW6()",3000); function WW6() { my.outerHTML='<style.display="none">'//убираем текст w="выводим второй рисунок" myt.innerHTML="<p align=right><span style='font-size:40;color:blue'>"+w+"</span>" SH('det'); return false } setTimeout("WW2()",5000); function WW2() { w="скрываем второй рисунок" myt.innerHTML="<p align=right><span style='font-size:40;color:blue'>"+w+"</span></p>" SH('det'); return true } setTimeout("WW3()",7000); function WW3() { w="выводим третий рисунок" myt.innerHTML="<p align=right><span style='font-size:40;color:red'>"+w+">/span></p>" SH('ted'); return false } setTimeout("WW4()",9000); function WW4() { myt.outerHTML='<style.display="none">'//убираем текст w="скрываем первый рисунок" ttt.innerHTML="<span style='font-size:40;color:brown'>"+w+"</span>" tim.outerHTML='<style.display="none">'//убираем рисунок } setTimeout("WW9()",11000); function WW9() { ttt.outerHTML='<style.display="none">'//убираем текст w="замещаем рисунки" tmy.innerHTML="<p align=right><span style='font-size:40;color:blue'>"+w+"</span></p>" ted.outerHTML="<img id='tim' SRC='533.jpg' align=right width=300 height=200>" } setTimeout("WW5()",13000); function WW5() { tim.outerHTML="<img id='tim' SRC='18.jpg' align=right width=300 height=200>" } setTimeout("WW10()",15000); function WW10() { tim.outerHTML="<img id='tim' SRC='12.jpg' align=right width=300 height=200>" } setTimeout("WW11()",17000); function WW11() { tim.outerHTML="<img id='tim' SRC='151.jpg' align=right width=300 height=200>" } setTimeout("WW7()",19000); function WW7() { w="скрываем текст и рисунки" tet.innerHTML="<span style='font-size:40;color:brown'>"+w+"</span>" tmy.outerHTML='<style.display="none">'//убираем текст tim.outerHTML='<style.display="none">'//убираем рисунок tuta.outerHTML='<style.display="none">'//убираем текст teta.outerHTML='<style.display="none">'//убираем текст } function SH(obj_id) { doc=document.getElementById(obj_id); if(doc.style.display == "none") doc.style.display = "block"; else doc.style.display = "none" } --> </Script> </head> <body bgcolor="00ff00"> <div id="det" style="display: none;"><img SRC='18.jpg' align=right width=300 height=200> </div> <div id="ted" style="display: none;"><img SRC='531.jpg' align=right width=300 height=200> </div> <div id="ddt" style="display: none;"><img SRC='12.jpg' align=right width=300 height=200> </div> Можно создать скрипт динамического сценария, без функции "показать-скрыть", используя только свойство innerHTML. Посмотрите, как работает такой динамический сценарий. В этом сценарии движение во времени создает переменная х,
пропорциональная времени.
Скрипт последнего сценария. <HTML> <HEAD> <TITLE>inner444</TITLE> <p id="tim"></p> <p id="my"></p><p id="myt"></p> <p align=center id="tam"></p> <p align=center id="tuta"></p> <script language="JavaScript"> var x=0; setInterval('WW()',100) function WW(){ x++; w=x my.innerHTML="<span style='font-size:60;color:red'>"+w+"</span>"//выводим цифры if (x>10) { w="выводим ТЕКСТ" my.innerHTML="<span style='font-size:60;color:blue'>"+w+"</span>"//выводим текст } if (x>25) { w="меняем цвет ТЕКСТА" my.innerHTML="<span style='font-size:60;color:red'>"+w+"</span>"//меняем цвет текста } if (x>30) { w="меняем цвет ТЕКСТА" my.innerHTML="<span style='font-size:60;color:red'>"+w+"</span>"//меняем цвет текста a="<span style='font-size:50;color:blue'> на пару секунд он сейчас исчезнет</span>" myt.innerHTML=a } if (x>50) { my.innerHTML='<style.display="none">';//скрываем текст myt.innerHTML='<style.display="none">';//скрываем текст } if (x>70) { w="восстанавливаем цифры" my.innerHTML="<p align=center><span style='font-size:60;color:red'>"+w+"</span>" //восстанавливаем текст } if (x>80) { my.innerHTML="<p align=center><span style='font-size:60;color:red'>"+x+"</span>" //выводим цифры } if (x>100) { w="выводим рисунок" my.innerHTML="<span style='font-size:40;color:red'>"+w+"</span>" tim.innerHTML="<img SRC='14.jpg' align=left width=300 height=200>"//выводим рисунок } if (x>140) { w="заменяем рисунок" my.innerHTML="<span style='font-size:40;color:blue'>"+w+"</span>" tim.innerHTML="<img SRC='18.jpg' align=left width=300 height=200>"//выводим рисунок } if (x>160) { w="выводим еще раз рисунок" my.innerHTML="<span style='font-size:40;color:brown'>"+w+"<</span>" tim.innerHTML="<img SRC='532.jpg' align=left width=300 height=200>"//выводим рисунок } if (x>190) { my.outerHTML='<style.display="none">';//скрываем текст tim.innerHTML='<style.display="none">';//скрываем рисунок r="КОНЕЦ" tam.innerHTML="<span style='font-size:80;color:red'>"+r+"</span>" s="СЦЕНАРИЯ" tuta.innerHTML="<span style='font-size:80;color:red'>"+s+"</span>" } } WW() --> </Script> </head> <body bgcolor="00ff00"> </body> </html>
