要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。
三、范例
下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。
test8_1.htm
| <html> <head> <Script Language="JavaScript"> //原来的颜色 document.bgColor="blue"; document.vlinkColor="white"; document.linkColor="yellow"; document.alinkcolor="red"; //动态改变颜色 function changecolor(){ document.bgColor="red"; document.vlinkColor="blue"; document.linkColor="green"; document.alinkcolor="blue"; } </script> </HEAD> <body bgColor="White" > <A href="test8_2.htm"> 调用动态按钮文档</a> <form > <Input type="button" Value="red" onClick="changecolor()"> </form> </BODY> </HTML> |
输出结果见图1所示。
图1
动态按钮程序。
test8_2.htm
<HTML> <HEAD> </HEAD> <p align="center"> </p> <div align="center"><center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="form2" onSubmit="null"> <p><input type="submit" name="banner" VALUE="Submit" onClick="alert('You have to put an \'action=[url]\' on the form tag!!')"> <br> <script language="JavaScript"> var id,pause=0,position=0; function banner() { // variables declaration var i,k,msg=" 这里输入你要的内容";// increase msg k=(30/msg.length)+1; for(i=0;i<=k;i++) msg+=" "+msg; // show it to the window document.form2.banner.value=msg.substring(position,position-30); // set new position if(position++==msg.length) position=0; // repeat at entered speed id=setTimeout("banner()",60); } // end --> banner(); </script></p> </form> </td> </tr> </table> </center></div> <p> </p> <BODY> <A href="test8_1.htm"> 返回</a> </BODY> </HTML> |
输出结果见图2所示。
图2
本讲介绍了使用JavaScript脚本实现Web页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。