前端实现一个抽奖程序,5位参与者的姓名保存到数组中,随机抽取一位显示输出,一直到所有的参与者抽到为止
时间: 2024-02-18 10:02:35 浏览: 64
好的,这个抽奖程序可以通过 JavaScript 实现。首先,我们先定义一个保存参与者姓名的数组 `names`,然后定义一个变量 `index`,用于保存已经抽到的参与者在数组中的索引。接下来,我们可以使用 `Math.random()` 方法生成一个随机数,将其乘以数组长度并向下取整,得到一个随机的索引值。然后,将该索引对应的参与者姓名输出,并将该索引值从数组中删除,同时将 `index` 加 1。当 `index` 的值等于数组长度时,表示所有参与者已经抽过奖,程序结束。下面是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖程序</title>
</head>
<body>
<h1>抽奖程序</h1>
<button onclick="draw()">抽奖</button>
<p id="result"></p>
<script>
var names = ['张三', '李四', '王五', '赵六', '钱七'];
var index = 0;
function draw() {
if (index >= names.length) {
document.getElementById('result').innerHTML = '所有参与者已经抽过奖!';
return;
}
var randomIndex = Math.floor(Math.random() * names.length);
var winner = names[randomIndex];
names.splice(randomIndex, 1);
index++;
document.getElementById('result').innerHTML = '恭喜 ' + winner + ' 抽中奖品!';
}
</script>
</body>
</html>
```
在页面中添加一个 `button` 按钮和一个 `p` 标签用于显示抽奖结果,点击按钮即可抽奖。运行代码,可以看到每次随机抽取一个参与者姓名,并将其输出到页面中,直到所有参与者都抽过奖。
阅读全文