当前位置：首页 > news >正文

wed前端第三次作业

news 2025/8/12 10:52:42

一：使用js完成抽奖项目效果和内容自定义，可以模仿游戏抽奖页面

1、相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>抽奖活动</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}.selected {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.list {color: red;}</style>
</head>
<body><h2>随机抽奖</h2><div class="box"><span>当前奖品：</span><div class="qs">点击开始抽奖</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><div class="selected"><span>已获奖品：</span><div class="list"></div></div><script>// 奖品池 const prizes = ['iPhone 15 Pro','Switch 游戏机','小米平板 6','100 元话费','蓝牙耳机','腾讯视频年卡','机械键盘','充电宝','抱枕','谢谢参与','再来一次'];let timerId = 0;let random    = 0;const qs      = document.querySelector('.qs');const listBox = document.querySelector('.list');const start   = document.querySelector('.start');const end     = document.querySelector('.end');start.addEventListener('click', () => {if (prizes.length <= 1) {start.disabled = end.disabled = true;return;}timerId = setInterval(() => {random = Math.floor(Math.random() * prizes.length);qs.textContent = prizes[random];}, 100);});end.addEventListener('click', () => {clearInterval(timerId);const prize = prizes.splice(random, 1)[0]; showPrize(prize);});function showPrize(prize) {const div = document.createElement('div');div.textContent = prize;listBox.appendChild(div);}</script>
</body>
</html>