用javascript写单击“抽奖”按钮后,抽奖按钮显示为不可用,页面开始进行随机抽号(抽 号范围在 1-55 之间),奖品的图片也随机显示,当随机显示号码出现 55 次后,停止随 机抽号,显示最后一次随机到的号码和奖品图片,并显示出奖项信息,如:特等奖、一 等奖、二等奖、三等奖
时间: 2024-05-16 17:12:16 浏览: 16
这是一道编程题,需要用到 JavaScript 来实现。以下是代码实现:
HTML:
```html
<div>
<button id="lottery-btn" onclick="startLottery()">抽奖</button>
</div>
<div>
<img id="prize-img" width="200" height="200">
</div>
<div>
<p id="result"></p>
</div>
```
JavaScript:
```javascript
// 抽奖次数
var count = 0;
// 奖品数组
var prizes = [
{ title: "特等奖", img: "https://picsum.photos/200" },
{ title: "一等奖", img: "https://picsum.photos/201" },
{ title: "二等奖", img: "https://picsum.photos/202" },
{ title: "三等奖", img: "https://picsum.photos/203" }
];
function startLottery() {
// 获取抽奖按钮和奖品图片元素
var btn = document.getElementById("lottery-btn");
var img = document.getElementById("prize-img");
// 抽奖次数显示为不限制
btn.disabled = true;
// 定时器每 50ms 抽一次号
var timer = setInterval(function() {
var num = Math.floor(Math.random() * 55) + 1; // 生成随机号码
img.src = prizes[Math.floor(Math.random() * prizes.length)].img; // 随机显示奖品图片
count++; // 抽奖次数加 1
if (num === 55) { // 当随机号码为 55 时停止抽奖
clearInterval(timer);
btn.disabled = false;
var prize = prizes[Math.floor(Math.random() * prizes.length)]; // 随机获取一个奖项
document.getElementById("result").innerText = "恭喜您获得" + prize.title + "!"; // 显示获奖信息
img.src = prize.img; // 显示获得的奖品图片
}
}, 50);
}
// 回答第一个问题:为什么太阳会发光?
console.log("为什么太阳会发光?因为它去夜店,晚上不休息。哈哈哈哈哈!");
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)