HTML大轉(zhuǎn)盤抽獎實現(xiàn)教程

發(fā)布時間：2025-07-25 熱度：

大轉(zhuǎn)盤抽獎是網(wǎng)頁中常見的互動功能，下面我將介紹如何使用HTML、CSS和JavaScript實現(xiàn)一個完整的大轉(zhuǎn)盤抽獎系統(tǒng)。

基本HTML結(jié)構(gòu)

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>大轉(zhuǎn)盤抽獎</title>     <style>         /* 樣式部分將在下面單獨展示 */     </style> </head> <body>     <div>         <div>             <div></div>             <div></div>         </div>         <button id="startBtn">開始抽獎</button>         <div id="result"></div>     </div>     <script>         // JavaScript代碼將在下面單獨展示     </script> </body> </html>

CSS樣式設(shè)計

body {     font-family: 'Microsoft YaHei', sans-serif;     display: flex;     justify-content: center;     align-items: center;     height: 100vh;     background-color: #f5f5f5;     margin: 0; } .lottery-container {     text-align: center;     position: relative; } .wheel-container {     position: relative;     width: 300px;     height: 300px;     margin: 0 auto 30px; } .wheel {     width: 100%;     height: 100%;     border-radius: 50%;     background: conic-gradient(         #FF5252 0% 16.66%,         #FF9800 16.66% 33.33%,         #FFEB3B 33.33% 50%,         #4CAF50 50% 66.66%,         #2196F3 66.66% 83.33%,         #9C27B0 83.33% 100%     );     position: relative;     transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .pointer {     position: absolute;     top: -20px;     left: 50%;     transform: translateX(-50%);     width: 0;     height: 0;     border-left: 20px solid transparent;     border-right: 20px solid transparent;     border-top: 40px solid #e53935;     z-index: 10; } .start-btn {     padding: 10px 30px;     font-size: 18px;     background-color: #e53935;     color: white;     border: none;     border-radius: 5px;     cursor: pointer;     transition: background-color 0.3s; } .start-btn:hover {     background-color: #c62828; } .result {     margin-top: 20px;     font-size: 24px;     font-weight: bold;     min-height: 36px; } .wheel-item {     position: absolute;     width: 50%;     height: 50%;     transform-origin: bottom right;     display: flex;     align-items: center;     justify-content: center;     color: white;     font-weight: bold;     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }

JavaScript邏輯實現(xiàn)

document.addEventListener('DOMContentLoaded', function() {     const wheel = document.querySelector('.wheel');     const startBtn = document.getElementById('startBtn');     const resultDisplay = document.getElementById('result');          // 獎品配置     const prizes = [         { name: '一等獎', color: '#FF5252' },         { name: '二等獎', color: '#FF9800' },         { name: '三等獎', color: '#FFEB3B' },         { name: '四等獎', color: '#4CAF50' },         { name: '五等獎', color: '#2196F3' },         { name: '謝謝參與', color: '#9C27B0' }     ];          // 初始化轉(zhuǎn)盤     function initWheel() {         const sectorAngle = 360 / prizes.length;                  // 創(chuàng)建獎品扇區(qū)         prizes.forEach((prize, index) => {             const item = document.createElement('div');             item.className = 'wheel-item';             item.textContent = prize.name;             item.style.transform = `rotate(${index * sectorAngle}deg)`;             item.style.color = getContrastColor(prize.color);             wheel.appendChild(item);         });     }          // 獲取對比色（確保文字可讀）     function getContrastColor(hexColor) {         const r = parseInt(hexColor.substr(1, 2), 16);         const g = parseInt(hexColor.substr(3, 2), 16);         const b = parseInt(hexColor.substr(5, 2), 16);         const brightness = (r * 299 + g * 587 + b * 114) / 1000;         return brightness > 128 ? '#000000' : '#FFFFFF';     }          // 開始抽獎     function startLottery() {         startBtn.disabled = true;         resultDisplay.textContent = '';                  // 隨機決定中獎結(jié)果（實際項目中可能從服務(wù)器獲?。?nbsp;        const winningIndex = Math.floor(Math.random() * prizes.length);         const prize = prizes[winningIndex];                  // 計算旋轉(zhuǎn)角度（多轉(zhuǎn)幾圈然后停在目標(biāo)位置）         const sectorAngle = 360 / prizes.length;         const targetAngle = 360 * 5 + (360 - (winningIndex * sectorAngle + sectorAngle / 2));                  // 應(yīng)用旋轉(zhuǎn)動畫         wheel.style.transform = `rotate(${targetAngle}deg)`;                  // 動畫結(jié)束后顯示結(jié)果         setTimeout(() => {             resultDisplay.textContent = `恭喜獲得: ${prize.name}`;             startBtn.disabled = false;         }, 4000);     }          // 初始化轉(zhuǎn)盤     initWheel();          // 綁定開始按鈕事件     startBtn.addEventListener('click', startLottery); });