当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript教程:用JS脚本实现Web页面信息交互范例

Javascript
实现表格中行点击时的渐扩效果！
多图展示滑动过渡效果
弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。
拖动Html元素集合 Drag and Drop any item
脚本吧 - 幻宇工作室用到js,超强推荐base.js
使用透明叠加法美化文件上传界面
JavaScript高级程序设计
对象的类型：本地对象(1)
如何实现表格中行点击时的渐扩效果！
使用button标签，实现三态图片按钮
根据分辩率调用不同的CSS.
Web版彷 Visual Studio 2003 颜色选择器
JS中简单的实现像C#中using功能（有源码下载）
js之WEB开发调试利器:Firebug 下载
jQuery中文入门指南，翻译加实例，jQuery的起点教程
jQuery 1.0.4 - New Wave Javascript(js源文件)
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
换肤测试程序js脚本
xWin之JS版(2-26更新)
共享自己写一个框架DreamScript

No. « 200 201 202 203 »

技术文章搜索

关键字

Javascript 中的 JavaScript教程:用JS脚本实现Web页面信息交互范例

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

要实现动态交互，必须掌握有关窗体对象(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页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。