网页代码如下：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>幸运转盘抽奖</title><scriptsrc="https://cdn.tailwindcss.com"></script><linkhref="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"rel="stylesheet"><style>@keyframesrotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.wheel-container{position:relative;width:400px;height:400px;margin:0 auto;}.wheel{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;box-shadow:0 10px 30pxrgba(0,0,0,0.3);transition:transform 4scubic-bezier(0.23,1,0.32,1);}.wheel-segment{position:absolute;width:50%;height:50%;transform-origin:right bottom;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:14px;color:white;text-shadow:1px 1px 2pxrgba(0,0,0,0.5);}.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:30px solid #ef4444;z-index:10;}.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;font-size:16px;box-shadow:0 4px 15pxrgba(0,0,0,0.3);cursor:pointer;transition:all 0.3s ease;z-index:5;}.wheel-center:hover{transform:translate(-50%,-50%)scale(1.1);box-shadow:0 6px 20pxrgba(0,0,0,0.4);}.wheel-center.spinning{pointer-events:none;opacity:0.8;}.prize-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border-radius:15px;padding:20px;margin:10px;box-shadow:0 5px 15pxrgba(0,0,0,0.2);transition:transform 0.3s ease;}.prize-card:hover{transform:translateY(-5px);}@media(max-width:640px){.wheel-container{width:300px;height:300px;}.wheel-center{width:60px;height:60px;font-size:14px;}}</style></head><bodyclass="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 min-h-screen"><divclass="container mx-auto px-4 py-8"><!-- 标题区域 --><divclass="text-center mb-8"><h1class="text-4xl md:text-6xl font-bold text-white mb-4 bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent"><iclass="fas fa-gift mr-3"></i>幸运转盘抽奖</h1><pclass="text-xl text-gray-300">转动转盘，赢取丰厚奖品！</p></div><!-- 抽奖区域 --><divclass="flex flex-col lg:flex-row items-center justify-center gap-8"><!-- 转盘 --><divclass="wheel-container"><divclass="wheel-pointer"></div><divid="wheel"class="wheel"><!-- 转盘扇形将通过JavaScript动态生成 --></div><divid="spinButton"class="wheel-center"><divclass="text-center"><iclass="fas fa-play mb-1"></i><div>开始</div></div></div></div><!-- 奖品列表 --><divclass="bg-white/10 backdrop-blur-sm rounded-2xl p-6 shadow-2xl"><h3class="text-2xl font-bold text-white mb-4 text-center"><iclass="fas fa-trophy mr-2"></i>奖品列表</h3><divid="prizeList"class="space-y-3"><!-- 奖品列表将通过JavaScript动态生成 --></div></div></div><!-- 抽奖结果 --><divid="resultModal"class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50"><divclass="bg-white rounded-2xl p-8 max-w-md mx-4 text-center shadow-2xl"><divid="resultIcon"class="text-6xl mb-4"></div><h2id="resultTitle"class="text-2xl font-bold mb-4"></h2><pid="resultMessage"class="text-gray-600 mb-4"></p><buttononclick="closeResult()"class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition-all duration-300">继续抽奖</button></div></div><!-- 抽奖记录 --><divclass="mt-8 bg-white/10 backdrop-blur-sm rounded-2xl p-6 shadow-2xl"><h3class="text-2xl font-bold text-white mb-4 text-center"><iclass="fas fa-history mr-2"></i>抽奖记录</h3><divid="historyList"class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><pclass="text-gray-300 text-center col-span-full">暂无抽奖记录</p></div></div></div><script>// 奖品配置constprizes=[{name:"一等奖",color:"#ef4444",icon:"🎁",probability:0.05},{name:"二等奖",color:"#f59e0b",icon:"🎁",probability:0.1},{name:"三等奖",color:"#10b981",icon:"🎁",probability:0.15},{name:"四等奖",color:"#3b82f6",icon:"🎁",probability:0.2},{name:"五等奖",color:"#8b5cf6",icon:"🎁",probability:0.25},{name:"谢谢参与",color:"#6b7280",icon:"😊",probability:0.25}];letisSpinning=false;lethistory=[];// 初始化转盘functioninitWheel(){constwheel=document.getElementById('wheel');constsegmentAngle=360/prizes.length;prizes.forEach((prize,index)=>{constsegment=document.createElement('div');segment.className='wheel-segment';segment.style.background=prize.color;segment.style.transform=`rotate(${index*segmentAngle}deg)`;segment.style.clipPath=`polygon(0 0, 100% 0, 50% 100%)`;constcontent=document.createElement('div');content.style.transform=`rotate(${segmentAngle/2}deg)`;content.innerHTML=`<div class="text-center"> <div class="text-2xl mb-1">${prize.icon}</div> <div class="text-sm">${prize.name}</div> </div>`;segment.appendChild(content);wheel.appendChild(segment);});}// 初始化奖品列表functioninitPrizeList(){constprizeList=document.getElementById('prizeList');prizes.forEach(prize=>{constprizeCard=document.createElement('div');prizeCard.className='prize-card';prizeCard.innerHTML=`<div class="flex items-center justify-between"> <div class="flex items-center"> <span class="text-2xl mr-3">${prize.icon}</span> <span class="font-semibold">${prize.name}</span> </div> <span class="text-sm opacity-75">${(prize.probability*100).toFixed(0)}%</span> </div>`;prizeList.appendChild(prizeCard);});}// 抽奖逻辑functionspinWheel(){if(isSpinning)return;isSpinning=true;constspinButton=document.getElementById('spinButton');spinButton.classList.add('spinning');// 随机选择奖品constrandom=Math.random();letcumulativeProbability=0;letselectedPrize=prizes[prizes.length-1];letselectedIndex=prizes.length-1;for(leti=0;i<prizes.length;i++){cumulativeProbability+=prizes[i].probability;if(random<=cumulativeProbability){selectedPrize=prizes[i];selectedIndex=i;break;}}// 计算旋转角度constsegmentAngle=360/prizes.length;consttargetAngle=selectedIndex*segmentAngle+segmentAngle/2;constspins=5+Math.random()*3;// 5-8圈constfinalAngle=spins*360+(360-targetAngle);// 旋转转盘constwheel=document.getElementById('wheel');wheel.style.transform=`rotate(${finalAngle}deg)`;// 显示结果setTimeout(()=>{showResult(selectedPrize);addToHistory(selectedPrize);isSpinning=false;spinButton.classList.remove('spinning');},4000);}// 显示抽奖结果functionshowResult(prize){constmodal=document.getElementById('resultModal');consticon=document.getElementById('resultIcon');consttitle=document.getElementById('resultTitle');constmessage=document.getElementById('resultMessage');icon.textContent=prize.icon;title.textContent=prize.name;if(prize.name==='谢谢参与'){message.textContent='很遗憾，这次没有中奖，再接再厉！';}else{message.textContent=`恭喜您获得${prize.name}！请联系客服领取奖品。`;}modal.classList.remove('hidden');modal.classList.add('flex');}// 关闭结果弹窗functioncloseResult(){constmodal=document.getElementById('resultModal');modal.classList.add('hidden');modal.classList.remove('flex');}// 添加到历史记录functionaddToHistory(prize){constnow=newDate();consttimeStr=now.toLocaleString('zh-CN');history.unshift({prize:prize.name,icon:prize.icon,time:timeStr});// 只保留最近10条记录if(history.length>10){history=history.slice(0,10);}updateHistoryDisplay();}// 更新历史记录显示functionupdateHistoryDisplay(){consthistoryList=document.getElementById('historyList');if(history.length===0){historyList.innerHTML='<p class="text-gray-300 text-center col-span-full">暂无抽奖记录</p>';return;}historyList.innerHTML=history.map(record=>`<div class="bg-white/20 backdrop-blur-sm rounded-lg p-4 text-white"> <div class="flex items-center justify-between"> <div class="flex items-center"> <span class="text-xl mr-2">${record.icon}</span> <span class="font-semibold">${record.prize}</span> </div> <span class="text-sm opacity-75">${record.time}</span> </div> </div>`).join('');}// 事件监听document.getElementById('spinButton').addEventListener('click',spinWheel);// 点击模态框外部关闭document.getElementById('resultModal').addEventListener('click',function(e){if(e.target===this){closeResult();}});// 初始化document.addEventListener('DOMContentLoaded',function(){initWheel();initPrizeList();});</script></body></html>
