五个直接可玩的 HTML 互动小演示

这一篇不讲代码细节，直接演示。下面五个互动小工具全部嵌在文章里，打开页面就能玩，不需要复制、不需要保存文件、不需要任何外部依赖。每个 demo 都有 30–60 秒就能体验的核心交互。

提示：键盘钢琴（demo 5）需要点击页面以让浏览器激活音频（Web Audio 策略），其它 4 个 demo 直接用即可。

一、可拖拽的方块

按下方块，可以把它拖到页面任意位置，松开鼠标后停留。

怎么玩：

• 鼠标按住紫色方块，拖到任意位置
• 松开鼠标，方块停在那里
• 拖到边缘、拖出屏幕外都没问题

二、主题切换

点击右上角”切换主题”按钮，整页颜色在浅色 / 深色之间切换。

怎么玩：

• 点击右上角”切换主题”按钮
• 整页背景、文字、强调色会平滑切换
• 再点一次切回浅色

三、待办清单

输入任务、回车或点”添加”，勾选完成、点”删除”清理。数据保留在浏览器本地，刷新不丢。

怎么玩：

• 在输入框里写一个待办，回车添加
• 勾选左侧复选框标记完成（文字会自动划线）
• 点”删除”清理单条
• 关闭浏览器再打开，待办仍然在

四、随机点名器

在文本框里一行放一个人名，点”开始抽”，随机抽出一个。

怎么玩：

• 改写文本框里的人名（一行一个）
• 点”开始抽”按钮
• 下方会出现随机抽到的人名
• 适用场景：课堂提问、抽奖、活动顺序

五、键盘钢琴

按 A S D F G H J 七个键，会发出七个不同音高的”叮”声。鼠标点击白色琴键也行。

怎么玩：

• 先点击页面任意空白处（让浏览器激活音频）
• 按下 A S D F G H J 这七个键，分别对应 C D E F G A B 七个音
• 也可以用鼠标点击白色琴键
• 黄色高亮表示当前按下的键

关于这组 demo

• 全部使用原生 HTML/CSS/JS，零外部依赖、不联网
• 完全嵌在文章里，通过