- %运算符的使用
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript">
7 window.onload=function(){
8 var aLi=document.getElementsByTagName(‘li‘);
9 var arr=[‘red‘,‘yellow‘,‘blue‘];
10 for(var i=0;i<aLi.length;i++){
11 aLi[i].index=i;
12 aLi[i].style.background=arr[i%arr.length];
13
14 aLi[i].onmouseover=function(){
15 this.style.background=‘#000‘;
16 }
17 aLi[i].onmouseout=function(){
18 this.style.background=arr[this.index%arr.length];
19 }
20 }
21 }
22 /*
23 说明：
24 0%3=0
25 1%3=1
26 2%3=2
27 3%3=0
28 4%3=1
29 5%3=2
30 6%3=0
31 7%3=1
32 8%3=2
33 9%3=0
34 * */
35 </script>
36 </head>
37 <body>
38 <ul>
39 <li></li>
40 <li></li>
41 <li></li>
42 <li></li>
43 <li></li>
44 <li></li>
45 <li></li>
46 <li></li>
47 <li></li>
48 </ul>
49 </body>
50 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript">
7 window.onload=function(){
8 var aLi=document.getElementsByTagName(‘li‘);
9 var arr=[‘red‘,‘yellow‘,‘blue‘];
10 var str=‘‘;
11 for(var i=0;i<aLi.length;i++){
12 aLi[i].index=i;
13 aLi[i].style.background=arr[i%arr.length];
14
15 aLi[i].onmouseover=function(){
16 str=this.style.background;//移入先存颜色
17 this.style.background=‘#000‘;
18 }
19 aLi[i].onmouseout=function(){
20 this.style.background=str;//移出赋值颜色
21 }
22 }
23 }
24 /*
25 说明：
26 0%3=0
27 1%3=1
28 2%3=2
29 3%3=0
30 4%3=1
31 5%3=2
32 6%3=0
33 7%3=1
34 8%3=2
35 9%3=0
36 * */
37 </script>
38 </head>
39 <body>
40 <ul>
41 <li></li>
42 <li></li>
43 <li></li>
44 <li></li>
45 <li></li>
46 <li></li>
47 <li></li>
48 <li></li>
49 <li></li>
50 </ul>
51 </body>
52 </html>
时间： 2024-10-25 18:55:30