当前位置： 首页 > ops >正文

使用js完成抽奖项目 效果和内容自定义，可以模仿游戏抽奖页面

ops 2025/8/20 0:26:30

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>幸运大转盘抽奖</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px;color: white;overflow-x: hidden;}.container {max-width: 1200px;width: 100%;display: flex;flex-wrap: wrap;justify-content: center;gap: 40px;padding: 20px;}.header {text-align: center;margin-bottom: 30px;width: 100%;}.header h1 {font-size: 3.5rem;text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);margin-bottom: 10px;background: linear-gradient(to right, #ffd700, #ff9800, #ffd700);-webkit-background-clip: text;-webkit-text-fill-color: transparent;letter-spacing: 3px;}.header p {font-size: 1.2rem;max-width: 600px;margin: 0 auto;color: #e0e0e0;line-height: 1.6;}.wheel-container {position: relative;width: 500px;height: 500px;flex-shrink: 0;}.wheel {width: 100%;height: 100%;border-radius: 50%;position: relative;overflow: hidden;border: 10px solid #ffd700;box-shadow: 0 0 30px rgba(255, 215, 0, 0.5),inset 0 0 20px rgba(0, 0, 0, 0.7);background: #2c3e50;transition: transform 4s cubic-bezier(0.17, 0.67, 0.21, 0.99);}.wheel-item {position: absolute;width: 50%;height: 50%;transform-origin: bottom right;left: 0;top: 0;display: flex;align-items: center;justify-content: center;padding-left: 60px;padding-bottom: 20px;font-weight: bold;text-align: center;color: #fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);}.wheel-item .content {transform: rotate(45deg);width: 100px;}.wheel-pointer {position: absolute;top: -50px;left: 50%;transform: translateX(-50%);width: 60px;height: 80px;z-index: 10;filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));}.wheel-pointer::before {content: "";position: absolute;width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 50px solid #e74c3c;}.wheel-pointer::after {content: "";position: absolute;width: 30px;height: 30px;background: #ffd700;border-radius: 50%;top: -15px;left: 50%;transform: translateX(-50%);box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);}.controls {display: flex;flex-direction: column;align-items: center;gap: 30px;flex: 1;max-width: 400px;}.btn-spin {background: linear-gradient(to bottom, #ffd700, #ff9800);color: #8B4513;border: none;border-radius: 50px;padding: 20px 60px;font-size: 1.8rem;font-weight: bold;cursor: pointer;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3),inset 0 2px 5px rgba(255, 255, 255, 0.5);transition: all 0.3s ease;position: relative;overflow: hidden;z-index: 1;}.btn-spin:hover {transform: translateY(-5px);box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4),inset 0 2px 5px rgba(255, 255, 255, 0.5);}.btn-spin:active {transform: translateY(0);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),inset 0 2px 5px rgba(255, 255, 255, 0.5);}.btn-spin::before {content: "";position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);transition: 0.5s;z-index: -1;}.btn-spin:hover::before {left: 100%;}.result-container {background: rgba(25, 35, 65, 0.8);border-radius: 20px;padding: 30px;width: 100%;text-align: center;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);border: 2px solid #ffd700;}.result-title {font-size: 1.8rem;margin-bottom: 20px;color: #ffd700;text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);}#result {font-size: 2.5rem;min-height: 60px;display: flex;align-items: center;justify-content: center;font-weight: bold;color: #ff9800;text-shadow: 0 0 10px rgba(255, 152, 0, 0.5);transition: all 0.5s ease;}.prizes-list {background: rgba(25, 35, 65, 0.8);border-radius: 20px;padding: 25px;width: 100%;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);border: 2px solid #3498db;}.prizes-list h2 {text-align: center;margin-bottom: 20px;color: #3498db;font-size: 1.8rem;}.prizes-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;}.prize-item {background: rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 15px;display: flex;align-items: center;gap: 12px;transition: transform 0.3s ease;}.prize-item:hover {transform: translateY(-5px);background: rgba(255, 255, 255, 0.15);}.prize-icon {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.2);border-radius: 50%;font-size: 1.2rem;}.prize-name {font-size: 1.1rem;font-weight: 500;}.footer {margin-top: 40px;text-align: center;color: #b0b0b0;font-size: 0.9rem;width: 100%;padding: 20px;}.confetti {position: fixed;width: 10px;height: 10px;background: #ffd700;border-radius: 50%;opacity: 0;}@media (max-width: 900px) {.container {flex-direction: column;align-items: center;}.wheel-container {width: 350px;height: 350px;}.controls {max-width: 100%;}}@media (max-width: 480px) {.wheel-container {width: 280px;height: 280px;}.wheel-item {padding-left: 40px;padding-bottom: 10px;font-size: 0.8rem;}.wheel-item .content {width: 70px;}.btn-spin {padding: 15px 40px;font-size: 1.5rem;}.prizes-grid {grid-template-columns: 1fr;}}</style>
</head>
<body><div class="header"><h1><i class="fas fa-dice"></i> 幸运大转盘</h1><p>点击开始按钮，转动转盘赢取丰厚奖品！每次抽奖都有机会获得稀有道具和游戏福利</p></div><div class="container"><div class="wheel-container"><div class="wheel" id="wheel"><!-- 转盘奖品区域由JS生成 --></div><div class="wheel-pointer"></div></div><div class="controls"><button class="btn-spin" id="spin-btn"><i class="fas fa-play"></i> 开始抽奖</button><div class="result-container"><div class="result-title">抽奖结果</div><div id="result">等待抽奖...</div></div><div class="prizes-list"><h2><i class="fas fa-gift"></i> 奖品列表</h2><div class="prizes-grid"><div class="prize-item"><div class="prize-icon" style="color: #ffd700;"><i class="fas fa-coins"></i></div><div class="prize-name">金币 x 1000</div></div><div class="prize-item"><div class="prize-icon" style="color: #e74c3c;"><i class="fas fa-gem"></i></div><div class="prize-name">钻石 x 50</div></div><div class="prize-item"><div class="prize-icon" style="color: #3498db;"><i class="fas fa-heart"></i></div><div class="prize-name">体力药水 x 3</div></div><div class="prize-item"><div class="prize-icon" style="color: #2ecc71;"><i class="fas fa-shield-alt"></i></div><div class="prize-name">稀有装备宝箱</div></div><div class="prize-item"><div class="prize-icon" style="color: #9b59b6;"><i class="fas fa-hat-wizard"></i></div><div class="prize-name">传奇皮肤</div></div><div class="prize-item"><div class="prize-icon" style="color: #e67e22;"><i class="fas fa-trophy"></i></div><div class="prize-name">至尊VIP体验卡</div></div></div></div></div></div><div class="footer"><p>© 2023 游戏抽奖中心 | 本活动最终解释权归游戏官方所有</p></div><audio id="spin-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-slot-machine-spin-1033.mp3"></audio><audio id="win-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3"></audio><script>document.addEventListener('DOMContentLoaded', function() {// 奖品数据const prizes = [{ name: "金币 x 500", color: "#FFD700", icon: "fas fa-coins" },{ name: "钻石 x 20", color: "#1E90FF", icon: "fas fa-gem" },{ name: "体力药水", color: "#FF6347", icon: "fas fa-heart" },{ name: "普通宝箱", color: "#32CD32", icon: "fas fa-box-open" },{ name: "英雄碎片", color: "#9370DB", icon: "fas fa-puzzle-piece" },{ name: "金币 x 200", color: "#FFD700", icon: "fas fa-coins" },{ name: "钻石 x 10", color: "#1E90FF", icon: "fas fa-gem" },{ name: "稀有皮肤", color: "#FF4500", icon: "fas fa-tshirt" }];const wheel = document.getElementById('wheel');const spinBtn = document.getElementById('spin-btn');const resultElement = document.getElementById('result');const spinSound = document.getElementById('spin-sound');const winSound = document.getElementById('win-sound');// 创建转盘奖品区域function createWheelItems() {const prizeCount = prizes.length;const angle = 360 / prizeCount;prizes.forEach((prize, index) => {const item = document.createElement('div');item.className = 'wheel-item';item.style.transform = `rotate(${index * angle}deg)`;item.style.backgroundColor = prize.color;// 创建扇形切角item.style.clipPath = `polygon(100% 0%, 100% 100%, 0% 100%)`;const content = document.createElement('div');content.className = 'content';content.innerHTML = `<i class="${prize.icon}"></i><div>${prize.name}</div>`;item.appendChild(content);wheel.appendChild(item);});}// 创建五彩纸屑效果function createConfetti() {const colors = ['#ffd700', '#ff9800', '#e74c3c', '#3498db', '#2ecc71', '#9b59b6'];const container = document.body;for (let i = 0; i < 150; i++) {const confetti = document.createElement('div');confetti.className = 'confetti';confetti.style.left = `${Math.random() * 100}vw`;confetti.style.top = '-10px';confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];confetti.style.width = `${Math.random() * 10 + 5}px`;confetti.style.height = confetti.style.width;container.appendChild(confetti);// 动画const animation = confetti.animate([{ transform: `translateY(0) rotate(0deg)`, opacity: 1 },{ transform: `translateY(${Math.random() * 100 + 100}vh) rotate(${Math.random() * 720}deg)`, opacity: 0 }], {duration: Math.random() * 3000 + 3000,easing: 'cubic-bezier(0,0.9,0.57,1)'});animation.onfinish = () => confetti.remove();}}// 旋转转盘function spinWheel() {// 禁用按钮spinBtn.disabled = true;resultElement.textContent = "转盘中...";resultElement.style.color = "#ffd700";// 播放旋转音效spinSound.currentTime = 0;spinSound.play();// 随机选择奖品const prizeIndex = Math.floor(Math.random() * prizes.length);const prize = prizes[prizeIndex];// 计算旋转角度（多转几圈然后停在目标位置）const extraRotation = 5; // 额外旋转圈数const targetRotation = 360 * extraRotation + (360 - (prizeIndex * (360 / prizes.length)) - (360 / prizes.length / 2);// 应用旋转wheel.style.transform = `rotate(${targetRotation}deg)`;// 旋转结束后显示结果setTimeout(() => {// 播放胜利音效winSound.currentTime = 0;winSound.play();resultElement.textContent = prize.name;resultElement.style.color = prize.color;resultElement.style.transform = 'scale(1.2)';setTimeout(() => resultElement.style.transform = 'scale(1)', 500);// 创建庆祝效果createConfetti();// 重新启用按钮setTimeout(() => {spinBtn.disabled = false;}, 2000);}, 4000);}// 初始化转盘createWheelItems();// 绑定事件spinBtn.addEventListener('click', spinWheel);});</script>
</body>
</html>

效果图

http://www.xdnf.cn/news/17864.html

相关文章：

  • 31 HTB Union 机器 - 中等难度
  • C:\Windows\WinSxS 目录详解
  • 【C++】标准库中用于组合多个值的数据结构pair、tuple、array...
  • AI搜索引擎下的内容优化新范式：GEO的关键技术解析
  • 二十七、动态SQL
  • RK3568 NPU RKNN（三）：RKNN-ToolKit2模型构建与推理
  • 大模型教机器人叠衣服：2025年”语言理解＋多模态融合“的智能新篇
  • PowerPoint和WPS演示放映PPT时如何禁止鼠标翻页
  • 玉米及淀粉深加工产业展|2026中国(济南)国际玉米及淀粉深加工产业展览会
  • Java 学习笔记（基础篇3）
  • 数据结构：构建 (create) 一个二叉树
  • 【数据结构入门】二叉树（2）
  • 内网穿透实战笔记 1panel 面板部署 frps，Windows 部署 frpc
  • Ubuntu永久配置 DNS
  • JavaScript 原型机制详解：从概念到实战（附个人学习方法）
  • 【Mysql语句练习】
  • linux 设备驱动的分层思想
  • 二分算法（模板）
  • week1-[顺序结构]大海
  • 9.对象介绍
  • 俄罗斯信封套娃问题-二维最长递增子序列
  • BFS和codetop复习
  • 【Java Web 快速入门】十、AOP
  • 自动处理考勤表——如何使用Power Query，步步为营，一点点探索自定义函数
  • LeetCode Hot100:递归穿透值传递问题
  • 艾伦·图灵：计算理论与人工智能的奠基人
  • Java研学-SpringCloud(四)
  • Numerical Difference between vLLM logprobs and huggingface logprobs
  • 数据结构：N叉树 (N-ary Tree)
  • Web 开发 15