首页html转盘抽奖代码

html转盘抽奖代码

时间: 2024-12-09 19:14:08 浏览: 15

HTML转盘抽奖通常涉及JavaScript的交互效果。下面是一个简单的例子，展示了如何创建一个基本的HTML和JavaScript转盘抽奖功能： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>转盘抽奖</title> <style> .spin { width: 200px; height: 200px; border-radius: 50%; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; position: relative; } .handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background-color: #3498db; cursor: pointer; } .arrow { position: absolute; bottom: 10px; font-size: 30px; color: white; } </style> </head> <body> <div class="spin"> <div class="handle" onclick="startSpin()"></div> <div class="arrow">↻</div> </div> <script> var spin = document.querySelector('.spin'); var angle = 0; function startSpin() { const maxDegrees = 360; // 转盘总角度 const targetDegrees = Math.floor(Math.random() * maxDegrees); // 抽奖结果范围 (function spinLoop() { if (angle >= targetDegrees) { endSpin(); } else { angle += 1; // 每次旋转1度 spin.style.transform = `rotate(${angle}deg)`; setTimeout(spinLoop, 1); } })(); } function endSpin() { spin.style.animation = 'stop 0.5s ease'; alert('恭喜你，获得号码 ' + angle); } </script> </body> </html> ``` 在这个例子中，用户点击圆圈开始转动转盘，当到达随机生成的角度时，就会触发结束并显示获奖提示。注意这只是一个基础版本，实际应用可能需要更复杂的功能，如增加样式、动画效果以及服务器端验证等。

阅读全文