當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中...
生活随笔
收集整理的這篇文章主要介紹了
网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、 事件：說白了就是調用函數的一種方式。它包括：事件源、事件數據、事件處理程序。
?JS事件
1、js事件通常和函數結合來使用，這樣可以通過發生的事件來驅動函數的執行，從而引起html出現不同的效果。
2、屬性（當這些事件的屬性發生改變時，會觸發function{}的函數）：
1）onabort:當圖像加載被中斷時，會引發function內的函數。
2）onbur:當元素失去焦點；
3）onfocus:當元素獲得焦點，獲得焦點，就是文本框里面的內容修改
4）onclick:鼠標點擊某個對象
?
5）ondbclick:鼠標雙擊某個對象
6）onerror:當加載文檔或圖像時發生某個錯誤
7）onchange:當用戶改變域的內容（onchange事件常結合對輸入的字段驗證來使用，常用語表單驗證身份證、郵箱注冊及登錄、區號等等的格式是否正確）
8）onkeydown:某個鍵盤的鍵被按下
9）onkeypress:某個鍵盤的鍵被按下或按住
10）onkeyup:某個鍵盤的鍵被松開
11）onload:某個頁面或圖像被完成加載
12）onmousedown:某個鼠標按鍵被按下（onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最后，當完成鼠標點擊時，會觸發 onclick 事件。）
13）onmousemove:鼠標被移動
14）onmouseout:鼠標從某元素移開
15）onmouseover:鼠標被移動到某元素之上
16）onmouseup:某個鼠標按鈕被松開（區別onkeyup）
17）onreset:重置按鈕被點擊
18）onresize:窗口或框架被調整尺寸
19）onselect:文本被選定
20）onsubmit:提交按鈕被點擊
21）onunload:用戶退出頁面
?
二、事件傳輸（注意與c#的參數傳遞區別）
1、整型參數：直接寫在括號里
eg.
<body> <div class="t1" onclick="a(0)"></div> //a(0) <div class="t1" onclick="a(1)"></div></body><script type="text/javascript">var t=new Array(); t[0]="url(05.gif)"; t[1]="url(06.gif)";function a(m) {n.style.backgroundImage=t[m];if(m==8){alert("你失敗了！");} }</script>?
2.字符串 參數，雙引號嵌套，里面要用單引號（不只是在傳參的時候）
eg.
<body><div class="t1" onclick="a('abc')"></div> <body/><script type="text/javascript">function a(n) {alert(n); }</script>輸出結果： abc?
?3.傳自身元素：參數寫this，this代表該元素(this是JavaScript中功能最強大的關鍵字之一。)(形參的傳遞不止一個)
eg.掃雷游戲
1 <body> 2 //方式一利用this調用自身 3 <div id="d1"> 4 <div class="t1" onclick="a(this,0)"></div> 5 <div class="t1" onclick="a(this,1)"></div> 6 <div class="t1" onclick="a(this,2)"></div> 7 <div class="t1" onclick="a(this,3)"></div> 8 <div class="t1" onclick="a(this,4)"></div> 9 <div class="t1" onclick="a(this,5)"></div> 10 <div class="t1" onclick="a(this,6)"></div> 11 <div class="t1" onclick="a(this,7)"></div> 12 <div class="t1" onclick="a(this,8)"></div> 13 <div class="t1" onclick="a(this,9)"></div> 14 <div class="t1" onclick="a(this,10)"></div> 15 <div class="t1" onclick="a(this,11)"></div> 16 <div class="t1" onclick="a(this,12)"></div> 17 <div class="t1" onclick="a(this,13)"></div> 18 <div class="t1" onclick="a(this,14)"></div> 19 <div class="t1" onclick="a(this,15)"></div> 20 <div class="t1" onclick="a(this,16)"></div> 21 <div class="t1" onclick="a(this,17)"></div> 22 <div class="t1" onclick="a(this,18)"></div> 23 <div class="t1" onclick="a(this,19)"></div> 24 </div> 25 26 </body> 27 28 <script type="text/javascript"> 29 30 var t=new Array();//數組 31 t[0]="url(05.gif)";t[1]="url(06.gif)";t[2]="url(07.gif)";t[3]="url(08.gif)";t[4]="url(09.gif)"; 32 t[5]="url(15.gif)";t[6]="url(16.gif)";t[7]="url(17.gif)";t[8]="url(18.gif)";t[9]="url(19.gif)"; 33 t[10]="url(25.gif)";t[11]="url(26.gif)";t[12]="url(27.gif)";t[13]="url(28.gif)";t[14]="url(29.gif)"; 34 t[15]="url(35.gif)";t[16]="url(36.gif)";t[17]="url(37.gif)";t[18]="url(38.gif)";t[19]="url(39.gif)"; 35 36 37 function a(n,m) 38 { 39 /*var s=new Array(); 40 s=document.getElementsByClassName("t1");*/ 41 n.style.backgroundImage=t[m]; 42 if(m==8) 43 { 44 alert("你失敗了！"); 45 } 46 } 47 48 </script> 49 50 方式二 利用document.getElementsByClassName（）返回數組特性 51 利用class數組 52 <div id="d1"> 53 <div class="t1" onclick="a(0)"></div> 54 <div class="t1" onclick="a(1)"></div> 55 <div class="t1" onclick="a(2)"></div> 56 <div class="t1" onclick="a(3)"></div> 57 <div class="t1" onclick="a(4)"></div> 58 <div class="t1" onclick="a(5)"></div> 59 <div class="t1" onclick="a(6)"></div> 60 <div class="t1" onclick="a(7)"></div> 61 <div class="t1" onclick="a(8)"></div> 62 <div class="t1" onclick="a(9)"></div> 63 <div class="t1" onclick="a(10)"></div> 64 <div class="t1" onclick="a(11)"></div> 65 <div class="t1" onclick="a(12)"></div> 66 <div class="t1" onclick="a(13)"></div> 67 <div class="t1" onclick="a(14)"></div> 68 <div class="t1" onclick="a(15)"></div> 69 <div class="t1" onclick="a(16)"></div> 70 <div class="t1" onclick="a(17)"></div> 71 <div class="t1" onclick="a(18)"></div> 72 <div class="t1" onclick="a(19)"></div> 73 </div> 74 75 </body> 76 77 <script type="text/javascript"> 78 79 var t=new Array();//數組 80 t[0]="url(05.gif)";t[1]="url(06.gif)";t[2]="url(07.gif)";t[3]="url(08.gif)";t[4]="url(09.gif)"; 81 t[5]="url(15.gif)";t[6]="url(16.gif)";t[7]="url(17.gif)";t[8]="url(18.gif)";t[9]="url(19.gif)"; 82 t[10]="url(25.gif)";t[11]="url(26.gif)";t[12]="url(27.gif)";t[13]="url(28.gif)";t[14]="url(29.gif)"; 83 t[15]="url(35.gif)";t[16]="url(36.gif)";t[17]="url(37.gif)";t[18]="url(38.gif)";t[19]="url(39.gif)"; 84 85 86 function a(m) 87 { 88 var s=new Array(); 89 s=document.getElementsByClassName("t1"); 90 s[m].style.backgroundImage=t[m]; 91 if(m==8) 92 { 93 alert("你失敗了！"); 94 } 95 } 96 97 </script>?
三、練習題部分
?eg1.圖片輪播
（注意
window.setInterval("a()",1000);與window.setTimeout("a()",1000);應用時，一定要注意放的位置。先執行延時再執行代碼（如果放在這兩句后面的代碼就不會執行了））
<div id="d" style="background-image:url(328477.jpg)"></div><input type="button" value="按鈕" onclick="b()"/> <input type="button" value="暫停" onclick="c()"/> </body> <script type="text/javascript">var t= new Array(); t[0]="url(328477.jpg)"; t[1]="url(330527.jpg)"; t[2]="url(343107.jpg)"; var n=0;function a() {if(n==2){n=0;}else{n++;}document.getElementById("d").style.backgroundImage=t[n];//用/*window.setTimeout("a()",1000);*/ }/*window.setTimeout("a()",1000);*/ var r= new Array(); function b() {r[0]=window.setInterval("a()",1000);//用數組存儲，因為不清楚window.setInterval("a()",1000)類型 }function c() {window.clearInterval(r[0]); } </script>?
?eg2、廣告彈窗
方法一：比較簡便 <body> <img src="1-2.jpg"/> <img src="1-2.jpg"/> <img src="1-2.jpg"/> <div id="gg" style="display:none"></div> </body> <script type="text/javascript"> function showg() {document.getElementById("gg").style.display="block";window.setTimeout("hideg()",5000); } function hideg() {document.getElementById("gg").style.display="none"; } window.setTimeout("showg()",5000);</script> 方式二 （自己做的） <div id="d1"></div> <div id="d2" style="display:none"></div></body> <script type="text/javascript"> var n=9; function a() {n--;if(n>=0){window.setTimeout("a()",1000);if(n==5){document.getElementById("d2").style.display="block";}if(n==0){document.getElementById("d2").style.display="none";}}} window.setTimeout("a()",1000); </script>?
eg3.關燈效果
1 <style type="text/css"> 2 #gd 3 { 4 width:100%; 5 height:100%; 6 background-color:#333; 7 filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5; 8 position:fixed; 9 top:0px; 10 left:0px; 11 z-index:1; 12 } 13 </style> 14 </head> 15 16 <body> 17 <div style="z-index:2; height:30px; position:absolute;"><input type="button" value="開關燈" onclick="deng()" /></div> 18 <img src="1-2.jpg"/> 19 <img src="1-2.jpg"/> 20 <img src="1-2.jpg"/> 21 <div id="gd" style="display:none"></div> 22 </body> 23 <script type="text/javascript"> 24 function deng() 25 { 26 //alert("ss"); 27 var s = document.getElementById("gd").style.display; 28 if(s=="block") 29 { 30 document.getElementById("gd").style.display="none"; 31 } 32 else 33 { 34 document.getElementById("gd").style.display="block"; 35 } 36 } 37 </script>?
?eg4、光棒效果
<body> <table width="600" border="1" cellpadding="0" cellspacing="0"><tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0"><td> </td><td> </td><td> </td><td> </td><td> </td></tr> </table><select><option>11</option><option>11</option><option>11</option> </select> </body> <script type="text/javascript"> function showcolor(a) {a.style.backgroundColor="white"; } function huifu(b) {b.style.backgroundColor="#3F0"; } </script>?事件冒泡：
當元素嵌套的時候，內部元素激發某個事件后，默認情況下外部元素相應的也會觸發。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE> 5 <META NAME="Generator" CONTENT="EditPlus"> 6 <META NAME="Author" CONTENT=""> 7 <META NAME="Keywords" CONTENT=""> 8 <META NAME="Description" CONTENT=""> 9 </HEAD> 10 11 <BODY> 12 <div onclick="test()"> 13 <div onclick="test()"> 14 <div onclick="test()">阻止事件冒泡</div> 15 </div> 16 </div> 17 </BODY> 18 </HTML> 19 <SCRIPT LANGUAGE="JavaScript"> 20 <!-- 21 //阻止事件冒泡 22 function stopEventBubble(event){ 23 var e=event || window.event; 24 25 if (e && e.stopPropagation){ 26 e.stopPropagation(); 27 } 28 else{ 29 e.cancelBubble=true; 30 } 31 } 32 33 //測試方法，調用時，直接調用test()或者test(event)，前者默認在調用最后一個未對應的參數傳遞事件 34 function test(evt){ 35 alert('hahaha'); 36 stopEventBubble(evt); 37 } 38 //--> 39 </SCRIPT>?
?eg.5做一個漂亮的下拉菜單選擇框
1 <style type="text/css"> 2 *{margin:0px auto; 3 padding:0px;} 4 .m 5 { 6 width:200px; 7 height:30px; 8 background-color:#339; 9 color:white; 10 font-weight:bold; 11 text-align:center; 12 line-height:30px; 13 vertical-align:middle; 14 } 15 #txt 16 { 17 font-size:14px; 18 text-align:center; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div style="width:100%; height:600px;" οnclick="hidemenu()"> 25 <div style="width:200px"> 26 <input id="txt" type="text" value="" style="width:196px; height:28px;" οnclick="showmenu()" /> 27 <div id="menu" style="display:none"> 28 <div class="m" οnmοuseοver="change(this)" οnclick="selectme(this)">家電</div> 29 <div class="m" οnmοuseοver="change(this)" οnclick="selectme(this)">服裝</div> 30 <div class="m" οnmοuseοver="change(this)" οnclick="selectme(this)">數碼</div> 31 <div class="m" οnmοuseοver="change(this)" οnclick="selectme(this)">食品</div> 32 <div class="m" οnmοuseοver="change(this)" οnclick="selectme(this)">玩具</div> 33 </div> 34 </div> 35 </div> 36 </body> 37 <script type="text/javascript"> 38 39 //第1步、如何顯示下拉列表 40 function showmenu() 41 { 42 var d = document.getElementById("menu"); 43 d.style.display="block"; 44 stopEventBubble(event);//由于受外層div嵌套影響，加上阻止事件冒泡 45 } 46 47 //第2步、如何隱藏下拉列表 48 function hidemenu() 49 { 50 var d = document.getElementById("menu"); 51 d.style.display="none"; 52 } 53 54 //第3步、下拉菜單的變色效果 55 function change(a) 56 { 57 huifu();//讓他恢復默認的顏色效果，目的只讓this本身變色 58 a.style.backgroundColor="#60F"; 59 } 60 //恢復默認 下拉菜單的原本 背景顏色 61 function huifu() 62 { 63 var s = document.getElementsByClassName("m"); 64 for(var i=0; i<s.length;i++) 65 { 66 s[i].style.backgroundColor="#339"; 67 } 68 } 69 70 71 //第4步、點擊下拉列表，改變輸入框中的value 72 function selectme(a) 73 { 74 document.getElementById("txt").value=a.innerText; 75 } 76 77 78 //阻止事件冒泡函數 79 function stopEventBubble(event){ 80 var e=event || window.event; 81 82 if (e && e.stopPropagation){ 83 e.stopPropagation(); 84 } 85 else{ 86 e.cancelBubble=true; 87 } 88 } 89 </script> 90 </html>eg6、”踩雷游戲“
1 <style type="text/css"> 2 .d 3 { 4 width:200px; 5 height:200px; 6 float:left; 7 background-color:#039; 8 border:1px solid white; 9 } 10 </style> 11 </head> 12 13 <body> 14 <div id="wai"> 15 16 </div> 17 </body> 18 <script type="text/javascript"> 19 var img = new Array(); 20 img[0]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 21 img[1]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 22 img[2]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 23 img[3]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 24 img[4]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 25 img[5]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 26 img[6]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 27 img[7]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 28 img[8]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)"; 29 jiazai(); 30 31 //利用函數進行div的布局，簡單 32 function jiazai() 33 { 34 var s = ""; 35 for(var i=0;i<9;i++) 36 { 37 if(i==2 || i==5) 38 { 39 s=s+" <div class='d' οnclick='showimg(this,"+i+")'></div><div style='clear:both'></div>"; 40 } 41 else 42 { 43 s = s+" <div class='d' οnclick='showimg(this,"+i+")'></div>"; 44 } 45 } 46 47 var d = document.getElementById("wai"); 48 d.innerHTML=s; 49 } 50 51 function showimg(a,b) 52 { 53 a.style.backgroundImage=img[b]; 54 if(b==6) 55 { 56 alert("踩到雷了！"); 57 window.close(); 58 } 59 }?
?
方式二、利用透明度效果（將大DIV設背景圖片，小DIV設背景顏色并設置觸發的事件（當點擊小DIV時它的背景顏色變為透明））
1 <head>2 <title>無標題文檔</title>3 <style type="text/css">4 *5 {6 margin:0px auto;7 padding:0px;8 }9 #a1 div 10 { 11 width:100px; 12 height:100px; 13 background-color:#09F; 14 border:1px solid black; 15 float:left; 16 } 17 #a1 18 { 19 width:410px; 20 height:410px; 21 background-image:url(../../../Pictures/1437459768106.jpg); 22 } 23 </style> 24 </head> 25 26 <body> 27 <div id="a1"> 28 <div id="aa1" οnclick="pic(this)"></div> 29 <div id="aa2" οnclick="pic(this)"></div> 30 <div id="aa3" οnclick="pic(this)"></div> 31 <div id="aa4" οnclick="pic(this)"></div> 32 <div id="bb1" οnclick="pic(this)"></div> 33 <div id="bb2" οnclick="pic(this)"></div> 34 <div id="bb3" οnclick="pic(this)"></div> 35 <div id="bb4" οnclick="pic(this)"></div> 36 <div id="cc1" οnclick="pic(this)"></div> 37 <div id="cc2" οnclick="pic(this)"></div> 38 <div id="cc3" οnclick="pic(this)"></div> 39 <div id="cc4" οnclick="pic(this)"></div> 40 <div id="dd1" οnclick="pic(this)"></div> 41 <div id="dd2" οnclick="pic(this)"></div> 42 <div id="dd3" οnclick="pic(this)"></div> 43 <div id="dd4" οnclick="pic(this)"></div> 44 </div> 45 </body> 46 <script type="text/javascript"> 47 function pic(a) 48 { 49 a.style.opacity="0"; 50 } 51 </script>?
?eg7、文字的漸入效果（逐漸出現）
1 <style type="text/css"> 2 #shi 3 { 4 font-family:"Times New Roman", Times, serif; 5 font-size:40px; 6 font-weight:bold; 7 color:#60F; 8 height:50px; 9 width:500px; 10 } 11 </style> 12 </head> 13 14 <body> 15 <div id="wai" style="width:0px; height:50px; overflow:hidden;"> 16 <div id="shi">床前明月光</div> 17 </div> 18 </body> 19 <script type="text/javascript"> 20 showshi(); 21 function showshi() 22 { 23 var d = document.getElementById("wai"); 24 if(parseInt(d.style.width)<500) 25 { 26 var w = parseInt(d.style.width)+1; 27 d.style.width= w+"px"; 28 window.setTimeout("showshi()",20); 29 } 30 31 } 32 </script>?eg8.背景的左右漸進效果
老師版 <body> <input id="img1" type="image" value="開始" src="../../WorkTools/素材/圖標/12Nc4391L0-33393.png" style=" width:40px; height:40px;position:absolute; left:190px; top:300px; margin-left:0px; display:block" οnclick="rightmove()" /> <input id="img2" type="image" src="../../WorkTools/素材/圖標/12Nc4391030-1VL.png" style=" width:40px; height:40px;position:absolute; right:200px; top:300px; margin-right:0px; display:none" οnclick="leftmove()" /><div style="width:100%; height:600px; overflow:hidden"><div style="width:1600px; height:600px;"><div id="d1" style="width:800px; height:600px; background-color:#309; float:left; margin-left:-600px;"></div><div id="d2" style="width:800px; height:600px; background-color:#F03; float:left"></div></div> </div> </body> <script type="text/javascript"> function rightmove() {var dd = document.getElementById("d1");var bb = document.getElementById("img1");if(parseInt(dd.style.marginLeft)<0){var bm = parseInt(bb.style.marginLeft)+1;var m = parseInt(dd.style.marginLeft)+1;dd.style.marginLeft=m+"px";bb.style.marginLeft=bm+"px";var t = window.setTimeout("rightmove()",2)；//注意延時必須放于此住，？自己想！ }else{window.clearTimeout(t);document.getElementById("img1").style.display="none";document.getElementById("img1").style.marginLeft=0+"px";document.getElementById("img2").style.display="block";}} function leftmove() {var d = document.getElementById("d1");var b = document.getElementById("img2");if(parseInt(d.style.marginLeft)>(-600)){var bm = parseInt(b.style.marginRight)+1;var m = parseInt(d.style.marginLeft)-1;d.style.marginLeft= m+"px";b.style.marginRight= bm+"px";var t1 = window.setTimeout("leftmove()",2);}else{window.clearTimeout(t1);document.getElementById("img1").style.display="block";;document.getElementById("img2").style.display="none";document.getElementById("img2").style.marginRight=0+"px";}} </script> 自己做的 <body> <input id="btn" type="image" value="開始" src="POINT04.ICO" style=" width:40px; height:40px;position:absolute; left:490px; top:300px; display:block" οnclick="a()"/> <input id="btn1" type="image" value="開始" src="POINT02.ICO" style=" width:40px; height:40px;position:absolute; right:440px; top:300px; display:none" οnclick="b()"/> <div style="width:100%; height:600px; overflow:hidden"><div style="width:1800px; height:600px; overflow:hidden"><div id="d1" style="width:900px; height:600px; background-color:#309; float:left; margin-left:-400px;"></div><div id="d2" style="width:900px; height:600px; background-color:#F03; float:left; margin-right:0px;"></div></div> </div> </body><script type="text/javascript">var p=document.getElementById("btn1"); var j=document.getElementById("btn"); function a() {var m=document.getElementById("d1");if(parseInt(m.style.marginLeft)<0){var n=parseInt(m.style.marginLeft)+1;m.style.marginLeft=n+"px";var k=parseInt(j.style.left)+1;j.style.left=k+"px";/*if(parseInt(p.style.right)>=440){var q=parseInt(p.style.right)-1;p.style.right=q+"px";}*/window.setTimeout("a()",1);}else <!--if(parseInt(m.style.marginLeft)==0)-->{p.style.right="440px";j.style.display="none";p.style.display="block";} }function b() {var m=document.getElementById("d1");var p=document.getElementById("btn1");if(parseInt(m.style.marginLeft)>-400){var n=parseInt(m.style.marginLeft)-1;m.style.marginLeft=n+"px";var q=parseInt(p.style.right)+1;p.style.right=q+"px";/*var h=parseInt(j.style.left)-1;j.style.left=h+"px";*/window.setTimeout("b()",1);}else {j.style.left="490px";j.style.display="block";p.style.display="none";}//window.setTimeout("b()",1); }</script>?
eg10、省市級三級聯動
1 <body> 2 3 <!--<select id="pro" οnchange="a()"> 4 <option selected="selected">省份</option> 5 <option class="pro">河北省</option> 6 <option class="pro">山東省</option> 7 </select> 8 <select id="city" οnchange="b()"> 9 <option id="city1" selected="selected">地級市</option> 10 <option class="hb" style="display:none">石家莊市</option> 11 <option class="hb" style="display:none">唐山市</option> 12 <option class="sd" style="display:none">淄博市</option> 13 <option class="sd" style="display:none">泰安市</option> 14 </select> 15 <select id="qu"> 16 <option id="qu1" selected="selected">市、區、縣</option> 17 18 <option class="sjz" style="display:none">長安區</option> 19 <option class="sjz" style="display:none">橋西區</option> 20 <option class="sjz" style="display:none">新華區</option> 21 <option class="sjz" style="display:none">橋東區</option> 22 23 <option class="zb" style="display:none">張店區</option> 24 <option class="zb" style="display:none">淄川區</option> 25 <option class="zb" style="display:none">臨淄區</option> 26 <option class="zb" style="display:none">博山區</option> 27 <option class="zb" style="display:none">周村區</option> 28 <option class="zb" style="display:none">高新區</option> 29 <option class="zb" style="display:none">高青縣</option> 30 <option class="zb" style="display:none">桓臺縣</option> 31 <option class="zb" style="display:none">沂源縣</option> 32 33 <option class="ta" style="display:none">泰山區</option> 34 <option class="ta" style="display:none">岱岳區</option> 35 <option class="ta" style="display:none">新泰市</option> 36 <option class="ta" style="display:none">肥城市</option> 37 <option class="ta" style="display:none">寧陽縣</option> 38 <option class="ta" style="display:none">東平縣</option> 39 </select>--> 40 41 42 43 <select id="pro" οnchange="pro()"> 44 <option selected="selected">省份</option> 45 <option value="hb">河北省</option> 46 <option value="sd">山東省</option> 47 </select> 48 <select id="city" οnchange="city()"> 49 <option id="city1" selected="selected">地級市</option> 50 </select> 51 <select id="qu"> 52 <option id="qu1" selected="selected">市、區、縣</option> 53 </select> 54 55 56 57 58 </body> 59 60 61 <script type="text/javascript"> 62 63 //改變省份，關聯 地級市 64 function pro() 65 { 66 qu_huifu(); 67 var a=document.getElementById("pro"); 68 var b=document.getElementById("city"); 69 var city1=""; 70 if(a.value=="hb") 71 { 72 //alert(1); 73 city1="<option value='sjz'>石家莊市</option> <option value='ts'>唐山市</option>"; 74 } 75 else if(a.value=="sd") 76 { 77 //alert(1); 78 city1="<option value='zb'>淄博市</option><option value='ta'>泰安市</option>"; 79 } 80 b.innerHTML=city1; 81 } 82 83 //改變地級市，關聯 市區縣 84 function city() 85 { 86 var c=document.getElementById("city"); 87 var d=document.getElementById("qu"); 88 var qu=""; 89 if(c.value=="sjz") 90 { 91 qu="<option value='caq'>長安區</option><option value='qxq'>橋西區</option><option value='xhq'>新華區</option><option value='qdq'>橋東區</option>"; 92 } 93 else if(c.value=="zb") 94 {e 95 qu="<option value='zdq'>張店區</option><option value='zcq'>淄川區</option><option value='lzq'>臨淄區</option><option value='bsq'>博山區</option><option value='zcq'>周村區</option><option value='gxq'>高新區</option><option value='gqx'>高青縣</option><option value='htx'>桓臺縣</option>option value='yyx'>沂源縣</option>"; 96 } 97 else if(c.value=="ta") 98 { 99 qu="<option value='taq'>泰山區</option><option value='dyq'>岱岳區</option><option value='xts'>新泰市</option><option value='fcs'>肥城市</option><option value='nyx'>寧陽縣</option><option value='dpx'>東平縣</option>"; 100 } 101 else 102 { 103 qu="<option id='qu1' selected='selected'>市、區、縣</option>"; 104 } 105 d.innerHTML=qu; 106 } 107 108 function qu_huifu() 109 { 110 document.getElementById("qu").innerHTML="<option value='moren' selected='selected'>市、區、縣</option>"; 111 } 112 113 114 </script> 115 116 117 118 <!-- 119 <script type="text/javascript"> 120 121 122 function a() 123 { 124 //huifu_city(); 125 //huifu_qu(); 126 //每當省份發生變化時，區縣市選項應該恢復默認值。 127 document.getElementById("qu1").selected=true; 128 129 var pro=document.getElementsByClassName("pro"); 130 if(pro[0].selected) 131 { 132 var city=document.getElementsByClassName("hb"); 133 city[0].selected=true; 134 for(var i=0;i<qu.length;i++) 135 { 136 city[i].style.display="block"; 137 } 138 } 139 else if(pro[1].selected) 140 { 141 var city=document.getElementsByClassName("sd"); 142 city[0].selected=true; 143 for(var i=0;i<qu.length;i++) 144 { 145 city[i].style.display="block"; 146 } 147 } 148 } 149 150 151 function b() 152 { 153 huifu_qu(); 154 var city=document.getElementsByClassName("sd"); 155 if(city[0].selected) 156 { 157 //huifu_qu(); 158 var qu=document.getElementsByClassName("zb"); 159 qu[0].selected=true; 160 for(var i=0;i<qu.length;i++) 161 { 162 qu[i].style.display="block"; 163 } 164 } 165 166 if(city[1].selected) 167 { 168 //huifu_qu(); 169 var qu=document.getElementsByClassName("ta"); 170 qu[0].selected=true; 171 for(var i=0;i<qu.length;i++) 172 { 173 qu[i].style.display="block"; 174 } 175 } 176 var city3=document.getElementsByClassName("hb"); 177 if(city3[0].selected) 178 { 179 var qu=document.getElementsByClassName("sjz"); 180 qu[0].selected=true; 181 for(var i=0;i<qu.length;i++) 182 { 183 qu[i].style.display="block"; 184 } 185 } 186 } 187 188 //區縣市恢復默認不顯示 189 function huifu_qu() 190 { 191 //document.getElementsById("qu1").selected=true; 192 var qu1=document.getElementsByClassName("zb"); 193 for(var i=0;i<qu1.length;i++) 194 { 195 qu1[i].style.display="none"; 196 } 197 var qu2=document.getElementsByClassName("ta"); 198 for(var i=0;i<qu2.length;i++) 199 { 200 qu2[i].style.display="none"; 201 } 202 var qu3=document.getElementsByClassName("sjz"); 203 for(var i=0;i<qu3.length;i++) 204 { 205 qu3[i].style.display="none"; 206 } 207 208 } 209 //城市 恢復默認不顯示 210 function huifu_city() 211 { 212 //document.getElementsById("city1").selected=true; 213 var city1=document.getElementsByClassName("hb"); 214 for(var i=0;i<city1.length;i++) 215 { 216 city1[i].style.display="none"; 217 } 218 219 var city2=document.getElementsByClassName("sd"); 220 for(var i=0;i<city2.length;i++) 221 { 222 city2[i].style.display="none"; 223 } 224 225 } 226 227 //if(document.getElementById("city").op) 228 229 //(document.getElementsByClassName("zb").length); 230 231 232 233 </script>--> 234 235 方式二 注意在添加<option>標簽時，也可用下面的方法： 236 var p1 = document.createElement("option"); 237 p1.innerHTML="山東"; 238 var p2 = document.createElement("option"); 239 p2.innerHTML="河北"; 240 241 var s = document.getElementById("select"); 242 243 s.appendChild(p1); 244 s.appendChild(p2); View Code?
?
?
?
?
?
轉載于:https://www.cnblogs.com/zyh-club/p/4705705.html
總結
以上是生活随笔為你收集整理的网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ios中通过调试来使用私有api
- 下一篇： ant+svn+tomcat实现项目自动