| |
<!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 stopTimer ; |
| |
startbtn.onclick = function(){ |
| |
startbtn.disabled = true ; |
| |
endbtn.disabled = false; |
| |
stopTimer = setInterval(function(){ |
| |
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> |
