发表于： 2017-02-16 23:20:04
2 1331
今天完成的事情：基本完成任务1，但是没弄出随机三个格子和三个颜色。（自己写了一个九宫格）。
明天计划：完成3个随机格子的，并且学习下如何上传到GITHUB.
遇到的问题：写代码的过程中格子换色后一直保持换完的颜色。
如果这么写换完颜色后就不会换回来var arr = document.getElementsByTagName("li");//获取li的数组
var len = arr.length;
var randomList = randomNum(arr);//返回li的随机数
randomList.style.background ="#FEA600";
但是换成这样就能换回来了
for(var i = 0, len = arr.length ; i < len ; i++) {
arr[i].style.background = "#FEA600";
}
收获：定时器的运用，清理定时器。return语句，还有for循环。
以下是今天的代码，明天争取弄出来3个格子随机的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九宫格随机变色</title>
<style type="text/css">
body{
font-size: 15px;
font-family: "微软雅黑" , Arial Tahoma;
}
*{
margin:0;
padding: 0;
}
ul li{
list-style: none;
}
.box{
margin:0 auto;
margin-top: 50px;
padding:10px;
height:400px;
width:240px;
text-align: center;
}
ul li {
height: 60px;
width:60px;
margin: 10px;
border-radius: 5px;
background:#FEA600;
float:left;
}
.click input {
margin-top:10px;
height:30px;
width:200px;
border:1px solid #FEA600;
border-radius: 5px;
color:#FEA600;
background: white;
vertical-align: middle;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div>
<ul id = "rm">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div></div>
</ul>
<div>
<input type = "button" value = "点击开始" id = "start">
<input type = "button" value = "点击结束" id = "stop">
</div>
</div>
<script type="text/javascript">
var arr = document.getElementsByTagName("li");//获取li的数组
var len = arr.length;
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var rm = document.getElementById("rm");
var time = null;
function sta(){
start.style.background = "#FEA600";
start.style.color = "white";
};
function star(){
start.style.background = "white";
start.style.color = "#FEA600";
};
start.onmouseover = function (){
sta();
};
start.onmouseleave = function (){
star();
};
function changeBg(){
var a = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);
var c = Math.floor(Math.random()*255);
var randomList = randomNum(arr);//返回li的随机数
function randomNum(arr){
return arr[Math.floor(Math.random()*len)];
}
var c = ["rgb("+a+","+b+","+c+")"];
var cl = c.length;
var radomColor = color(c); //返回的随机颜色
function color(c){
for(var i = 0, len = arr.length ; i < len ; i++) {
arr[i].style.background = "#FEA600";
}
return c[Math.floor(Math.random()*cl)];
}
randomList.style.background = radomColor;
}
start.onclick = function(){
clearInterval(time);
time = setInterval("changeBg();",1000);
};
function sto(){
stop.style.background = "#FEA600";
stop.style.color = "white";
};
function sto1(){
stop.style.background = "white";
stop.style.color = "#FEA600";
};
stop.onmouseover = function (){
sto();
};
stop.onmouseleave = function (){
sto1();
};
stop.onclick = function(){
function randomNum(arr){
return arr[Math.floor(Math.random()*l)];
}
for(var i = 0, len = arr.length ; i < len ; i++) {
arr[i].style.background = "#FEA600";
}
clearInterval(time);
}
</script>
</body>
</html>
返回列表
评论