JS运算符 隔行变色

%取模（求余）

应用

隔行变色

HTML部分

<ul></ul>

CSS部分

*{
	margin: 0;
	padding: 0;
}
ul{
	margin: 50px auto;
	width: 200px;
}
ul li{
	height: 30px;
	list-style: none;
}

JS部分

var str="";
var colorArry=["red","yellow","pink"];
var oUl=document.getElementsByTagName("ul")[0];
for (var i=0;i<10;i++) {
	str+="<li style='background:"+colorArry[i%3]+";'></li>";
}
oUl.innerHTML=str;
var aLi=document.getElementsByTagName("li");
var oldColor="";
	
for (var i=0;i<aLi.length;i++) {
	//鼠标移入背景颜色变为灰色
	aLi[i].onmouseover=function(){
		//记录原先颜色
		oldColor=this.style.background;
		this.style.background="#ccc";
	}
	//鼠标移出保持原来的颜色
	aLi[i].onmouseout=function(){
		this.style.background=oldColor;
	}
		
	//鼠标点击背景颜色变为黑色
	aLi[i].onclick=function(){
		for (var i=0;i<aLi.length;i++) {
			aLi[i].style.background=colorArry[i%3];
		}
		oldColor="#000";
		this.style.background="#000";
	}
		
}