单击“抽奖”按钮后,抽奖按钮显示为不可用,页面开始进行随机抽号(抽 号范围在 1-55 之间),奖品的图片也随机显示,当随机显示号码出现 55 次后,停止随 机抽号,显示最后一次随机到的号码和奖品图片,并显示出奖项信息,如:特等奖、一 等奖、二等奖、三等奖。代码
时间: 2024-06-10 18:07:54 浏览: 166
抽奖程序 随机抽奖
4星 · 用户满意度95%
我可以为你提供一段 JavaScript 代码,实现上述抽奖功能:
```javascript
// 定义奖品列表
const prizes = [
{ name: "特等奖", image: "特等奖图片地址" },
{ name: "一等奖", image: "一等奖图片地址" },
{ name: "二等奖", image: "二等奖图片地址" },
{ name: "三等奖", image: "三等奖图片地址" }
]
// 定义抽奖函数
function lottery() {
// 获取抽奖按钮、号码显示区域和图片显示区域
const button = document.getElementById("btn-lottery");
const numberDisplay = document.getElementById("number-display");
const imageDisplay = document.getElementById("image-display");
// 禁用抽奖按钮
button.disabled = true;
// 定义号码计数器和号码集合
let count = 0;
const numbers = new Set();
// 定义随机抽取函数
function randomPick() {
// 生成随机号码
const number = Math.floor(Math.random() * 55) + 1;
// 如果号码已经抽过了,重新生成
if (numbers.has(number)) {
randomPick();
} else {
// 显示号码和对应奖品图片
numberDisplay.textContent = number;
imageDisplay.src = prizes[number % 4].image;
// 将号码加入集合,并增加计数器
numbers.add(number);
count++;
// 如果抽了55次,停止抽奖,显示最终结果
if (count === 55) {
const lastNumber = numberDisplay.textContent;
const lastPrize = prizes[lastNumber % 4].name;
alert(`恭喜你获得${lastPrize}`);
button.disabled = false;
} else {
// 继续抽奖
setTimeout(randomPick, 50);
}
}
}
// 开始抽奖
randomPick();
}
```
请注意,在抽奖函数中我们使用了 setTimeout 方法,使得每次抽奖间隔50毫秒,以达到更好的动画效果。此外,我们还使用了 Set 集合来确保抽出的号码不会重复。最后,当抽出55个号码后,我们弹出提示框显示中奖信息,并解禁抽奖按钮。
阅读全文