html抽奖功能
1.代码部分
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>幸运抽奖 - 游戏风格抽奖系统</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- Tailwind 配置 --><script>tailwind.config = {theme: {extend: {colors: {primary: '#6C2BD9', // 主色调：深紫色secondary: '#FF3366', // 强调色：亮红色accent: '#FFD700', // 金色：用于高亮和奖励dark: '#121212', // 深色背景'dark-light': '#1E1E1E', // 稍亮的深色},fontFamily: {game: ['"Press Start 2P"', 'Inter', 'sans-serif'],inter: ['Inter', 'sans-serif'],},animation: {'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite','float': 'float 3s ease-in-out infinite','shine': 'shine 2s infinite',},keyframes: {float: {'0%, 100%': { transform: 'translateY(0)' },'50%': { transform: 'translateY(-10px)' },},shine: {'0%, 100%': { boxShadow: '0 0 15px rgba(255, 215, 0, 0.7)' },'50%': { boxShadow: '0 0 25px rgba(255, 215, 0, 1)' },}}}}}</script><!-- 自定义样式 --><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.text-shadow {text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}.text-shadow-glow {text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);}.rotate-wheel {transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);}.prize-item {@apply absolute w-1/2 h-1/2 transform origin-bottom-right flex items-center justify-center p-2;}.prize-text {@apply text-xs md:text-sm font-bold text-center transform rotate-45 w-full;}.wheel-border {@apply absolute inset-0 rounded-full border-4 border-accent shadow-[0_0_20px_rgba(255,215,0,0.5)];}.btn-hover {@apply transition-all duration-300 hover:scale-105 hover:shadow-lg active:scale-95;}.glass-effect {@apply bg-white/10 backdrop-blur-md border border-white/20;}}</style><!-- 引入字体 --><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
</head><body class="bg-gradient-to-br from-dark to-dark-light min-h-screen font-inter text-gray-100 overflow-x-hidden"><!-- 背景装饰 --><div class="fixed inset-0 overflow-hidden pointer-events-none z-0"><div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full filter blur-[100px] animate-pulse-slow"></div><div class="absolute bottom-1/3 right-1/3 w-80 h-80 bg-secondary/20 rounded-full filter blur-[100px] animate-pulse-slow" style="animation-delay: 1s;"></div></div><div class="container mx-auto px-4 py-8 relative z-10"><!-- 页面标题 --><header class="text-center mb-8 md:mb-12"><h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent to-secondary mb-2 text-shadow-glow">幸运抽奖</h1><p class="text-gray-400 max-w-md mx-auto">转动轮盘，赢取丰厚奖励！每次抽奖消耗10个积分，祝您好运！</p></header><main class="max-w-5xl mx-auto"><!-- 玩家信息和积分 --><div class="glass-effect rounded-xl p-4 md:p-6 mb-8 flex flex-col md:flex-row justify-between items-center"><div class="flex items-center mb-4 md:mb-0"><div class="w-12 h-12 rounded-full bg-primary/30 flex items-center justify-center mr-4 border-2 border-accent"><i class="fa fa-user text-accent text-xl"></i></div><div><h2 class="font-bold text-lg">玩家名称</h2><p class="text-gray-400 text-sm">等级 25 · 精英会员</p></div></div><div class="glass-effect rounded-full px-6 py-3 flex items-center space-x-2 border border-accent/30"><i class="fa fa-diamond text-accent"></i><span class="font-bold text-xl" id="user-points">150</span><span class="text-gray-400">积分</span></div></div><!-- 抽奖区域 --><div class="flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center"><!-- 抽奖轮盘 --><div class="relative w-full max-w-md aspect-square"><!-- 轮盘容器 --><div class="relative w-full h-full rounded-full glass-effect overflow-hidden"><!-- 轮盘 --><div id="wheel" class="w-full h-full rotate-wheel"><!-- 奖品区域将通过JS动态生成 --></div><!-- 轮盘边框 --><div class="wheel-border"></div><!-- 中心按钮 --><div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 md:w-20 md:h-20 rounded-full bg-secondary z-10 flex items-center justify-center btn-hover animate-shine cursor-pointer" id="spin-btn"><div class="w-12 h-12 md:w-16 md:h-16 rounded-full bg-accent flex items-center justify-center"><span class="font-bold text-dark">开始</span></div></div></div><!-- 指针 --><div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-16 md:w-10 md:h-20 z-20"><div class="w-full h-full bg-accent clip-triangle-down shadow-lg"></div></div></div><!-- 右侧信息区 --><div class="w-full max-w-md glass-effect rounded-xl p-5"><!-- 中奖记录 --><div class="mb-6"><h3 class="text-lg font-bold mb-3 flex items-center"><i class="fa fa-trophy text-accent mr-2"></i>中奖记录</h3><div id="history" class="max-h-40 overflow-y-auto space-y-2 text-sm"><div class="p-2 bg-dark/50 rounded border border-gray-700/50"><span class="text-gray-400">刚刚</span> · 获得了 <span class="text-accent font-bold">100积分</span></div><div class="p-2 bg-dark/50 rounded border border-gray-700/50"><span class="text-gray-400">5分钟前</span> · 获得了 <span class="text-green-400 font-bold">稀有装备</span></div></div></div><!-- 奖品列表 --><div><h3 class="text-lg font-bold mb-3 flex items-center"><i class="fa fa-gift text-secondary mr-2"></i>奖品列表</h3><div class="grid grid-cols-2 gap-2"><div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center"><i class="fa fa-diamond text-accent mr-2"></i><span>50积分</span></div><div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center"><i class="fa fa-diamond text-accent mr-2"></i><span>100积分</span></div><div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center"><i class="fa fa-shield text-blue-400 mr-2"></i><span>普通装备</span></div><div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center"><i class="fa fa-shield text-purple-400 mr-2"></i><span>稀有装备</span></div><div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center"><i class="fa fa-shield text-yellow-400 mr-2"></i><span>史诗装备</span></div><div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center"><i class="fa fa-refresh text-gray-400 mr-2"></i><span>再来一次</span></div></div></div></div></div><!-- 底部按钮 --><div class="mt-10 text-center"><button class="bg-primary hover:bg-primary/80 text-white font-bold py-3 px-8 rounded-full btn-hover mr-4"><i class="fa fa-plus-circle mr-2"></i>获取更多积分</button><button class="bg-dark-light hover:bg-dark text-white font-bold py-3 px-8 rounded-full btn-hover"><i class="fa fa-info-circle mr-2"></i>活动规则</button></div></main><!-- 中奖弹窗 --><div id="prize-modal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden"><div class="glass-effect rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content"><div class="text-center"><div class="w-20 h-20 mx-auto bg-accent/20 rounded-full flex items-center justify-center mb-4 border-2 border-accent animate-float"><i id="prize-icon" class="fa fa-diamond text-3xl text-accent"></i></div><h2 class="text-2xl font-bold mb-2 text-shadow-glow" id="prize-title">恭喜中奖！</h2><p class="text-gray-300 mb-6" id="prize-desc">你获得了50积分奖励！</p><button id="close-modal" class="bg-secondary hover:bg-secondary/80 text-white font-bold py-2 px-6 rounded-full btn-hover">确定</button></div></div></div></div><script>// 奖品配置const prizes = [{ name: "50积分", icon: "fa-diamond", color: "#FFD700", textColor: "#121212" },{ name: "普通装备", icon: "fa-shield", color: "#4CAF50", textColor: "#FFFFFF" },{ name: "100积分", icon: "fa-diamond", color: "#FFD700", textColor: "#121212" },{ name: "稀有装备", icon: "fa-shield", color: "#9C27B0", textColor: "#FFFFFF" },{ name: "再来一次", icon: "fa-refresh", color: "#2196F3", textColor: "#FFFFFF" },{ name: "史诗装备", icon: "fa-shield", color: "#FF9800", textColor: "#FFFFFF" }];// 计算每个奖品的角度const sliceAngle = 360 / prizes.length;const wheel = document.getElementById('wheel');const spinBtn = document.getElementById('spin-btn');const userPoints = document.getElementById('user-points');const prizeModal = document.getElementById('prize-modal');const modalContent = document.getElementById('modal-content');const closeModal = document.getElementById('close-modal');const prizeTitle = document.getElementById('prize-title');const prizeDesc = document.getElementById('prize-desc');const prizeIcon = document.getElementById('prize-icon');const historyContainer = document.getElementById('history');// 初始化积分let points = 150;let isSpinning = false;// 创建轮盘奖品区域function createWheel() {prizes.forEach((prize, index) => {const slice = document.createElement('div');slice.className = 'prize-item';slice.style.transform = `rotate(${index * sliceAngle}deg)`;slice.style.backgroundColor = prize.color;const textContainer = document.createElement('div');textContainer.className = 'prize-text';textContainer.style.color = prize.textColor;textContainer.innerHTML = `<i class="fa ${prize.icon} mb-1"></i><br>${prize.name}`;slice.appendChild(textContainer);wheel.appendChild(slice);});}// 旋转轮盘function spinWheel() {if (isSpinning || points < 10) return;// 扣除积分points -= 10;userPoints.textContent = points;isSpinning = true;spinBtn.style.pointerEvents = 'none';// 随机旋转角度 (3-5圈 + 随机位置)const randomSpin = 1080 + Math.floor(Math.random() * 1080) + (Math.random() * 360);const finalRotation = wheelRotation + randomSpin;// 应用旋转wheel.style.transform = `rotate(${finalRotation}deg)`;// 计算中奖奖品setTimeout(() => {const normalizedRotation = finalRotation % 360;const winningIndex = Math.floor(((360 - normalizedRotation) % 360) / sliceAngle);const winningPrize = prizes[winningIndex];// 显示中奖结果showPrize(winningPrize);// 更新旋转角度wheelRotation = finalRotation;isSpinning = false;spinBtn.style.pointerEvents = 'auto';}, 5000); // 与CSS过渡时间一致}// 显示中奖结果function showPrize(prize) {// 更新弹窗内容prizeTitle.textContent = `恭喜获得${prize.name}！`;prizeDesc.textContent = getPrizeDescription(prize);prizeIcon.className = `fa ${prize.icon} text-3xl`;prizeIcon.style.color = prize.color;// 显示弹窗prizeModal.classList.remove('hidden');setTimeout(() => {modalContent.classList.remove('scale-95', 'opacity-0');modalContent.classList.add('scale-100', 'opacity-100');}, 10);// 更新积分（如果中奖的是积分）if (prize.name.includes('积分')) {const addPoints = parseInt(prize.name);points += addPoints;userPoints.textContent = points;}// 如果是"再来一次"，不扣除额外积分if (prize.name === '再来一次') {points += 10;userPoints.textContent = points;}// 添加到历史记录addToHistory(prize);}// 获取奖品描述function getPrizeDescription(prize) {const descriptions = {"50积分": "你获得了50积分，可以用于再次抽奖或兑换道具","100积分": "太棒了！你获得了100积分奖励","普通装备": "获得一件普通装备，提升你的战斗能力","稀有装备": "恭喜！你获得了一件稀有的装备","史诗装备": "太幸运了！你获得了一件史诗级装备","再来一次": "获得一次免费抽奖机会，可以再次转动轮盘"};return descriptions[prize.name] || "";}// 添加到历史记录function addToHistory(prize) {const historyItem = document.createElement('div');historyItem.className = 'p-2 bg-dark/50 rounded border border-gray-700/50 transform transition-all duration-300 scale-95 opacity-0';let prizeText = '';if (prize.name.includes('积分')) {prizeText = `<span class="text-accent font-bold">${prize.name}</span>`;} else if (prize.name.includes('普通')) {prizeText = `<span class="text-green-400 font-bold">${prize.name}</span>`;} else if (prize.name.includes('稀有')) {prizeText = `<span class="text-purple-400 font-bold">${prize.name}</span>`;} else if (prize.name.includes('史诗')) {prizeText = `<span class="text-yellow-400 font-bold">${prize.name}</span>`;} else {prizeText = `<span class="text-blue-400 font-bold">${prize.name}</span>`;}historyItem.innerHTML = `<span class="text-gray-400">刚刚</span> · 获得了 ${prizeText}`;// 添加到历史记录顶部historyContainer.insertBefore(historyItem, historyContainer.firstChild);// 触发动画setTimeout(() => {historyItem.classList.remove('scale-95', 'opacity-0');historyItem.classList.add('scale-100', 'opacity-100');}, 10);// 限制历史记录数量if (historyContainer.children.length > 5) {historyContainer.removeChild(historyContainer.lastChild);}}// 关闭弹窗function closePrizeModal() {modalContent.classList.remove('scale-100', 'opacity-100');modalContent.classList.add('scale-95', 'opacity-0');setTimeout(() => {prizeModal.classList.add('hidden');}, 300);}// 初始化轮盘旋转角度let wheelRotation = 0;// 初始化createWheel();// 事件监听spinBtn.addEventListener('click', spinWheel);closeModal.addEventListener('click', closePrizeModal);// 点击弹窗外部关闭prizeModal.addEventListener('click', (e) => {if (e.target === prizeModal) {closePrizeModal();}});// 添加自定义样式const style = document.createElement('style');style.textContent = `.clip-triangle-down {clip-path: polygon(50% 100%, 0 0, 100% 0);}`;document.head.appendChild(style);</script>
</body>
</html>
2.结果展示
