javascript小實例【第二課時筆記】－互聯網

文章出處

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>選項卡切換</title>
 6 <style>
 7 .active{background:red;}
 8 div{width:100px;height:100px;background:#0000FF;display:none;}
 9 input{background:#CCCCCC;}
10 </style>
11 <script>
12     window.onload=function(){
13         var ainput=document.getElementsByTagName('input');
14         var odiv=document.getElementsByTagName('div');
15         var i=0;
16         for(i=0;i<ainput.length;i++){
17             ainput[i].index=i;
18             ainput[i].onclick=function()
19             {    
20                 for(i=0;i<ainput.length;i++){
21                     ainput[i].className='';
22                     odiv[i].style.display='none';
23                 }
24                 odiv[this.index].style.display='block';
25                 this.className='active';
26             };
27         }
28     };
29 </script>
30 </head>
31 <body>
32 <input class="active" type="button"  value="one"/>
33 <input type="button"  value="two" />
34 <input type="button"  value="three"/>
35 <div style="display:block;">我是第一個</div>
36 <div>我是第二個</div>
37 <div>我是第三個</div>
38 </body>
39 </html>

這個是選項卡的切換原理，做的一個簡單的例子。選項卡的應用很廣泛，每個標簽的切換修改的只是display值，比較容易理解。通過循環來遍歷獲取標簽，然后復制給每一個標簽。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>this</title>
 6 <script type="text/javascript">
 7     window.onload=function(){
 8         var abtn=document.getElementsByTagName('input');
 9         var i=0;
10         for(i=0;i<abtn.length;i++)
11         {    abtn[i].onclick=function(){
12             alert(this.value);
13         };
14         }
15     };
16 </script>
17 </head>
18 <body>
19 <input type="button" value="China"/>
20 <input type="button" value="Hongkong"/>
21 <input type="button" value="Wuhan"/>
22 </body>
23 </html>

這個是當你點擊一個按鈕的時候，this的應用范圍很廣泛，瀏覽器就彈出相應的按鈕的標簽文本值。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>全選</title>
 6 </head>
 7 <script type="text/javascript">
 8     window.onload=function(){
 9         var obtn=document.getElementById('btn');
10         var ainput=document.getElementsByTagName('input');
11         var i=0;
12         obtn.onclick=function(){
13         for(i=0;i<ainput.length;i++)
14         {
15             ainput[i].checked=true;
16         }
17         };
18     };
19 </script>
20 <body>
21 <p id="btn">全選</p>
22 <input type="checkbox" /><br />
23 <input type="checkbox" /><br />
24 <input type="checkbox" /><br />
25 <input type="checkbox" /><br />
26 <input type="checkbox" /><br />
27 <input type="checkbox" /><br />
28 <input type="checkbox" /><br />
29 <input type="checkbox" /><br />
30 <input type="checkbox" /><br />
31 <input type="checkbox" /><br /><input type="checkbox" /><br />
32 </body>
33 </html>