|
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 讓網頁具備瀏覽器識別適應功能
讓網頁具備瀏覽器識別適應功能
---- 隨著網絡的技術發(fā)展，動態(tài)網頁已被Netscape和Microsoft分別引入應用，但在標準應用中有相當大的分歧，往往必須分別為它們倆分別編寫不同的H TML頁面，同時兼顧不支持動態(tài)網頁的瀏覽器。用下面的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；如果兩種情況都不滿足，瀏覽器就停留在現(xiàn)在的頁面。
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獨立出來作為一個函數進行調用，甚至加以擴展，以實現(xiàn)更多的功能。
7 動態(tài)圖片廣告更換顯示
< 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="動態(tài)廣告圖片" >< /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就由被定義為b uttonxx的src變?yōu)楸欢x為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>
<!--置入控制區(qū)位置--> <div id="loopControls" > <a href="javascript:showNextLayer()">向后瀏覽</a> <BR><br> <a href="javascript:showPreviousLayer()">向前瀏覽</a><BR> </div>
</body> </html>
10 彩虹特效
主持人：Arky：mailto:arky@188.net
彩虹特效 近來在網上見到一個非常棒的javascrip特效，用來創(chuàng)建彩虹字，其效果完全可以和javaapplet媲美，而且解釋速度更快，我將源代碼附錄在下面： <html> <head> <title>用javascrip創(chuàng)建的彩虹字</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=gb2312"> <script language="javascript"> <!-- Hide the script from old browsers --
// Michael P. Scholtis (mpscho@planetx.bloomu.edu) // All rights reserved.January 15, 1996 // You may use this javascript example as you see fit, as long as the // information within this comment above is included in your script.
function MakeArray(n){ this.length=n; for(var i=1; i<=n; i++) this=i-1; return this }
hex=new MakeArray(16); hex［11］="A"; hex［12］="B"; hex［13］="C"; hex［14］="D"; hex［15］="E"; hex［16］="F";
function ToHex(x){ var high=x/16; // Changes a int to hex (in the range 0 to 255) var s=high+""; //1 s=s.substring(0,2); //2 the combination of these are the same as the trunc function high=parseInt(s,10); //3 var left=hex［high+1］; // left part of the hex-value var low=x-high*16; // calculate the rest of the values s=low+""; //1 s=s.substring(0,2); //2 the combination of these are the same as the trunc function low=parseInt(s,10); //3 var right=hex［low+1］; // right part of the hex-value var string=left+""+right; // add the high and low together return string; }
function rainbow(text){ text=text.substring(3,text.length-4); // gets rid of the HTML-comment-tags color_d1=255; // any value in begin 0 to 255 mul=color_d1/text.length; for(i=0;i<text.length;i++){ color_d1=255*Math.sin(i/(text.length/3)); // some other things you can try>> "=255-mul*i" to fade out, //"=mul*i" to fade in, or try "255*Math.sin(i/(text.length/3))" color_h1=ToHex(color_d1); color_d2=mul*i; color_h2=ToHex(color_d2); document.write("<FONT COLOR=#FF"+color_h1+color_h2+"> //"+text.substring(i,i+1)+</FONT>); } }
// --End Hiding Here --> </script>
</head> <body bgcolor="ffffff"> <center> <br><br><br> <hr width=100%> <SCRIPT LANGUAGE="javascript"> <!-- {rainbow("-->用javascrip創(chuàng)建的彩虹字<!__");} //--> </SCRIPT> <hr width=100%> </center> </body> </HTML>
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>
12 按時問好
function SayHello(){ var today = new Date(); var hours = today.getHours(); var minutes = today.getMinutes(); var string = "嗨!您好,現(xiàn)在是: "; string =string+hours+" 點 "+minutes+" 分；"; if(hours==0) alert(string + "已經是午夜零點多了, 哇你的精神好好噯! .^."); if(hours==1) alert(string + "己經是午夜壹點 多啦!還在游蕩哪?再不睡,明兒個要釣魚嘍!"); if(hours==2) alert(string + "己經是午夜貳點 多了,在找什么東東嗎?要不要幫忙?"); if(hours==3) alert(string + "己經是午夜叁點 多了喔!還沒睡?真是現(xiàn)代網絡夜貓子!^_^"); if(hours==4) alert(string + "己經是午夜肆點 多了,真不困哪?佩服!佩服!"); if(hours==5) alert(string + "這么早起床? 還是徹夜未眠呀?"); if(hours==6) alert(string + "早晨好! 新的一天又開始啦!"); if(hours==7) alert(string + "早安! 早飯可很重要哦,吃飽沒有?"); if(hours>7 && hours<11) alert(string + "早!又是忙碌的一天，祝行事順利!"); if(hours==11) alert(string + "快中午啦, 餓不餓?可別胡弄自己呀!"); if(hours==12) alert(string + "中午嘍!吃飽沒有? 是準備貓一小覺，還是出去曬曬太陽?"); if(hours>12 && hours<15) alert(string + "下午是 最容易犯困的時候，可要提起精神哦。"); if(hours==15) alert(string + "來杯下午茶吧! 休息是為了走更遠的路嘛!"); if(hours>15 && hours<18) alert(string + "又開始 期待下課/班了吧?不過一定要今日事,今日畢呦!"); if(hours==18) alert(string + "在加班還是休息， 身體可是第一位的啊。"); if(hours==19) alert(string + "吃了嗎?別忘了 抽點時間跟愛人聊聊天!"); if(hours==20) alert(string + "不愛看電視吧? 太悶?來我這里就對啦!"); if(hours>20 && hours<23) alert(string + "晚上好! 是不是開始泡網啦?我這兒是最佳選擇!"); if(hours==23) alert(string + "快午夜了, 要不要來塊點心；注意身體別太辛苦了?"); } SayHello();
13 超級返回
<body> 與 </body> 之間必要的地方加入如下代碼： <form> <p><input type="button" value="返回到前一頁" onclick="history.go(-1);return true;"></p> </form>
14 窗口自動上卷
<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()"即可以實現(xiàn)了
15 跑馬燈
跑馬燈(1)
<HTML> <HEAD> <TITLE>跑馬燈</TITLE> <SCRIPT Language="javascript"> var msg="歡迎光臨本報編輯部"; var interval = 100; seq = 0; function Scroll() { document.tmForm.tmText.value = msg.substring(0, seq+1); seq++; if ( seq >= msg.length ) { seq = 0 }; window.setTimeout("Scroll();", interval ); } </SCRIPT> <BODY OnLoad="Scroll();" > <FORM Name=tmForm> <INPUT Type=Text Name=tmText Size=45> </FORM> </BODY> </HTML>
16 變臉
<form name="myForm"> <p><input type="text" name="input" value="嘿,你好." size="20"> <input type="button" value="點我一下，看看輸入框中有什么變化" onclick="document.myForm.input.value=" "> </form>
17 引用外部javascript
引用外部javascript <script language="javascript" src="javascript.js"> </script>
18 java圖形變量的定義
java圖形變量的定義 img = new image(71,21); img.src = "image/home2.gif"
19 將本站加入收藏夾
將本站加入收藏夾 <form> <input TYPE="BUTTON" value="將本站加入收藏夾" onClick="window.external.addFavorite(http://personal.hb.cninfo.net/~hqse,［指南針］賀慶生個人主頁)" class="p1"> </form>
|
