发表于： 2017-02-12 23:43:25
2 1144
基本完成任务1内容
遗留问题：1、没有设置按钮样式（这个就不搞了）
2、生成3个随机数有相同时没有再次随机
3、偶尔出现 Cannot read property 'style' of undefined 的错误
问题 2、3 等会解决
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.nine-box{
margin:50px;
width:300px;
height:300px;
background-color:#fff;
}
.nine-box div{
margin:5px;
width:90px;
height:90px;
float:left;
background-color:#e78326;
border-radius:10px;
}
.botton input{
margin-left:180px;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="nine-box">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
<div class="botton">
<input type="button" class="start" value="开始"/><br/>
<input type="button" class="stop" value="停止"/>
</div>
<script>
var aboxDiv = document.getElementsByClassName('nine-box')[0].getElementsByTagName('div');
var btnStart = document.getElementsByClassName('start')[0];
var btnStop = document.getElementsByClassName('stop')[0];
btnStart.onclick = function(){
btnStart.timer = setInterval(function(){
var aColor = Array();
for(var i=0; i<9; i++){
aboxDiv[i].style.backgroundColor = '#e78326';
}
for(var i=0; i<3; i++){
aColor[i] = randomNum(aColor,i);
console.log(aColor[i]);
aboxDiv[aColor[i]].style.backgroundColor = '#' + (function(color){return (color += '0123456789abcdef'[Math.floor(Math.random()*16)]) && (color.length == 6) ? color : arguments.callee(color);
})('');
}
},1000);
}
btnStop.onclick = function(){
clearInterval(btnStart.timer);
}
function randomNum(array,i){
var num = parseInt(Math.random()*10);
for(var j=0; j<i; j++){
if(array[j] = num){
randomNum(array,j);
}
}
return num;
}
</script>
</body>
</html>
返回列表
评论