无畏契约校园行活动抽奖网页

项目简介

这是一个专为山东财经大学无畏契约瓦友社校园行活动设计的在线抽奖系统网页。该网页为活动参与者提供互动抽奖体验，支持多种奖品的随机抽取，并实时显示奖池剩余情况。

主要功能

🎯 核心功能

1. 抽奖系统

   • 点击"开始抽奖"按钮即可参与抽奖
   • 抽奖动画效果，增强用户体验
   • 基于概率的公平抽奖算法

2. 奖品展示

   • 可视化展示所有可抽取的奖品
   • 奖品图片展示，直观清晰
   • 响应式布局，适配不同设备

3. 奖池管理

   • 实时显示各奖品的剩余数量
   • 显示每个奖品的中奖概率
   • 奖品抽完后自动从奖池中移除

4. 数据持久化

   • 使用浏览器本地存储（localStorage）保存奖池状态
   • 刷新页面后奖池数据不丢失
   • 方便活动期间多次使用

🎁 奖品清单

• 黑鲨699元键盘 - 中奖率 1%
• 黑鲨89元充电头 - 中奖率 2%
• 黑鲨24元充电线 - 中奖率 3%
• 无畏契约状态牌 - 中奖率 6%
• 无畏契约卡套 - 中奖率 7%
• 无畏契约电话线发圈 - 中奖率 8%
• 无畏契约亚克力钥匙扣 - 中奖率 8%
• 黑鲨冰箱贴 - 中奖率 15%
• 无畏契约贴纸 - 中奖率 20%
• 黑鲨贴纸 - 中奖率 30%

技术特点

• 纯前端实现：使用 HTML + CSS + JavaScript，无需后端服务器
• 响应式设计：支持桌面端和移动端，自动适配不同屏幕尺寸
• 毛玻璃效果：使用 backdrop-filter 实现现代化的视觉效果
• 本地存储：使用 localStorage 实现数据持久化
• 动画效果：流畅的抽奖动画，提升用户体验

使用方法

部署步骤

1. 将所有文件放在同一目录下
2. 确保所有图片资源文件完整
3. 使用浏览器打开 Untitled-1.html 文件
4. 或部署到 Web 服务器上通过 URL 访问

使用说明

1. 查看奖品：页面右侧展示所有可抽取的奖品
2. 开始抽奖：点击"开始抽奖"按钮
3. 查看结果：抽奖完成后会显示中奖结果
4. 查看奖池：左侧显示各奖品的剩余数量和中奖率

重置奖池

如果需要重置奖池到初始状态，可以在浏览器控制台执行：

localStorage.removeItem('prizes');
location.reload();

文件结构

.
├── Untitled-1.html          # 主页面文件
├── f26d59c49e7963f7486f4a0692a31914.png  # 背景图片
├── 黑鲨699键盘.jpg          # 奖品图片
├── 充电头.jpg               # 奖品图片
├── 数据线.jpg               # 奖品图片
├── 无畏契约状态牌.jpg        # 奖品图片
├── 无畏契约卡套.jpg          # 奖品图片
├── 无畏契约嗲为你电话圈发套.png  # 奖品图片
├── 无畏契约钥匙扣.jpg         # 奖品图片
├── 无畏契约贴纸.jpg          # 奖品图片
├── 黑鲨冰箱贴.jpg            # 奖品图片
├── 黑鲨贴纸.jpg              # 奖品图片
└── README.md                # 项目说明文档

注意事项

1. 浏览器兼容性：建议使用现代浏览器（Chrome、Firefox、Edge、Safari等）
2. 数据存储：奖池数据存储在浏览器本地，清除浏览器数据会重置奖池
3. 奖品配置：奖品数量和概率可在 HTML 文件的 JavaScript 代码中修改
4. 图片资源：确保所有奖品图片文件与 HTML 文件在同一目录下

自定义配置

修改奖品信息

编辑 Untitled-1.html 文件中的 defaultPrizes 数组：

const defaultPrizes = [
    { name: "奖品名称", count: 数量, rate: 0.概率 },
    // ... 更多奖品
];

修改背景图片

修改 CSS 中的背景图片路径：

background: url('你的背景图片.png') center/cover no-repeat fixed;

活动信息

• 活动名称：山东财经大学无畏契约瓦友社校园行抽奖
• 主办方：黑鲨 & 无畏契约
• 活动年份：2025

开发者

关注 robll 的代码小岛：http://154.40.45.131/

---

© 2025 黑鲨&无畏契约活动