今天干嘛 · 随机决策器(网页版)产品系统

我要开发同款
小城2026年11月13日
2阅读

技术信息

语言技术
HTML5、CSS、JavaScript、前端
系统类型
Web、H5
行业分类
游戏、生活旅游

作品详情

行业场景

「今天干嘛」是一个纯前端随机决策工具网页,用五个按钮专治日常选择困难:今天吃什么、今天玩什么、聚会定什么主题、真心话大冒险、今天谁买单(转盘)。打开即用,无需登录、不收集任何数据,已部署上线提供在线使用

功能介绍

五类决策场景开箱即用:内置 18 种餐饮、18 种周末活动、14 种聚会主题,真心话与大冒险题库各 18 条,转盘默认 5 名玩家,所有选项均可在页面内自由增删;
洗牌袋抽取算法:选项洗成一叠依次抽取,一轮之内绝不重复,换轮时还会把上轮末位与队首对调,保证跨轮也不连着出同一个,体验明显优于纯随机;
仪式感动效:结果区先快速滚动 7 次、逐次减速再定格,命中瞬间弹性缩放;“谁买单”转盘用 conic-gradient 纯 CSS 绘制,随机 4~6 圈、2.8~3.4 秒缓出曲线,落点在扇区内随机偏移,不会每次都机械地停在正中间;
选项自定义:折叠面板内 chip 标签式管理,支持回车快速添加、单条删除、同名去重、40 字上限;增删后自动重置抽签袋,人数变化时转盘扇区实时重绘并高亮被抽中者;
无痕可用:刻意不使用 localStorage,隐私/无痕模式下同样正常运行,刷新即恢复默认,零数据残留;
适配与细节:auto-fit 网格 + clamp 弹性字号自适应桌面与手机,刘海屏安全区留白,并为开启“减少动态效果”的用户自动关闭全部动画,关键按钮补充无障碍标签。

项目实现

【我的角色】
独立负责本作品从 0 到 1 的全部工作:决策场景与信息架构设计、洗牌袋抽取算法设计、转盘绘制与旋转落点角度计算、滚动/弹跳动效实现、选项管理模块开发、响应式与无障碍适配,以及 GitHub Pages 部署上线与真机验证。
【技术栈】
HTML5、CSS3(Grid、conic-gradient、color-mix、clamp)、原生 JavaScript(Fisher-Yates 洗牌、async/await 动画节流)。
项目单文件零依赖、打开即用,可快速扩展新的决策场景(如抽签分组、课堂点名、活动抽奖)。

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论