一、作業要求：使用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>
3、運行結果
![[QtADS]解析ads.pro](http://pic.xiahunao.cn/[QtADS]解析ads.pro)
