Microsoft PowerPoint - ch15_1.ppt

JavaScript 實用範例

15-1 視窗基本操作 15-1-1 歡迎對話方塊 <HTML> <HEAD> <TITLE> 顯示歡迎視窗 </TITLE> </HEAD> <BODY onload="javascript:alert(' 歡迎光臨!');"> </HTML>

15-1-2 告別對話方塊 <HTML> <HEAD> <TITLE> 顯示告別視窗 </TITLE> </HEAD> <BODY onunload="javascript:alert(' 謝謝光臨! ');"> </HTML>

15-1-3 列印網頁 <HTML> <HEAD> <TITLE> 列印網頁 </TITLE> </HEAD> <BODY> <H1> 我的網頁 </H1> <A HREF="javascript:window.print();"> 列印網頁 </A> </HTML>

15-1-4 自動垂直捲動 <HEAD> <TITLE> 自動垂直捲動 </TITLE> <SCRIPT LANGUAGE="javascript"> function V_Scroll() { for(var i = 1; i < 600; i++) window.scroll(1, i); </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="BUTTON" VALUE=" 自動垂直捲動 " onclick="javascript:v_scroll();"> </FORM> <P> 網頁的內容 </P> <P> 網頁的內容 </P> <P> 網頁的內容 </P> <P> 網頁的內容 </P> <P> 網頁的內容 </P>

15-1-5 回信 <HTML> <HEAD> <TITLE> 回信 </TITLE> </HEAD> <SCRIPT LANGUAGE="javascript"> function ContactUs() { window.location.href = "mailto:school@mail.xbook.com.tw?subject= 讀者回函 "; </SCRIPT> <BODY> <A HREF="javascript:ContactUs();"> 跟我們連絡 </A> </HTML>

15-2 特殊效果 15-2-1 隨機變換背景圖片 06: <SCRIPT LANGUAGE="javascript"> 07: var bgfig = new Array(); 08: bgfig[0] = "bg1.gif"; 09: bgfig[1] = "bg2.gif"; 10: bgfig[2] = "bg3.gif"; 11: bgfig[3] = "bg4.gif"; 12: var num = Math.floor(Math.random() * bgfig.length); 13: document.write('<body BACKGROUND="'+ bgfig[num] + '">'); 14: </SCRIPT>

15-2-2 隨機播放背景音樂 01:<BODY> 02: <SCRIPT LANGUAGE="javascript"> 03: var bgsongs = new Array(); 04: bgsongs[0] = " 兩個人的下雪天.mid"; 05: bgsongs[1] = " 守候永恆的愛.mid"; 06: bgsongs[2] = " 揮著翅膀的女孩.mid"; 07: bgsongs[3] = " 七月七日晴.mid"; 08: var num = Math.floor(Math.random() * bgsongs.length); 09: if (document.all) // 若瀏覽器為 IE 10: document.write('<bgsound SRC="' + bgsongs[num] + '" LOOP="INFINITE">'); 11: else{ 12: document.write('<embed SRC="' + bgsongs[num]+ '" LOOP="TRUE" '+ 'HIDDEN AUTOSTART="TRUE">'); 13: 14: </SCRIPT> 15:

15-2-3 狀態列跑馬燈 <SCRIPT LANGUAGE="javascript"> var info=" 歡迎光臨翠墨資訊的網站!"; var interval = 200; sin = 0; function Scroll(){ len = info.length; window.status = info.substring(0, sin+1); sin++; if (sin >= len) sin = 0; window.settimeout("scroll();", interval); </SCRIPT>

15-2-4 網頁跑馬燈 <HEAD> <TITLE> 網頁跑馬燈 </TITLE> <SCRIPT LANGUAGE="javascript"> var info=" 歡迎光臨翠墨資訊的網站! "; var interval = 200; var empty=""; var sin=0; function Scroll() { document.myform.mytext.value = info.substring(sin, info.length) + empty + info.substring(0, info.length); sin++; sin++; if (sin > info.length) sin = 0; window.settimeout("scroll();", interval); </SCRIPT> </HEAD>

15-2-5 標題列跑馬燈 <SCRIPT LANGUAGE="javascript"> var info = " 歡迎光臨翠墨資訊的網站! "; var i = 0; var temptitle = ""; var interval = 200; function Scroll(){ window.top.document.title = temptitle + info.charat(i); temptitle = temptitle + info.charat(i); i++; if(i == info.length){ i = 0; temptitle = ""; window.settimeout("scroll()",interval); </SCRIPT>

15-2-6 半透明圖片 <HEAD> <TITLE> 半透明圖片 </TITLE> <STYLE>.aIMG{ filter:alpha(opacity=100) 指標離開圖片時變成不透明 </STYLE> <SCRIPT LANGUAGE="javascript"> function Change(obj) { obj.filters.alpha.opacity = 50; function Restore(obj) { obj.filters.alpha.opacity = 100; </SCRIPT> </HEAD>

15-2-7 水中倒影 05: <BODY onload="javascript:startwave();"> 06: <IMG SRC="ad.gif"><BR> 07: <SCRIPT LANGUAGE="javascript"> 08: document.write('<img ID="aIMG" SRC="' + document.images[0].src + '"style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30)'+ ' blur() flipv()">'); 09: 10: function StartWave(){ 11: setinterval("aimg.filters.wave.phase += 10", 100); 12: 13: </SCRIPT> 14:

15-2-8 下拉式功能表超連結 <SCRIPT LANGUAGE="javascript"> function GO(){ newwin = open(); newwin.location.href = document.myform.myselect.options[document.myform.myselect.selectedindex ].value; </SCRIPT> </HEAD> <BODY> <FORM NAME="myForm"> <SELECT NAME="mySelect" SIZE="1"> <OPTION VALUE="http://tw.yahoo.com"> 雅虎奇摩 </OPTION> <OPTION VALUE="http://www.yam.com"> 蕃薯藤 </OPTION> <OPTION VALUE="http://www.google.com.tw">Goole</OPTION> </SELECT> <INPUT TYPE="BUTTON" VALUE="GO!" onclick="javascript:go()"> </FORM>

15-2-9 選擇鈕超連結 <HEAD> <TITLE> 選擇鈕超連結 </TITLE> <SCRIPT LANGUAGE="javascript"> function GO(){ newwin = open(); var i = 0; while(document.myform.myselect[i].checked == false && i < 3) { i++; newwin.location.href = document.myform.myselect[i].value; </SCRIPT> </HEAD>

<BODY> <FORM NAME="myForm"> <INPUT TYPE="RADIO" NAME="mySelect" ID="R0" VALUE="http://tw.yahoo.com"> 雅虎奇摩 <INPUT TYPE="RADIO" NAME="mySelect" ID="R1" VALUE="http://www.yam.com"> 蕃薯藤 <INPUT TYPE="RADIO" NAME="mySelect" ID="R2" VALUE="http://www.google.com.tw">Goole <INPUT TYPE="BUTTON" VALUE="GO!" onclick="javasctipt:go()"> </FORM>

15-3 日期時間 15-3-1 顯示進入時間 <HEAD> <TITLE> 顯示進入時間 </TITLE> <SCRIPT LANGUAGE="javascript"> function ShowEntryTime(){ var now = Date(); document.myform.myfield.value = now.tostring(); </SCRIPT> </HEAD> <BODY onload="showentrytime()"> <FORM NAME="myForm"> <INPUT TYPE="TEXT" NAME="myField" SIZE="30"> </FORM>

15-3-2 顯示停留時間 <HEAD> <TITLE> 顯示停留時間 </TITLE> <SCRIPT LANGUAGE="javascript"> var miliseconds = 0, seconds = 0; document.myform.myfield.value = "0"; function Display(){ if (miliseconds >= 9){ miliseconds = 0; seconds += 1; else miliseconds += 1; document.myform.myfield.value = seconds + "." + miliseconds; settimeout("display()",100); </SCRIPT> </HEAD> <BODY onload="display()"> <FORM NAME="myForm"> 您的停留時間為 <INPUT TYPE="TEXT" NAME="myField" SIZE="5"> 秒 </FORM>

15-3-3 顯示線上時鐘 <HEAD> <TITLE> 顯示線上時鐘 </TITLE> <SCRIPT LANGUAGE="javascript"> function ShowClock(){ var today = Date(); document.myform.myfield.value = today.tostring(); settimeout("showclock()", 100); </SCRIPT> </HEAD> <BODY onload="showclock()"> <FORM NAME="myForm"> <INPUT TYPE="TEXT" NAME="myField" SIZE="30"> </FORM>

15-3-4 顯示每日問候語 <HEAD> <TITLE> 顯示每日問候語 </TITLE> <SCRIPT LANGUAGE="javascript"> function ShowMessage(){ var now = new Date(); if (now.getday() == 1) document.myform.myfield.value = " 星期一猴子穿新衣 "; else if (now.getday() == 2) document.myform.myfield.value = " 星期二猴子肚子餓 "; else if (now.getday() == 3) document.myform.myfield.value = " 星期三猴子去爬山 "; </SCRIPT> </HEAD> <BODY onload="showmessage()">