<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function color(){
var box = document.getElementById("box");
var rows = box.querySelectorAll("li");
for(var i = 0; i < rows.length; i++){
rows[i].index=i;//index是自己array数组的一个属性，此处给它赋值原因：for循环同步，函数异步，i值无法像都是同步的时候i一次一遍，同步执行完才是异步
if(rows[i].index%2==0){
rows[i].style.background ="pink";
}else{
rows[i].style.background ="green";
}
rows[i].onmouseover=function(){
if(this.index%2==0){
this.style.background ="#c11";
}else{
this.style.background ="#1c1";
}
}
rows[i].onmouseout=function(){
if(this.index%2==0){
this.style.background ="pink";
}else{
this.style.background ="green";
}
}
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
li{
500px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 4px;
box-shadow: 0 2px 3px #ddd;
margin: 10px 0;
}
ul{ 500px;
margin: 100px auto;
}
</style>
</head>
<body>
<ul id="box">
<li id="dan">我是行</li>
<li>我是行</li>
<li class="dan">我是行</li>
<li>我是行</li>
<li class="dan">我是行</li>
<li>我是行</li>
</ul>
</body>
</html>