<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.big{
width: 750px;
height: 100px;
/* border: 1px solid; */
margin: 50px auto;
}
.b{
width: 100px;
height: 100px;
/* border: 1px solid; */
display: inline-block;
border-radius: 50%;
background: red;
position: relative;
text-align: center;
line-height: 100px;
font-size: 50px;
font-weight: bold;
color: white;
}
.suparblock{
background: blue;
}
span{
font-size: 40px;
text-align: center;
position: absolute;
color: white;
font-weight: bold;
top: 22px;
left: 27px;
z-index: 5;
}
button{
position: relative;
left: 320px;
top: 20px;
}
</style>
</head>
<body>
<div class="big">
<div class="b" id="div0"></div>
<div class="b" id="div1"></div>
<div class="b" id="div2"></div>
<div class="b" id="div3"></div>
<div class="b" id="div4"></div>
<div class="b" id="div5"></div>
<div class="b suparblock" id="div6"></div>
<button id="startbtn">开始</button>
<button id="endbtn">停</button>
</div>
<script>
let b = document.getElementsByClassName('b');
let startbtn = document.getElementById("startbtn")
let endbtn = document.getElementById("endbtn");
let getnum = function(){
let arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33];
let max=arr.length;
let rand = Math.floor(Math.random()*max); //输出0-32的数
return arr[rand];
}
let bluegetnum = function(){
let arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
let max=arr.length;
let rand = Math.floor(Math.random()*max); //输出0-32的数
return arr[rand];
}
// let start = function(){
// }
let stopTimer ;
startbtn.onclick = function(){
startbtn.disabled = true ;
endbtn.disabled = false;
stopTimer = setInterval(function(){
// span=''
div0.innerHTML = getnum();
div1.innerHTML = getnum();
div2.innerHTML = getnum();
div3.innerHTML = getnum();
div4.innerHTML = getnum();
div5.innerHTML = getnum();
div6.innerHTML = bluegetnum();
},100)
};
endbtn.onclick = function(){
clearInterval(stopTimer);
startbtn.disabled = false;
endbtn.disabled = true;
}
</script>
</body>
</html>