<!-- 双色球 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 50px;
height: 50px;
background-color: aquamarine;
border-radius: 50%;
line-height: 50px;
text-align: center;
border: 1px solid red;
color: green;
}
button {
margin-bottom: 20px;
}
</style>
</head>
<body>
<button>开始</button>
<button>结束</button>
<br>
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span style="background-color: yellow;">0</span>
<script>
var bt = document.getElementsByTagName("button");
var span = document.getElementsByTagName("span");
var num
var timer
var n = 0
bt[0].onclick = function () {
console.log(n)
clearInterval(timer)
timer = setInterval((function () {
for (var i = n; i < span.length; i++) {
num = Math.floor(Math.random() * (100 - 0 + 1) + 0);
span[i].innerHTML = num
bt[1].onclick = function () {
n++
if (n >= 5) {
clearInterval(timer)
n = 0
}
}
}
}), 30)
}
</script>
</body>
</html>
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
