<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{
width: 680px;
margin: 200px auto 30px auto;
border: 1px solid gray;
text-align: center;
background-color: white;
}
#wrap div{
width: 100px;
height: 60px;
background-color: greenyellow;
border-radius: 10px;
display: inline-block;
text-align: center;
line-height: 60px;
margin: 10px;
}
input{
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: pink;
border: none;
border-radius: 10px;
font-size: 18px;
margin-left: 46%;
}
</style>
</head>
<body>
<div id="wrap">
<div>11</div>
<div>22</div>
<div>33</div>
<div>44</div>
<div>55</div>
<div>66</div>
<div>77</div>
<div>88</div>
<div>99</div>
<div>00</div>
</div>
<input type="button" name="btn" id="btn" value="开始" />
<script type="text/javascript">
var allDiv = document.getElementsByTagName('div');
var oBtn = document.getElementById('btn');
var time = null;
var compare = true;
oBtn.onclick = function(){
if (compare == true) {
time = setInterval(function(){
//得到一个随机数
var rand = parseInt(Math.random()*(allDiv.length-1)+1);
allDiv[rand].style.backgroundColor = "red";
allDiv[0].style.backgroundColor = "";
for (var i=1;i<allDiv.length;i++) {
//如果不相等则恢复原来的颜色
if (i != rand) {
allDiv[i].style.backgroundColor = "";
}
}
},30);
oBtn.value = "暂停";
} else{
clearInterval(time);
oBtn.value = "开始";
}
compare = !compare;
}
</script>
</body>
</html>
5564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
