当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript教程:用JS实现更复杂的交互范例

Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
javascript动态添加单元格的脚本代码
[原创]仿google adsense颜色选择器代码，从中易广告联盟程序提取
asp javascript 实现关闭窗口时保存数据的办法
javascript 下拉框显示当前日期
惊云JS随机排序程序随机显示信息-每次新闻显示顺序都不一样
javascript下有关dom以及xml节点访问兼容问题
js 复制功能 支持 for IE/FireFox/mozilla/ns
css图片自适应大小
比较简单的一个符合web标准的JS调用flash方法
javascript数组组合成字符串的脚本
XRegExp 0.2: Now With Named Capture
jQuery 研究心得 取得属性的值
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Prototype1.6 JS 官方下载地址
jquery 指南/入门基础
jquery api参考 visualjquery 中国线路 速度快
js控制fieldset高度的代码
document.documentElement && document.documentElement.scrollTop
js同时按下两个方向键

No. « 87 88 89 90 »

技术文章搜索

关键字

Javascript 中的 JavaScript教程:用JS实现更复杂的交互范例

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 283 ::
收藏到网摘: n/a

用JavaScript实现更复杂的交互范例.

　 三、范例
　　下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。
　　tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体；
test9-1.html为显示标题文档；
test9_2.html为第二框架文档其中需要注意的是:
通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；
test7_3.html为第三框架文档。

　主调文档
主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。
Test9.htm

<HTML>
<HEAD>
</HEAD>
<Frameset Rows="10%,90%">
<frame src="test9_1.htm">
<Frameset Cols="40%,60%">
<frame src="test9_2.htm">
<frame src="test9_3.htm">
</Frameset>
</Frameset>
</HTML>
第一个框架
主要作用是显示标题文档。
Test9_1.htm
<HTML>
<HEAD>
</HEAD>
<H2>使用框架实现WEB交互</H2>
</HTML>
　
第二个框架
主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。
Test9_2.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="test9_1">
请选择城市：<BR>
<Select name="select1" Multiple>
<Option>云南省
<Option>四川省
<Option>贵州省
<Option>山东省
<Option>江苏省
<Option>浙江省
<Option>安徽省
<Option>河南省
</select><BR>
<HR>
<Input Type="Submit" name="" value="提交">
<Input Type="reset" name="" value="复位">
</Form>
<pre>
<script language="JavaScript">
document.test9_1.elements[0].options[0].text="昆明市";
document.test9_1.elements[0].options[1].text="成都市";
</script>
</pre>
</Body>
</HTML>
　
第三个框架
主要作用是实现交互。
Test9_3.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="test9_2">
请输入用户名：
<Input Type="text" name="text1" Value="" Size=20><BR>
<HR>
请选择:
<Input Type="Checkbox" name="checkbox1" Value="qb">全部信息<BR>
<Input Type="Checkbox" name="checkbox2" Value="bf">部分信息<BR>
<Input Type="Checkbox" name="checkbox3" Value="sy">所有城市<br>
<HR>
<Input Type="Submit" name="" value="提交">
<Input Type="reset" name="" value="复位">
<BR>
</Form>
<script language="JavaScript">
document.test9_2.elements[0].value="劳动和社会保障";
document.test9_2.elements[1].checked=true;
document.test9_2.elements[2].checked=true;
document.test9_2.elements[3].checked=false;
</script>
</Body>
</HTML>
　　在浏览器中的结果见图9-2所示。


图 9-2 在浏览器中结果
　
　　本讲介绍框架中的基本元素的主要功能和使用，利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员。