这两天学习js的for循环，做了一些小案例，总结来说：
- 用设置class来改变元素的样式以及是否显示;
- 用for循环给多个元素添加注册事件;
- 注意自定义属性的使用：O[i].index = i;
- 以及用变量num来记录当前状态或者序号。
案例1：选项卡
效果：
代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="Keywords" content="JS-案例">
6 <meta name="Description" content="JS-案例选项卡">
7 <title>JS-选项卡</title>
8 <style>
9 body,p,ul{margin: 0;padding: 0;}
10 ul{list-style: none;}
11 img{border: 0; vertical-align: middle;}
12 .wrap{
13 position: relative;
14 width: 350px;
15 height: 580px;
16 margin: 50px auto;
17 }
18 .wrap .img{
19 position: relative;
20 width: 326px;
21 height: 580px;
22 }
23 .wrap .img img{
24 display: none;
25 position: absolute;
26 top: 0;
27 left: 0;
28 }
29 .wrap .img img.active{
30 display: block;
31 }
32 .wrap .img p{
33 position: absolute;
34 bottom: 0;
35 left: 0;
36 width: 100%;
37 height: 30px;
38 background-color: rgba(0,0,0,.3);
39 line-height: 30px;
40 text-align: center;
41 font-size: 16px;
42 color: #fff;
43 z-index: 3;
44 }
45 .wrap .btn{
46 position: absolute;
47 top: 0;
48 right: 0;
49 }
50 .wrap .btn li{
51 width: 24px;
52 height: 24px;
53 margin-bottom: 10px;
54 background-color: #000;
55 color: #fff;
56 font-size: 12px;
57 line-height: 24px;
58 text-align: center;
59 cursor: pointer;
60 }
61 .wrap .btn li:hover{
62 background-color: orange;
63 }
64 .wrap .btn li.active{
65 background-color: orange;
66 }
67 </style>
68 </head>
69 <body>
70 <div class="wrap">
71 <div class="img">
72 <img class="active" src="images/g1.jpg" alt="img">
73 <img src="images/g2.jpg" alt="img">
74 <img src="images/g3.jpg" alt="img">
75 <img src="images/g4.jpg" alt="img">
76 <p><span id="num">1</span>/4</p>
77 </div>
78 <ul class="btn">
79 <li class="active">1</li>
80 <li>2</li>
81 <li>3</li>
82 <li>4</li>
83 </ul>
84 </div>
85 <script>
86 var Obtn = document.getElementsByClassName("btn")[0].getElementsByTagName("li");
87 var Oimg = document.getElementsByClassName("img")[0].getElementsByTagName("img");
88 var Ospan = document.getElementById("num");
89
90 var index = 0;//这个变量用来存储当前显示的序号
91
92 for(var i=0; i<Obtn.length; i++){
93 Obtn[i].i = i;//自定义属性，用来存每个人的序号
94 Obtn[i].onclick = function(){
95 Oimg[index].className = "";//把前一个的名字去掉
96 Obtn[index].className = "";//把前一图片的名字去掉
97
98 index = this.i;//把序号变成当前点击的这个的序号
99
100 Obtn[index].className = "active";//给点击的这个btn加名字
101 Oimg[index].className = "active";//给当前要显示的图片加名字
102
103 Ospan.innerHTML = this.i+1;//显示当前图片序号
104 }
105 }
106 </script>
107 </body>
108 </html>
案例2：伸缩导航
效果：
代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="Keywords" content="JS-案例">
6 <meta name="Description" content="JS-案例伸缩导航">
7 <title>JS-伸缩导航</title>
8 <style>
9 body,p,ul{margin: 0; padding: 0;}
10 ul{list-style: none;}
11 #tab{
12 width: 150px;
13 margin: 0 auto;
14 border: 1px dashed pink;
15 }
16 #tab p{
17 height: 30px;
18 padding: 5px;
19 background-color: #000;
20 border-bottom: 1px solid pink;
21 line-height: 30px;
22 font-size: 14px;
23 color: #fff;
24 cursor: pointer;
25 }
26 #tab div.active p{
27 background: pink;
28 }
29 #tab div ul{
30 display: none;
31 }
32 #tab div.active ul{
33 display: block;
34 }
35 #tab ul li {
36 height: 30px;
37 padding: 0 5px;
38 border-bottom: 1px solid #eee;
39 font-size: 12px;
40 line-height: 30px;
41 color: #000;
42 cursor: pointer;
43 }
44 </style>
45 </head>
46 <body>
47 <div id="tab">
48 <div>
49 <p>new</p>
50 <ul>
51 <li>new1</li>
52 <li>new2</li>
53 <li>new3</li>
54 </ul>
55 </div>
56 <div>
57 <p>old</p>
58 <ul>
59 <li>old1</li>
60 <li>old2</li>
61 <li>old3</li>
62 </ul>
63 </div>
64 <div>
65 <p>normal</p>
66 <ul>
67 <li>normal1</li>
68 <li>normal2</li>
69 <li>normal3</li>
70 </ul>
71 </div>
72 </div>
73 <script>
74 var Otab = document.getElementById("tab");
75 var Op = Otab.getElementsByTagName("p");
76 var Oul = Otab.getElementsByTagName("div");
77
78 for(var i=0; i<Op.length; i++){
79 Op[i].index = i;
80 Op[i].onclick = function(){
81 Oname = Oul[this.index].className;
82 Oul[this.index].className = Oname ? "": "active";
83 }
84 }
85 </script>
86 </body>
87 </html>
时间： 2024-10-12 02:26:38