1 不让页面嵌套在其他框架结构里
如果你不想让你的页面被嵌套在其他框架结构里，你可以在你的页面相应位置加入下面几行代码即可。（此处略去相应位置其它HTML代码）
< head >< script language="javascript" >if(self!=top){top.location=self.location;}< /script >< /head >
2 不让页面脱离相应的框架结构
如果你不想让你的页面脱离相应的框架结构，也只要在相应页面中加入下面代码。（此处同样略去相应位置其它HTML代码）
< head >< script language="javascript" >if(self==top){self.location.href="url";}< /script >< /head >
---- 这里的url应该设置成你网页中定义相应框架结构的页面地址。
3 在新的窗口中打开页面
你还可以设置在新的窗口中打开你的页面，而不是用你的页面替换原有页面。
window.open("url","windowName","windowFeatures")
4 让网页具备浏览器识别适应功能
---- 随着网络的技术发展，动态网页已被Netscape和Microsoft分别引入应用，但在标准应用中有相当大的分歧，往往必须分别为它们俩分别编写不同的HTML页面，同时兼顾不支持动态网页的浏览器。用下面的javascript可以解决这个问题。
< script language="javascript" >
function testBrowser(){
ie=((navigator.appName=="Microsoft. Internet Explorer")&&
(parseInt(navigator.appVision) >=4)) ns=((navigator.appName=="Netscape")&&
(parseInt(navigator.appVision) >=4))
if(ie){self.location.href="index_ie.html";}
if(ns){self.location.href="index_ns.html";} }
< /script >
同时，还必须在该页面的BODY 中还要加入对程序的调用：
< body onLoad="testBrowser()" >
---- 这个调用在网页被加载时激活，如果浏览器是IE4.0或更高版本，浏览器就加载相应 index_ie.html；如果浏览器是Netscape 4.0或更高版本，浏览器就加载相应 index_ns.html；如果两种情况都不满足，浏览器就停留在现在的页面。
5 对表单进行校验
< script language="javascript">
function checkForm(){
if (document.userInfo.userName.value==""){
alert（“用户名必须输入：”） return false;}
if (document.userInfo.userEmail.value.indexOf('@')==-1){
alert（"请输入正确的电子邮件地址！”）； return false;} }
< /script >
同时，在表单的提交项中必须加入对该程序的调用：
< form action="YOUR_CGI" onSubmit="checkForm()">
---- 如果还有更多的调查项目，则可以设置更多更严格的校验条件，使你的表单取得更有效更准确的结果。
6 栏目导航
<form name="siteGuide">
<stlect name="siteList" onChange="self.location.href=this.form.siteList.options［this.form.siteList.selectedIndex］.value">
<option selected value="#">请选择栏目</option>
<option value="http://www.ciw.com.cn">中国计算机报</option>
<option value="http://www.ccw.com.cn">计算机世界< /option >
</select></form>
----这里，我们还可以把javascript独立出来作为一个函数进行调用，甚至加以扩展，以实现更多的功能。
7 动态图片广告更换显示
<script language="javascript">
function loadBanner(){ setTimer=setTimeout("changeBanner()",5000);
listCode=0; listBanner=new Arrey(2) listBanner［0］=new Image(400,40) listBanner［0］.src="banner_0.gif"
listBanner［1］=new Image(400,40) listBanner［1］.src="banner_1.gif" }
function changeBanner(){ listCode=listCode+1
if(listCode=="2"){listCode=0}
bannerSrc="banner_"+listCode+".gif" document.adBanner.src=bannerSrc
setTimer=setTimeout("changeBanner()",5000); }
function changeLink(){
if(listCode==0){adLink="http://www.netease.com"}
if(listCode==1){adLink="http://www.chinabyte.com"} self.location=adLink }< /script >
同时，为了确保效果，建议在网页的 Body中激活相应javascript函数。
< body onLoad="LoadBanner()" >
还要在页面相应放置广告图片的地方放置以下代码，
<a href="javascript:changeLink()">
<img src="banner_o.gif" border="0" name="adBanner" width="400" height="40" alt="动态广告图片" ></a>
---- 为了适应你的需要，你还可以添加更多的图片项进去，只要调整相应的语句和相应的参数，就可以满足你的更高要求了。
8 鼠标感应动画标签
制作鼠标感应动画标签
<script LANGUAGE="javascript">
j=document.images;
if (j)
{
button00=new Image(); button00.src="image.gif";
button001=new Image(); button001.src="image11.gif";
button01=new Image(); button01.src="image2.gif";
button011=new Image(); button011.src="image21.gif";
button02=new Image(); button02.src="image3.gif";
button021=new Image(); button021.src="image31.gif";
}
function img_act(p) {if (j) {on = eval (p + "1.src"); document<p>.src = on;} }
function img_inact(p) {if (j) {off = eval (p + ".src"); document<p>.src = off; } }
// --></script>
以上首先按顺序定义显示图片和覆盖图片的路径名称,共定义了三对随鼠标接触而变化的图片，其中的imageX.gif即为图片的相对路径。再将下列代码加入<body>和</body>之间你需要的地方：
<table CELLSPACING="0" CELLPADDING="0" WIDTH="1%"><tr><td>
<a href="url1" onmouseOver="img_act('button00')" onmouseOut="img_inact('button00')">
<img src="image1.gif" name="button00" border="0" WIDTH="50" HEIGHT="27"></a>
<a href="url2" onmouseOver="img_act('button01')" onmouseOut="img_inact('button01')">
<img src="image2.gif" name="button01" border="0" WIDTH="50" HEIGHT="27"></a>
<a href="hahatest.htm" onmouseOver="img_act('button02')" onmouseOut="img_inact('button02')">
<img src="image3.gif" name="button02" border="0" WIDTH="50" HEIGHT="27"></a>
</td></tr></table>
注释： 这是在href中插入已经定义好的javascript图象变化，而被变化的是有name="buttonxx"的图片，当鼠标上移到图片上是该图片的src就由被定义为buttonxx的src变为被定义为buttonxx+1的src。因此产生了变化效果。
9 按次序在同一位置变换图象
<html><head><title>按次序在同一位置变换图象（适用于4.0版本的浏览器）</title>
<SCRIPT LANGUAGE="javascript">
var totalLayersInLoop=3;
//上面这句说明总共定义三个图象层，在下面的语句中通过j avascript前后显示不同的层以达到图象变换的效果
var layerNumShowing=1;
//初始显示第一层
function init(){
if (navigator.appName == "Netscape") {
layerStyleRef="layer."; layerRef="document.layers"; styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all"; styleSwitch=".style"; } }
//以上这段使script适合于不同的浏览器解释
function showPreviousLayer(){
var layerNumToShow=layerNumShowing-1;
if (layerNumToShow< 1){
layerNumToShow=totalLayersInLoop;}
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
//以上这段定义一个function，使图象位置向前一层显示
function showNextLayer(){
var layerNumToShow=layerNumShowing+1;
if (layerNumToShow >totalLayersInLoop){
layerNumToShow=1;} hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
//以上这段定义一个function，使图象位置向后一层显示
function showLayer(layerName){
eval(layerRef+'<"'+layerName+'">' +styleSwitch+'.visibility="visible"'); }
//定义显示图层的function
function hideLayer(layerName){
eval(layerRef+'<"'+layerName+'">' +styleSwitch+'.visibility="hidden"'); }
//定义隐藏图层的function
</SCRIPT>
<STYLE TYPE="text/css">
<!-- 定义图层一的位置 -->
#layer1 {position: absolute; z-index: 10; visibility: visible; left: 150px; top: 80px;}
<!-- 定义图层二的位置 -->
#layer2 {position: absolute; z-index: 20; visibility: hidden; left: 150px; top: 80px;}
<!-- 定义图层三的位置 -->
#layer3 {position: absolute; z-index: 30; visibility: hidden; left: 150px; top: 80px;}
<!-- 定义控制层的位置 -->
#loopControls {position: absolute; z-index: 40; visibility: visible; left: 20px; top: 20px;}
</STYLE>
</head>
<body bgcolor="#000000" link="orange" vlink="tan" text="white" onLoad="init()">
<!--置入图层-->
<!--layer 1-->
<div id="layer1" ><IMG SRC="layer1.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR>这是图层一</div>
<!--layer 2-->
<div id="layer2" ><IMG SRC="layer2.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR>这是图层二</div>
<!--layer 3-->
<div id="layer3" ><IMG SRC="layer3.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR>这是图层三</div>
<!--置入控制区位置-->
<div id="loopControls">
<a href="javascript:showNextLayer()">向后浏览</a><br>
<br><a href="javascript:showPreviousLayer()">向前浏览</a></div>
</body></html>
10 变脸
<form name="myForm"><p><input type="text" name="input" value="嘿,你好." size="20">
<input type="button" value="点我一下，看看输入框中有什么变化" onclick="document.myForm.input.value=":)"></form>
11 窗口自动上卷
<head>中加入以下代码：
<script language="javascript">
<!--
var position = 0;
function scroller() {
if (position !=700 ) { position++; scroll(0,position); clearTimeout(timer);
var timer = setTimeout("scroller()",50); timer; } }
// -->
</script>
再在BODY中加上onload="scroller()"即可以实现了。
11 声音播放控制
用javascript进行声音播放控制
<html>
<head><title>用javascript进行声音播放控制</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
<!--
//定义一个声音播放控制的function, 需注意Netscape和IE对script的解释各不相同
function MM_controlSound(sndAction,sndObj) {
if (eval(sndObj) != null) {
if (navigator.appName=='Netscape')
eval(sndObj+((sndAction=='stop')?'.stop()':'.play(false)'));
else
if (eval(sndObj+".FileName"))
eval(sndObj+((sndAction=='stop')?'.stop()':'.run()')); } }
//--> </script>
</head>
<body>
<!-- 开始控制声音播放 -->
<embed name='MM_controlSound1' src='sound.wav' loop=false autostart=false mastersound hidden=true width=0 height=0></embed>
<!-- 用onMouseOver控制声音播放 -->
<a href="#" onMouseOver="MM_controlSound('play','document.MM_controlSound1')">当鼠标移到这儿时会播放声音</a>
</body></html>
如果你不想让你的页面被嵌套在其他框架结构里，你可以在你的页面相应位置加入下面几行代码即可。（此处略去相应位置其它HTML代码）
< head >< script language="javascript" >if(self!=top){top.location=self.location;}< /script >< /head >
2 不让页面脱离相应的框架结构
如果你不想让你的页面脱离相应的框架结构，也只要在相应页面中加入下面代码。（此处同样略去相应位置其它HTML代码）
< head >< script language="javascript" >if(self==top){self.location.href="url";}< /script >< /head >
---- 这里的url应该设置成你网页中定义相应框架结构的页面地址。
3 在新的窗口中打开页面
你还可以设置在新的窗口中打开你的页面，而不是用你的页面替换原有页面。
window.open("url","windowName","windowFeatures")
4 让网页具备浏览器识别适应功能
---- 随着网络的技术发展，动态网页已被Netscape和Microsoft分别引入应用，但在标准应用中有相当大的分歧，往往必须分别为它们俩分别编写不同的HTML页面，同时兼顾不支持动态网页的浏览器。用下面的javascript可以解决这个问题。
< script language="javascript" >
function testBrowser(){
ie=((navigator.appName=="Microsoft. Internet Explorer")&&
(parseInt(navigator.appVision) >=4)) ns=((navigator.appName=="Netscape")&&
(parseInt(navigator.appVision) >=4))
if(ie){self.location.href="index_ie.html";}
if(ns){self.location.href="index_ns.html";} }
< /script >
同时，还必须在该页面的BODY 中还要加入对程序的调用：
< body onLoad="testBrowser()" >
---- 这个调用在网页被加载时激活，如果浏览器是IE4.0或更高版本，浏览器就加载相应 index_ie.html；如果浏览器是Netscape 4.0或更高版本，浏览器就加载相应 index_ns.html；如果两种情况都不满足，浏览器就停留在现在的页面。
5 对表单进行校验
< script language="javascript">
function checkForm(){
if (document.userInfo.userName.value==""){
alert（“用户名必须输入：”） return false;}
if (document.userInfo.userEmail.value.indexOf('@')==-1){
alert（"请输入正确的电子邮件地址！”）； return false;} }
< /script >
同时，在表单的提交项中必须加入对该程序的调用：
< form action="YOUR_CGI" onSubmit="checkForm()">
---- 如果还有更多的调查项目，则可以设置更多更严格的校验条件，使你的表单取得更有效更准确的结果。
6 栏目导航
<form name="siteGuide">
<stlect name="siteList" onChange="self.location.href=this.form.siteList.options［this.form.siteList.selectedIndex］.value">
<option selected value="#">请选择栏目</option>
<option value="http://www.ciw.com.cn">中国计算机报</option>
<option value="http://www.ccw.com.cn">计算机世界< /option >
</select></form>
----这里，我们还可以把javascript独立出来作为一个函数进行调用，甚至加以扩展，以实现更多的功能。
7 动态图片广告更换显示
<script language="javascript">
function loadBanner(){ setTimer=setTimeout("changeBanner()",5000);
listCode=0; listBanner=new Arrey(2) listBanner［0］=new Image(400,40) listBanner［0］.src="banner_0.gif"
listBanner［1］=new Image(400,40) listBanner［1］.src="banner_1.gif" }
function changeBanner(){ listCode=listCode+1
if(listCode=="2"){listCode=0}
bannerSrc="banner_"+listCode+".gif" document.adBanner.src=bannerSrc
setTimer=setTimeout("changeBanner()",5000); }
function changeLink(){
if(listCode==0){adLink="http://www.netease.com"}
if(listCode==1){adLink="http://www.chinabyte.com"} self.location=adLink }< /script >
同时，为了确保效果，建议在网页的 Body中激活相应javascript函数。
< body onLoad="LoadBanner()" >
还要在页面相应放置广告图片的地方放置以下代码，
<a href="javascript:changeLink()">
<img src="banner_o.gif" border="0" name="adBanner" width="400" height="40" alt="动态广告图片" ></a>
---- 为了适应你的需要，你还可以添加更多的图片项进去，只要调整相应的语句和相应的参数，就可以满足你的更高要求了。
8 鼠标感应动画标签
制作鼠标感应动画标签
<script LANGUAGE="javascript">
j=document.images;
if (j)
{
button00=new Image(); button00.src="image.gif";
button001=new Image(); button001.src="image11.gif";
button01=new Image(); button01.src="image2.gif";
button011=new Image(); button011.src="image21.gif";
button02=new Image(); button02.src="image3.gif";
button021=new Image(); button021.src="image31.gif";
}
function img_act(p) {if (j) {on = eval (p + "1.src"); document<p>.src = on;} }
function img_inact(p) {if (j) {off = eval (p + ".src"); document<p>.src = off; } }
// --></script>
以上首先按顺序定义显示图片和覆盖图片的路径名称,共定义了三对随鼠标接触而变化的图片，其中的imageX.gif即为图片的相对路径。再将下列代码加入<body>和</body>之间你需要的地方：
<table CELLSPACING="0" CELLPADDING="0" WIDTH="1%"><tr><td>
<a href="url1" onmouseOver="img_act('button00')" onmouseOut="img_inact('button00')">
<img src="image1.gif" name="button00" border="0" WIDTH="50" HEIGHT="27"></a>
<a href="url2" onmouseOver="img_act('button01')" onmouseOut="img_inact('button01')">
<img src="image2.gif" name="button01" border="0" WIDTH="50" HEIGHT="27"></a>
<a href="hahatest.htm" onmouseOver="img_act('button02')" onmouseOut="img_inact('button02')">
<img src="image3.gif" name="button02" border="0" WIDTH="50" HEIGHT="27"></a>
</td></tr></table>
注释： 这是在href中插入已经定义好的javascript图象变化，而被变化的是有name="buttonxx"的图片，当鼠标上移到图片上是该图片的src就由被定义为buttonxx的src变为被定义为buttonxx+1的src。因此产生了变化效果。
9 按次序在同一位置变换图象
<html><head><title>按次序在同一位置变换图象（适用于4.0版本的浏览器）</title>
<SCRIPT LANGUAGE="javascript">
var totalLayersInLoop=3;
//上面这句说明总共定义三个图象层，在下面的语句中通过j avascript前后显示不同的层以达到图象变换的效果
var layerNumShowing=1;
//初始显示第一层
function init(){
if (navigator.appName == "Netscape") {
layerStyleRef="layer."; layerRef="document.layers"; styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all"; styleSwitch=".style"; } }
//以上这段使script适合于不同的浏览器解释
function showPreviousLayer(){
var layerNumToShow=layerNumShowing-1;
if (layerNumToShow< 1){
layerNumToShow=totalLayersInLoop;}
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
//以上这段定义一个function，使图象位置向前一层显示
function showNextLayer(){
var layerNumToShow=layerNumShowing+1;
if (layerNumToShow >totalLayersInLoop){
layerNumToShow=1;} hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
//以上这段定义一个function，使图象位置向后一层显示
function showLayer(layerName){
eval(layerRef+'<"'+layerName+'">' +styleSwitch+'.visibility="visible"'); }
//定义显示图层的function
function hideLayer(layerName){
eval(layerRef+'<"'+layerName+'">' +styleSwitch+'.visibility="hidden"'); }
//定义隐藏图层的function
</SCRIPT>
<STYLE TYPE="text/css">
<!-- 定义图层一的位置 -->
#layer1 {position: absolute; z-index: 10; visibility: visible; left: 150px; top: 80px;}
<!-- 定义图层二的位置 -->
#layer2 {position: absolute; z-index: 20; visibility: hidden; left: 150px; top: 80px;}
<!-- 定义图层三的位置 -->
#layer3 {position: absolute; z-index: 30; visibility: hidden; left: 150px; top: 80px;}
<!-- 定义控制层的位置 -->
#loopControls {position: absolute; z-index: 40; visibility: visible; left: 20px; top: 20px;}
</STYLE>
</head>
<body bgcolor="#000000" link="orange" vlink="tan" text="white" onLoad="init()">
<!--置入图层-->
<!--layer 1-->
<div id="layer1" ><IMG SRC="layer1.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR>这是图层一</div>
<!--layer 2-->
<div id="layer2" ><IMG SRC="layer2.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR>这是图层二</div>
<!--layer 3-->
<div id="layer3" ><IMG SRC="layer3.jpg" WIDTH=100 HEIGHT=50 BORDER=0><BR>这是图层三</div>
<!--置入控制区位置-->
<div id="loopControls">
<a href="javascript:showNextLayer()">向后浏览</a><br>
<br><a href="javascript:showPreviousLayer()">向前浏览</a></div>
</body></html>
10 变脸
<form name="myForm"><p><input type="text" name="input" value="嘿,你好." size="20">
<input type="button" value="点我一下，看看输入框中有什么变化" onclick="document.myForm.input.value=":)"></form>
11 窗口自动上卷
<head>中加入以下代码：
<script language="javascript">
<!--
var position = 0;
function scroller() {
if (position !=700 ) { position++; scroll(0,position); clearTimeout(timer);
var timer = setTimeout("scroller()",50); timer; } }
// -->
</script>
再在BODY中加上onload="scroller()"即可以实现了。
11 声音播放控制
用javascript进行声音播放控制
<html>
<head><title>用javascript进行声音播放控制</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
<!--
//定义一个声音播放控制的function, 需注意Netscape和IE对script的解释各不相同
function MM_controlSound(sndAction,sndObj) {
if (eval(sndObj) != null) {
if (navigator.appName=='Netscape')
eval(sndObj+((sndAction=='stop')?'.stop()':'.play(false)'));
else
if (eval(sndObj+".FileName"))
eval(sndObj+((sndAction=='stop')?'.stop()':'.run()')); } }
//--> </script>
</head>
<body>
<!-- 开始控制声音播放 -->
<embed name='MM_controlSound1' src='sound.wav' loop=false autostart=false mastersound hidden=true width=0 height=0></embed>
<!-- 用onMouseOver控制声音播放 -->
<a href="#" onMouseOver="MM_controlSound('play','document.MM_controlSound1')">当鼠标移到这儿时会播放声音</a>
</body></html>
回复Comments
作者:
{commentrecontent}