博客 · Notion · 学校网站 · Moodle

把转盘嵌入你的网页

输入选项,选择配色和尺寸,复制一行代码。只要页面支持 HTML 或嵌入链接,访客就能直接在你的页面上转动转盘。

配色主题

尺寸
嵌入代码
<iframe src="https://randompickerwheel.app/zh-hans/embed/wheel?t=%E8%B0%81%E5%85%88%E6%9D%A5%EF%BC%9F&amp;items=%E5%B0%8F%E6%98%8E%2C%E5%B0%8F%E7%BA%A2%2C%E5%B0%8F%E5%88%9A%2C%E5%B0%8F%E4%B8%BD%2C%E5%B0%8F%E5%8D%8E%2C%E5%B0%8F%E7%BE%8E&amp;theme=prism" width="420" height="540" style="border:0;max-width:100%" title="谁先来?" loading="lazy"></iframe>
https://randompickerwheel.app/zh-hans/embed/wheel?t=%E8%B0%81%E5%85%88%E6%9D%A5%EF%BC%9F&items=%E5%B0%8F%E6%98%8E%2C%E5%B0%8F%E7%BA%A2%2C%E5%B0%8F%E5%88%9A%2C%E5%B0%8F%E4%B8%BD%2C%E5%B0%8F%E5%8D%8E%2C%E5%B0%8F%E7%BE%8E&theme=prism
  • 课程网站与 LMS在 Moodle 或学校网站的课程页里放一个点名转盘、抽题转盘。
  • Notion 团队页值日、午饭吃什么、站会发言顺序,在 Notion 里直接转。
  • 博客互动文章今天吃什么、写作题目、读者抽奖,都可以做成一个转盘。
  • 社团与活动页面破冰游戏、惩罚转盘、下一局玩什么,放在活动页上随时用。
使用方法

一分钟把转盘嵌进网页

  1. 填写转盘内容

    输入标题和选项,每行一个。右侧预览就是真实的嵌入效果,可以直接转一下试试。

  2. 调整外观

    从四种配色和三种尺寸中选择。标题、彩纸效果和 Made with 链接不需要的话都可以关闭。

  3. 复制并粘贴

    把 iframe 代码粘贴到网页的 HTML 区块里。Notion 这类只接受链接的工具,复制下方的链接即可。

大家为什么用它

为什么用这个嵌入转盘

无需注册,不存服务器所有设置都写在链接里,不用登录后台,也不会因为过期而失效。
手机和侧边栏都能放转盘会按框体大小自动缩放,大约 280 到 600 像素宽都清晰可用,窄栏也不会溢出。
每次都公平结果来自浏览器的密码学随机数,每个选项被抽中的概率完全相同。
四套配色鲜艳的缤纷、清爽的海洋、柔和的糖果,以及适合简洁博客的黑白。
框内没有广告访客只会看到转盘和转动按钮。底部的小链接也可以关掉。
也能当链接用在新标签页打开同一个网址就能全屏投影;不能嵌入的地方,直接分享链接。

常见平台怎么粘贴

大多数建站工具和博客系统都能在 HTML 区块里粘贴 iframe 代码;Notion 只接受链接;也有平台会过滤 iframe。遇到不能嵌入的情况,放一个普通链接,让访客在新标签页打开即可。

平台粘贴位置注意事项
WordPress(区块编辑器)添加自定义 HTML 区块,粘贴代码自建 WordPress 可直接显示;WordPress.com 部分套餐会过滤 iframe,可改用链接。
Hexo、Hugo、VuePress 等静态博客直接把代码写进 Markdown 正文这些生成器通常保留原始 HTML,个别主题或配置可能需要开启 HTML 渲染。
Notion输入 /embed,粘贴链接(不是代码)把区块下边缘拖到约 540 像素高,才能看到转动按钮。
Moodle页面或标签的编辑器中切换到 HTML 源码保存后消失的话,可能是站点限制了 iframe,请联系管理员。
学校官网 CMS编辑器的源码或 HTML 模式各系统名称不同,一般是工具栏上的 源代码 按钮。
微信公众号、小红书不支持 iframe放文字链接或二维码,读者在浏览器中打开。

链接里的参数说明

所有设置都是网址的一部分,下次换一批名单时,不必回到本页,直接改链接也可以。

参数示例作用
itemsitems=A%2CB%2CC选项,用逗号分隔并做 URL 编码,至少两个。
tt=%E8%B0%81%E5%85%88%E6%9D%A5转盘上方的标题,留空则不显示。
themetheme=ocean可选 prism、ocean、candy、mono。
titletitle=0隐藏标题行。
confetticonfetti=0关闭抽中后的彩纸效果。
brandbrand=0隐藏 Made with Random Picker Wheel 小链接。

选项直接写在链接里,任何人查看网页源码都能看到。请不要放成绩、手机号等隐私信息。

怎么选尺寸

尺寸决定代码里的宽和高。框内转盘会自动填满,代码里的 max-width 会让它在手机上缩到屏幕宽度,选大尺寸也不会出现横向滚动。

尺寸框体适合
小320 × 440 px侧边栏、Notion 窄栏
中420 × 540 px博客正文、课程页面
大560 × 680 px通栏页面、教室投影
常见问题

常见问题解答

嵌入转盘收费吗?

完全免费,不用注册,没有次数限制,框内也没有广告。

怎么在 Notion 里放转盘?

在 仅链接 一栏复制链接,在 Notion 中输入 /embed,粘贴链接并创建嵌入。再把区块下边缘拖到约 540 像素,就能看到完整转盘。

嵌入后还能修改选项吗?

选项写在链接里,要修改就需要换一段新代码。可以在这里重新生成,也可以直接改网址里的 items 部分。

为什么公众号里放不了?

微信公众号等平台不允许插入第三方 iframe。可以在文章里放文字链接或二维码,读者在浏览器里打开就能转。部分 WordPress.com 套餐和权限受限的 Moodle 也会过滤 iframe。

结果真的随机吗?

是的。每次停在哪里由访客浏览器中的 crypto.getRandomValues 决定,每个选项概率相同,站长也无法预设结果。

手机上能正常显示吗?

可以。框体会缩到屏幕宽度,转盘随之缩放,宽度约 280 像素时依然清晰,转动按钮也足够大,方便点按。

能去掉 Made with 链接吗?

可以,复制代码前关闭 显示 Made with 链接 即可。如果愿意保留,我们会很感谢。