做一个随机抽奖的九宫格,初始绿色,点击“开始”按钮,则随机计时选中格子变红,点击“结束”则停止随机,选中停止后的格子
时间: 2024-03-03 09:49:43 浏览: 26
好的,这个问题我可以帮你解决。首先,你需要一个 HTML 页面和 JavaScript 代码。以下是代码示例:
HTML:
```html
<div class="grid">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<button id="start">开始</button>
<button id="stop">结束</button>
```
CSS:
```css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.cell {
height: 100px;
background-color: green;
}
.red {
background-color: red;
}
```
JavaScript:
```javascript
const cells = document.querySelectorAll('.cell');
const startButton = document.querySelector('#start');
const stopButton = document.querySelector('#stop');
let intervalId;
function selectRandomCell() {
const randomIndex = Math.floor(Math.random() * cells.length);
cells.forEach((cell, index) => {
if (index === randomIndex) {
cell.classList.add('red');
} else {
cell.classList.remove('red');
}
});
}
startButton.addEventListener('click', () => {
intervalId = setInterval(selectRandomCell, 100);
});
stopButton.addEventListener('click', () => {
clearInterval(intervalId);
});
```
这段代码使用了 JavaScript 的 `setInterval()` 和 `clearInterval()` 方法来实现随机选中格子变红和停止随机的功能。当点击“开始”按钮时,会每 100 毫秒随机选中一个格子并将其背景色设为红色;当点击“结束”按钮时,会停止随机选中格子。