免费掷硬币 & 转盘
翻转虚拟硬币、旋转可自定义的转盘或从选项列表中随机选择。使用浏览器的密码学安全随机数——不是可验证的公开抽签,所以应避免用于受管制的竞赛。
🔒 三种方式都使用浏览器的密码学安全随机数生成器:结果先选出,然后播放动画——硬币是真正的 50/50、转盘旋转到已选结果,选择器无偏差。任何内容都不会离开你的设备。这对于日常使用是公平的,但它不是可验证的公开抽签,所以应避免受管制竞赛或高价值决定。
常见用途
- 掷硬币做决定使用公平的虚拟硬币掷来进行快速、无偏见的决定,当你在两个选择之间犹豫不决时。
- 随机团队分配的转轮使用可自定义的转轮随机分配团队成员到任务、角色或小组。
- 课堂的随机学生选择器使用转轮或选项选择器随机提问学生、分配小组或选择志愿者。
- 体育虚拟硬币掷掷硬币来确定队伍边、首次possession、发球顺序或其他体育决定。
- 赠送活动的随机选择器使用选项选择器从参赛名单中选择随机获胜者——透明且公平。
工作原理
三种模式——抛硬币、转盘和选项抽取——都使用浏览器内置的 Web Crypto API(crypto.getRandomValues)生成结果,然后完全在客户端用 CSS 变换和 requestAnimationFrame 驱动动画。全程不涉及服务器。
- 1Web Crypto 选出结果在动画开始之前,crypto.getRandomValues 会用一个加密随机的 32 位整数填充 Uint32Array。取模运算将其映射到选项数量(正反面为 2,转盘或抽取为 N),因此每个结果的概率完全相等。
- 2计算旋转角度以停在结果上对于硬币,代码计算在当前累计角度基础上、使正确一面朝上所需的最短额外旋转——正面为 0°,反面为 180°——再加上 5 整圈,使它看起来像真实的翻滚。转盘也是如此:找到使中奖扇区转到指针下方的角度偏移,加上 6 整圈,并加入少量随机抖动,让指针不会总是正好停在扇区中央。
- 3CSS 过渡和 requestAnimationFrame 驱动动画硬币和转盘通过 CSS transform 动画,对单一累计旋转值应用 cubic-bezier 缓动曲线——角度设定后无需逐帧 JavaScript。选项抽取则使用 requestAnimationFrame:每一帧由按二次方增长的间隔决定是否移动高亮,形成老虎机式的减速,并总是停在预先确定的结果上。
- 4揭晓结果并记录到会话历史动画结束时(硬币 1.3 秒,转盘 4.3 秒)setTimeout 触发并将结果写入状态。硬币模式保留最多 24 次抛掷的会话历史及正反面计数。启用了 prefers-reduced-motion 的用户会完全跳过动画,立即看到结果。
指南
操作示例
在“抛硬币”标签页打开页面,点击“抛硬币”;点按硬币也可以。硬币翻转的 1.3 秒内,按钮显示“正在抛…”,然后出现“正面!”或“反面!”,以及类似“5 次中 3 次正面 / 2 次反面”的一行和一排 H 与 T 的小标签。切换到“转盘”,它起初有 Pizza、Sushi、Tacos 和 Burgers。在“添加选项…”中输入 Ramen 并按回车,得到每块 72 度的五块扇区。点击“转动转盘”;4.3 秒后指针停下,一个框显示“获胜者”和名称。当剩余选项多于两个时,会出现“移除获胜者并再转一次”。在“选项选择器”中有 Yes、No 和 Maybe,点击“随机选一个”:各行依次亮起,最长 1.6 秒,标有“已选”的框显示答案。
使用哪些设置,以及限制
- 点按硬币或按钮,然后等它落定。 “抛硬币”和硬币本身都能开始一次抛掷。结果在动画开始前就用浏览器的安全随机数生成器选定,所以是真正的五五开,旋转只是把它展示出来。在这 1.3 秒内额外的点按会被忽略。硬币下方的小标签列出你最近的 24 次抛掷,最新的在前,而“共 N 次,正面 / 反面”这一行最多只统计这 24 次,所以绝不会报告超过 24 次。该列表仅在页面打开期间保留。
- 最多可用 24 个选项来构建转盘。 在“添加选项…”中输入,然后按回车或“+”。每个选项会被截为 24 个字符,当输入框为空、转盘正在转动或已有 24 个选项时,“+”是灰色的。选项旁的 × 会移除它。不能就地编辑,所以请移除选项后重新添加。“转动转盘”至少需要两个选项。超过 16 个字符的标签在其扇区上会被缩短,但获胜者框会完整显示。把同一个选项添加两次,它就有两块扇区,机会也就翻倍。
- 用淘汰法给名字排序。 转动一次之后,“移除获胜者并再转一次”会把获胜者从转盘上拿掉,并立即转动其余的。它只在剩余选项多于两个时显示,所以最后一次转动是在两个之间。可用它抽取出场顺序,或逐个淘汰选项。“全屏”在浏览器支持时显示,它会隐藏选项列表,只保留转盘、获胜者和转动按钮,适合课堂屏幕。转动期间不能添加或移除选项。
- 对普通列表使用选项选择器。 每个选项各占一行。回车会在下方添加一行,上下方向键在行间移动,在空行上按退格键会删除它;× 按钮也会移除一行,但总会保留一行。空白行会被忽略,在至少一行有文字之前,“随机选一个”是灰色的。只有一行有内容时,它会立刻回答,不带动画。你可以添加比转盘的 24 个选项更多的行,但分享链接只保留前 50 个。
- 把转盘或列表分享为链接。 “分享结果”出现在“转盘”和“选项选择器”标签页下方。你更改过选项之后,页面地址会在 # 后面带上两个列表,按钮会复制该链接,在手机上则打开分享面板。浏览器不会把 # 之后的部分发送给服务器。打开链接时,每个选项会被截为 24 个字符,转盘保留 24 个选项,选择器保留 50 个,选项内部的逗号会保留。超过 1,800 个字符的地址会被丢弃,从而得到一个不带选项的普通链接。
- 了解这里的公平指什么。 三种模式都使用浏览器的加密安全随机数生成器。结果先选定,动画被安排成落在它上面;指针在扇区内停下的小偏移只是为了好看。这对随意的选择是公平的,但页面本身说明它不是可公开验证的抽签,所以请避免用于受监管的竞赛或高价值的决定。如果你的设备设置为减少动态效果,三种模式都会跳过动画,直接显示结果。
常见问题及解决方法
- “转动转盘”按钮是灰色的。
- 转盘正在转动,或上面的选项少于两个时,它会被禁用。请在“添加选项…”中再添加一个选项并按回车。× 按钮可以一直移除选项直到没有,所以转盘可能剩下的选项太少。
- “添加选项…”旁边的“+”按钮是灰色的。
- 输入框为空或只有空格、转盘正在转动,以及转盘已有 24 个选项时,它会被禁用。到了 24 个,请先移除一个选项。添加选项时,超过 24 个字符的部分会被截掉。
- 分享链接打开后停在“抛硬币”标签页,或者丢失了你的选项。
- 编辑后生成的链接同时带有转盘列表和选择器列表。当两者都存在时,页面会保持“抛硬币”被选中,所以请打开“转盘”或“选项选择器”找到你的选项。如果地址超过 1,800 个字符(非拉丁字母很快就会达到,因为每个字母编码后约占九个字符),“分享结果”会给出一个不带选项的普通链接。超过 24 个字符的选项会被截断,列表会被裁剪为 24 个(转盘)或 50 个(选择器)。
- 较长的选项名称在转盘上好像被截断了。
- 对于超过 16 个字符的标签,扇区只显示前 15 个字符,后面加“…”,标签越长,字号越小。获胜者框会显示完整文字。如果需要从远处看清转盘,请使用更短的名称。
- 硬币或转盘立刻显示结果,没有旋转。
- 你的设备或浏览器设置了减少动态效果,页面遵从这一设置:硬币、转盘和选择器会跳过动画,直接显示结果。结果的选取方式不变。如果你想要回动画,请在系统的辅助功能选项中关闭该设置。
对比分析
真正的硬币、骰子或纸条是每个人都能看着的东西;当你手头没有它们时,这个页面是个快速替代,把硬币、姓名转盘和列表选择器放在一处。每个选项的机会相同,所以要给某个选择加权,唯一的办法是多添加几次。它一次抛一枚硬币,在页面保持打开期间记住 24 次抛掷。转盘和选择器的列表保存在页面地址中,所以刷新后仍在。页面声明没有任何内容离开你的设备。它无法证明抽签是公平的,因为没有公开的记录或种子,所以不适合受监管的竞赛或奖品。没有账号,也没有声音。