取模（隔行变色、鼠标离开还原每行的颜色）

5%2=1
6%2=0
0%3=0
1%3=1
2%3=2

例1.隔行变色

<ul>
<li></li>
<li></li>
...
</ul>

var lis = document.getElementsByTagName('li');
var arr = ['red','yellow','blue'];
for(var i=0;i<lis.length;i++){
lis[i].style.backgroundColor = arr[i%arr.length];//arr.length即自动获取数组长度，i%3就是0、1、2的循环
}

例2. 鼠标离开还原每行的颜色

li {
height: 24px;
margin-bottom: 3px;
list-style: none;
}

var lis = document.getElementsByTagName('li');
var arr = ['red','yellow','blue'];
for(var i=0;i<lis.length;i++){
// 给所有的li建一个索引值，那么每个li就有一个数字了
lis[i].index = i;
lis[i].style.backgroundColor = arr[i%arr.length];//i%3就是0、1、2的循环
// 鼠标移入变个颜色
lis[i].onmouseover = function(){
this.style.backgroundColor = 'gray';
}
// 鼠标移开变回原来的颜色
lis[i].onmouseout = function(){
this.style.backgroundColor = arr[this.index%arr.length];//this.index就是数字1、2、3、4、5、6、7、8....this.index%arr.length是数字就把他放在对应的数组中去
}
}

var lis = document.getElementsByTagName('li');
var arr = ['red','yellow','blue'];
var str = '';//放一个空字符串用来存储颜色
for(var i=0;i<lis.length;i++){
// 给所有的li建一个索引值，那么每个li就有一个数字了
lis[i].index = i;
lis[i].style.backgroundColor = arr[i%arr.length];//i%3就是0、1、2的循环
// 鼠标移入变个颜色
lis[i].onmouseover = function(){
str = this.style.backgroundColor;//先存当前鼠标所在的背景颜色
this.style.backgroundColor = 'gray';
}
// 鼠标移开变回原来的颜色
lis[i].onmouseout = function(){
this.style.backgroundColor = str;//离开的时候再把存储的颜色还回去
}
}