首页/新闻资讯/正文详情

手搓一个年会抽奖页面

发布时间:2026/9/24 3:39:53 来源:云帆数科 栏目:资讯中心
手搓一个年会抽奖页面
项目简介纯静态页面无需部署后端接口服务数据持久化依赖浏览器存储。下载项目执行构建将打包到./dist目录可自行挂载至相应服务器上浏览使用。注意对于设置比较严格的图片服务器可能出现图片跨域无法展示的问题。技术栈React- 开发框架Three-3D效果实现Zustand- 状态管理Dexie-IndexedDB极简封装库Antd-UI组件库Exceljs-Excel文件操作管理线上地址预览地址https://bratrindersteak.github.io/party-lottery/项目地址https://github.com/Bratrindersteak/party-lottery/本地开发# 克隆项目gitclone https://github.com/Bratrindersteak/party-lottery.git# 安装依赖pnpmi 或pnpminstall# 启动本地服务pnpmrun dev# 打包pnpmrun build抽奖流程1.初始状态没有数据可以选择手动录入也可选择使用默认数据快速开始并熟悉游戏流程。2.这里我们选择【使用默认数据】可以看到成员、奖项、标题都有了数据。有了这些数据就可以进行抽奖了。3.通过单击左侧的奖项列表项选取所要抽取的奖项。奖项也支持拖拽调整顺序。奖项抽取的顺序是自上而下循环抽取的所以调整奖项顺序也就可以控制抽奖顺序。4.点击底部的【进入抽奖】按钮就会进入抽奖环节。成员卡片墙会组成卡片球并水平逆时针自转。同时会播放【开场音乐】。5.点击【开始抽奖】按钮卡片球高速旋转。同时高亮提示当前正在抽取的奖项。并切换播放【抽奖音乐】。6.点击【开奖】按钮卡片球停止旋转并选出获奖者。并播放【开奖音效】。开奖之后可以选择保留本次结果并【继续抽取】其他奖项也可以选择放弃本次结果并【重新抽取】。7.顶部右侧的操作栏提供少数辅助功能依次是静音切换、语言切换、进入后台设置界面。后台配置通用配置功能由于数据持久化依赖浏览器存储且数据量可能会很大所以这里添加了【一键清空数据】的功能用于抽奖页面不再使用后手动释放存储空间。注算法暂不支持切换默认使用随机算法。成员录入管理支持excel文件批量导入数据但请使用本页面提供的模板。奖项配置管理已经抽取完毕的奖项在这里可以重置为未抽取同时也会清除对应的抽奖记录。获奖记录管理支持导出为excel文件保存。音乐配置管理内置3个默认音效也支持自行上传。使用说明介绍

相关推荐

GaN图腾柱PFC过零点处理:三种无锁相环方案实测对比
GaN图腾柱PFC过零点处理:三种无锁相环方案实测对比

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 3:39:47

DC-DC电源纹波与噪声测量:示波器接地方式决定测试结果可信度
DC-DC电源纹波与噪声测量:示波器接地方式决定测试结果可信度

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 3:39:41

从ARK趋势报告到本地AI推理:低成本技术验证实战指南
从ARK趋势报告到本地AI推理:低成本技术验证实战指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 3:39:35

家庭宽带故障排查完全指南:从光猫指示灯到拨号错误码
家庭宽带故障排查完全指南:从光猫指示灯到拨号错误码

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 4:25:24

MOS管选型与驱动设计实战:从米勒效应到热设计避坑指南
MOS管选型与驱动设计实战:从米勒效应到热设计避坑指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 4:25:00

腾讯云Lighthouse升配实操指南:续费、配置与权限三重约束解析
腾讯云Lighthouse升配实操指南:续费、配置与权限三重约束解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 4:24:54

认知多样性如何让AI产品从工具变为被爱的伙伴?
认知多样性如何让AI产品从工具变为被爱的伙伴?

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 4:24:47

Y电容选型与失效分析:安规设计的核心安全要素
Y电容选型与失效分析:安规设计的核心安全要素

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 4:24:41

RM500U固件升级失败全链路排查指南
RM500U固件升级失败全链路排查指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 4:24:35

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码