<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选色器</title>
<style type="text/css">
ul,li{list-style: none;}
#menu{width: 700px;margin:auto;height: 100px;margin-bottom: 50px;}
ul li{float: left;margin-right: 20px;border: 1px solid gray;width: 100px;height: 100px;}
#box{width: 200px;height: 200px;border: 1px solid gray;clear: both;margin:auto;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="box"></div>
<script type="text/javascript">
var lis=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var o=document.getElementById("box");
for( var i=0;i<lis.length;i++){
lis[i].style.backgroundColor="rgb("+i+160+","+i*60+","+i*i*10+")";
lis[i].onclick=function(){
o.style.backgroundColor=this.style.backgroundColor;
console.log(this);
};
}
</script>
</body>
</html>