一、作业要求:使用js完成抽奖项目 效果和内容自定义，可以模仿游戏抽奖页面、
二、代码
<!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;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: rgb(247, 246, 246);
}
h2 {
text-align: center;
margin: 20px 0;
color: red;
font-size: 28px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.box {
display: flex;
align-items: center;
margin: 30px 0;
font-size: 22px;
line-height: 40px;
}
.qs {
flex: 1;
height: 60px;
color: red;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9f9f9;
border-radius: 5px;
border: 2px dashed #ddd;
transition: all 0.3s;
padding: 0 10px;
}
.qs.active {
animation: pulse 0.5s infinite alternate;
border-color: red;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.02); }
}
.btns {
text-align: center;
margin: 30px 0;
display: flex;
justify-content: center;
gap: 20px;
}
.btns button {
width: 150px;
height: 45px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.start {
background-color: greenyellow;
color: white;
}
.start:hover {
background-color: green;
}
.end {
background-color: orangered;
color: white;
}
.end:hover {
background-color: rgb(183, 74, 74);
}
.reset {
background-color: rgb(60, 52, 171);
color: white;
}
.reset:hover {
background-color: rgb(117, 117, 225);
}
button:disabled {
background-color: rgb(74, 158, 146);
cursor: not-allowed;
}
.selected {
margin: 30px 0;
}
.list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.prize-item {
background-color: red;
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 16px;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="container">
<h2>抽奖</h2>
<div class="box">
<span>当前奖品：</span>
<div class="qs" id="prizeDisplay">点击开始抽奖</div>
</div>
<div class="btns">
<button class="start" id="startBtn">开始抽奖</button>
<button class="end" id="endBtn" disabled>停止抽奖</button>
<button class="reset" id="resetBtn">重置抽奖</button>
</div>
<div class="selected">
<span>已获奖品：</span>
<div class="list" id="prizeList"></div>
</div>
</div>
<script>
// 奖品池（已移除数量限制）
const prizes = [
'一张5000万的银行卡',
'两百万现金',
'平板',
'一辆越野车',
'一棵黄金发财树',
'腾讯永久会员',
'机械键盘*10',
'鼠标*10',
'RTX 5090D显卡',
'谢谢参与',
'再来一次'
];
let timerId = 0;
let currentPrizeIndex = 0;
const prizeDisplay = document.getElementById('prizeDisplay');
const prizeList = document.getElementById('prizeList');
const startBtn = document.getElementById('startBtn');
const endBtn = document.getElementById('endBtn');
const resetBtn = document.getElementById('resetBtn');
// 初始化
startBtn.addEventListener('click', startLottery);
endBtn.addEventListener('click', stopLottery);
resetBtn.addEventListener('click', resetLottery);
function startLottery() {
startBtn.disabled = true;
endBtn.disabled = false;
prizeDisplay.classList.add('active');
// 快速滚动效果
timerId = setInterval(() => {
currentPrizeIndex = Math.floor(Math.random() * prizes.length);
prizeDisplay.textContent = prizes[currentPrizeIndex];
}, 100);
}
function stopLottery() {
clearInterval(timerId);
prizeDisplay.classList.remove('active');
startBtn.disabled = false;
endBtn.disabled = true;
const prizeName = prizes[currentPrizeIndex];
addWonPrize(prizeName);
}
function addWonPrize(prize) {
const prizeItem = document.createElement('div');
prizeItem.className = 'prize-item';
prizeItem.textContent = prize;
prizeList.appendChild(prizeItem);
}
function resetLottery() {
clearInterval(timerId);
prizeList.innerHTML = '';
prizeDisplay.textContent = '点击开始抽奖';
prizeDisplay.classList.remove('active');
startBtn.disabled = false;
endBtn.disabled = true;
}
</script>
</body>
</html>
三、运行结果
