标签：and function rand interval inner sele lin 结束 height
/*点击开始按钮，小圆球随机取数；点击暂停按钮，取数结束*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摇摇乐</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
color: #FFFFFF;
}
input{
width: 100px;
height: 50px;
background: red;
}
ul{
overflow: hidden;
}
ul li{
list-style: none;
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
background: red;
margin: 5px;
text-align: center;
line-height: 50px;
}
ul li:nth-of-type(6),ul li:nth-of-type(7){
background: blue;
}
</style>
</head>
<body>
<input type="button" name="start" id="start" value="开始" />
<input type="button" name="stop" id="stop" value="暂停" />
<ul id="balls">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var start = document.querySelector("#start");
var stop = document.querySelector("#stop");
var balls = document.querySelector("#balls").querySelectorAll("li");
var click = true;
start.onclick = function(){
if(click){
timer = setInterval(function(){
//前五个小圆球1-30之间随机
for(var i = 0; i<5;i++){
balls[i].innerText= Math.floor(Math.random()*(30-1+1)+1);;
}
//后两个小圆球1-12之间随机
for(var i = 5; i<=6;i++){
balls[i].innerText= Math.floor(Math.random()*(12-1+1)+1);
}
},30)
click = false;
}
}
stop.onclick = function(){
clearInterval(timer);
click = true;
}
</script>
</html>
标签：and function rand interval inner sele lin 结束 height
原文地址：https://www.cnblogs.com/qjdxb/p/9313230.html
