function suiji(min, max) {
if (min > max) {
[min.max] = [max, min];
}
let i = Math.floor(Math.random() * (max - min) + min);
return i;
}
function six() {
let set = new Set();
while (true) {
let i = suiji(1, 33);
set.add(i);
if (set.size == 6) {
return set;
}
}
}
let time;
function begin() {
clearInterval(time);
time = setInterval(function start() {
let arr = [...six()];
let span = document.querySelectorAll('span');
for(let i=0;i<=5;i++) {
span[i].innerHTML = arr[i];
}
let i = suiji(1, 17);
span[6].innerHTML = i;
}, 100);
}
function end() {
clearInterval(time);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./double.css">
</head>
<body>
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>
<div>
<input type="button" value="开始" onclick="begin()">
<input type="button" value="结束" onclick="end()">
</div>
<script src="./double.js"></script>
</body>
</html>
span {
display: inline-block;
width: 80px;
height: 80px;
background-color: rgb(243, 82, 82);
border-radius: 50%;
text-align: center;
line-height: 80px;
margin-right: 40px;
font-size: 20px;
color: white;
}
body>span:nth-last-of-type(1) {
background-color: rgb(88, 88, 245);
}
input {
margin-top: 30px;
margin-right: 20px;
}