HTML大转盘抽奖实现教程

发布时间：2025-07-25 热度：

大转盘抽奖是网页中常见的互动功能，下面我将介绍如何使用HTML、CSS和JavaScript实现一个完整的大转盘抽奖系统。

基本HTML结构

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>大转盘抽奖</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样式设计

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逻辑实现

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' }     ];          // 初始化转盘     function initWheel() {         const sectorAngle = 360 / prizes.length;                  // 创建奖品扇区         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 = '';                  // 随机决定中奖结果（实际项目中可能从服务器获取）         const winningIndex = Math.floor(Math.random() * prizes.length);         const prize = prizes[winningIndex];                  // 计算旋转角度（多转几圈然后停在目标位置）         const sectorAngle = 360 / prizes.length;         const targetAngle = 360 * 5 + (360 - (winningIndex * sectorAngle + sectorAngle / 2));                  // 应用旋转动画         wheel.style.transform = `rotate(${targetAngle}deg)`;                  // 动画结束后显示结果         setTimeout(() => {             resultDisplay.textContent = `恭喜获得: ${prize.name}`;             startBtn.disabled = false;         }, 4000);     }          // 初始化转盘     initWheel();          // 绑定开始按钮事件     startBtn.addEventListener('click', startLottery); });