js实现一个随机选英雄的效果,点击一下开始抽英雄,再点击就停止
时间: 2024-05-08 22:20:30 浏览: 14
好的,我来给你写一个简单的实现。
HTML代码:
```html
<div>
<button id="btn-start">开始抽奖</button>
<button id="btn-stop">停止</button>
<p id="result"></p>
</div>
```
JavaScript代码:
```javascript
const heroes = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; // 英雄列表
let intervalId = null; // 定时器ID
let isRunning = false; // 是否正在抽奖
const btnStart = document.getElementById('btn-start');
const btnStop = document.getElementById('btn-stop');
const result = document.getElementById('result');
btnStart.addEventListener('click', () => {
if (isRunning) return;
isRunning = true;
intervalId = setInterval(() => {
const index = Math.floor(Math.random() * heroes.length); // 随机生成英雄下标
result.innerText = heroes[index];
}, 50);
});
btnStop.addEventListener('click', () => {
if (!isRunning) return;
clearInterval(intervalId);
isRunning = false;
});
```
解释一下代码:
1. 定义一个英雄列表 `heroes`,以及两个状态变量 `intervalId` 和 `isRunning`。
2. 获取三个元素节点:开始抽奖按钮、停止按钮、结果展示区域。
3. 给开始抽奖按钮添加点击事件监听器,当点击时:
- 如果正在运行,就直接返回,不做任何操作。
- 如果没有运行,就将 `isRunning` 设置为 `true`,然后使用 `setInterval` 开启一个定时器,每隔50毫秒刷新一次结果展示区域。
4. 给停止按钮添加点击事件监听器,当点击时:
- 如果没有运行,就直接返回,不做任何操作。
- 如果正在运行,就使用 `clearInterval` 停止定时器,并将 `isRunning` 设置为 `false`。
这样,就实现了一个简单的随机抽英雄的效果。