javascript制作颜色改变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul,li{list-style-type: none;}
		ul li{float: left;width: 70px;height: 70px;border: 1px solid gray;margin-right: 15px;
			margin-bottom: 30px;}
		div{width: 200px;height: 200px;background-color: pink;clear: left;}
	</style>
</head>
<body>
	<ul id="menu">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<div id="box"></div>
	<script type="text/javascript">
		var lis=document.getElementById('menu').children;
		var o=document.getElementById('box');
		/*for(var i=0;i<lis.length;i++){
			var num=parseInt(Math.random()*10);
			lis[i].style.backgroundColor='rgb((num*5*i),(20*(10-i),(num*(8-i))))';
			//追加点击事件
			lis[i].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
			};
		}*/
		lis[0].style.backgroundColor='red';
		lis[1].style.backgroundColor='blue';
		lis[2].style.backgroundColor='pink';
		lis[3].style.backgroundColor='black';
		lis[4].style.backgroundColor='green';
		lis[5].style.backgroundColor='yellow';
		//追加点击事件
		lis[0].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
			};
		lis[1].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
			};
		lis[2].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
		};
		lis[3].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
		};
		lis[4].onclick=function(){
					o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
		};
		lis[5].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
		};
	</script>
</body>
</html>
javascript制作颜色改变

猜你喜欢
