发表于： 2017-02-08 13:37:11
1 1351
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格</title>
<style>
*{
margin: 0;
padding: 0;
}
.lat{
width: 200px;
height: 200px;
margin: 0 auto;
}
.lat ul li{
margin: 1px;
list-style: none;
width: 63px;
height: 63px;
float: left;
border-radius: 3px;
background: #E68226;
transition: all .5s;
}
button{
margin-left: 450px;
}
</style>
</head>
<body>
<div class="lat">
<ul id="lat">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button onclick="color()">点击变色</button>
<script>
var lat=document.getElementById("lat").getElementsByTagName("li");
var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
console.log(getRandomColor())
function color(){
setInterval(function(){
for(var i=0;i<9;i++){
lat[i].style.backgroundColor=getRandomColor();
}
},1000)
}
</script>
</body>
</html>
返回列表
评论