完整版点名器

来源:互联网 发布:非线性最优化确定参数 编辑:程序博客网 时间:2024/05/01 07:51

<!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>



0 0
原创粉丝点击