<body>
<div class="container">
<h1>随即变换</h1>
<div class="ball" id="ball1">01</div>
<div class="ball" id="ball2">02</div>
<div class="ball" id="ball3">03</div>
<div class="ball" id="ball4">04</div>
<div class="ball" id="ball5">05</div>
<div class="ball" id="ball6">06</div>
<br><br>
<button onclick="start()">开始</button>
<button onclick="stop()">结束</button>
</div>随便加几个div和按钮
<style>
.container {
text-align: center;
margin-top: 50px;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
margin: 10px;
font-size: 24px;
line-height: 50px;
}
#ball1 { background-color: red; }
#ball2 { background-color: blue; }
#ball3 { background-color: green; }
#ball4 { background-color: yellow; }
#ball5 { background-color: orange; }
#ball6 { background-color: purple; }
</style>规定样式
<script>
let intervalId;
function start() {
intervalId = setInterval(changeNumbers, 50);
}
function stop() {
clearInterval(intervalId);
}
function changeNumbers() {
let balls = document.querySelectorAll('.ball');
balls.forEach(ball => {
let number = Math.floor(Math.random() * 49) + 1;
ball.textContent = number.toString().padStart(2, '0');
ball.style.backgroundColor = getRandomColor();
});
}
function getRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
</script>编写运行逻辑
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
