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

Javascript
实用的JS表单验证提示效果
CSS 直方图布局示例
jquery 动态调整textarea高度
jquery animate 动画效果使用说明
jquery checkbox全选反选效果代码
jquery (show,fadeOut,Animate)简单效果
JavaScript 抽奖效果实现代码 数字跳动版
javascript Math.random()随机数函数
jQuery 加上最后自己的验证
JavaScript 自动分号插入（JavaScript synat:auto semicolon insertion）
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
javascript 打印内容方法小结
jQuery toggle()设置CSS样式
javaScript parseInt字符转化为数字函数使用小结
模仿JQuery sortable效果 代码有错但值得看看
javascript 常见的闭包问题的解决办法
在js中单选框和复选框获取值的方式
按键盘方向键翻页跳转的javascript代码(支持ie,firefox)
js 操作table之 移动TR位置 兼容FF 跟 IE
csdn 论坛技术区平均给分功能

No. « 271 272 273 274 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 96 ::
收藏到网摘: 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页面信息交互的方法。其中主要介绍了窗体中的基本元素的主要功能和使用。