手搓一个「24点训练营」：零后端、单文件、手机即开即练 🦊🃏

一个只学过四则运算 + 小括号的小学生，也能立刻上手的 24 点练习网页。零注册、零安装、微信发链接就能玩。 在线体验：https://b91d2ce8f2e84b40b69f2572c0756ca2.app.codebuddy.work

一、为什么做这个

学生暑假有个“24点天天乐”的作业，身为老师想让孩子不要敷衍了事。市面上很多 App 要么带广告、要么需要账号、要么会弹出「用阶乘/开方也能算」这类超纲解法。

于是我手搓了一个只认加减乘除和小括号的轻量网页：

• 不需要后端，一个 index.html 直接部署。
• 手机打开就能玩，微信丢链接即可。
• 自动判题，答案不唯一也能认。
• 有练习、有计时挑战、有成就徽章，孩子愿意反复刷。

封面图

二、三种玩法

首页就是全部入口：练习、计时、成长，点卡片直接进。

首页

1️⃣ 自由练习 —— 想怎么算就怎么算

• 4 张数字卡片点击输入，加减乘除、小括号、删除一行排开。
• 点「算好啦」立即判断，对了自动下一题，错了给出当前结果提示。
• 做对过的题会累计进「已学会」，错题可以反复练。

自由练习页面

2️⃣ 计时大作战 —— 10 分钟能做对几题

• 倒计时 10 分钟，疯狂刷题。
• 点了提示的题不算分：防止刷分，也鼓励孩子先自己想。
• 结算页自动记录到「我的成长」。

3️⃣ 我的成长 —— 15 枚徽章自己亮

我的成长页面

纯本机记录，不联网、没隐私顾虑。徽章分几个维度：

三、技术实现：单文件怎么做出来的

1. 题库不是硬编码，是穷举验证出来的

数值 1-10 的四数组合有 715 种。我先用 Python 枚举所有组合，只保留能用加减乘除和小括号算出 24 的题目，得到 566 道可解题，零错误答案。

2. 一个生成脚本出产物

build_html.py 读取 app_data.js（内联题库 window.BANK），把所有 HTML/CSS/JS 包进一个文件：

产物就一个 index.html（约 186 KB），离线可用。

3. 答案不唯一？内置求解器实时判断

24 点很多题有多解（比如 220 种组合有 2 个以上解法）。所以不跟固定答案比，而是把学生输入的表达式现场算一遍，只要结果精确等于 24 且数字使用正确就算对。

4. 本机存储：成绩存在孩子自己手机上

没有后端、不联网，用 localStorage 记录：

老师只需要发链接，家长不需要担心账号隐私。

四、复现教程：你也可以 10 分钟跑起来

下面不贴代码，按时间线复盘我和这位老师（一位小学老师，非技术背景）的真实对话。一个"想让学生练练 24 点"的朴素想法，是怎么一步步变成现在这个网页的。

第 1 步：需求只有一句话，但框死了技术 老师最初就一个想法：做个 24 点练习，给学生用。 紧接着的约束很关键——"学生只学了加减乘除和小括号，没学乘方开方"。 这句话直接决定两件事：① 题库只能用四则运算 + 括号；② 判题必须用内置求解器实时计算，不能存"标准答案"——因为同一组数字往往有多个正确算式（比如 3、3、8、8 有经典解 8÷(3−8÷3)），固定答案会冤枉孩子。题库后来用 1–10 的全部 566 种可解题，全部由求解器验证过。

第 2 步：界面是为"小手指"和"一屏"反复磨的 网页是给小孩在手机上点的，每句反馈都是真用出来的：

• "四张数字卡片大一点" → 数字卡从 36px 放到 48px
• "加减乘除一行、小括号一行、重来提示一行" → 按钮重排成三行
• "两行高度扁一点，手机一页能显示完整" → 内边距 20px 压到 14px
• "点出的算式要在同一行" → 去掉换行，超长就横向滑 老师边用边说，我边改边部署，链接始终不变。

第 3 步：计分规则防刷分 "计时大作战里如果提示了，就不计入做对题数。" 于是加了标记：点过 💡 提示的题，即使算对也只进下一题、不加分。鼓励孩子先自己想。

第 4 步：云端互通——一条走不通的路（最大教训） 老师想要"全班成绩互通，微信发链接就能看排名"。我们折腾了一整圈：

• Supabase？全英文，老师看不懂 ❌
• LeanCloud？官方已停服 ❌
• 阿里云 uniCloud？URL 化强制要备案域名，个人老师无备案域名，死路 ❌
• 腾讯云 uniCloud？最便宜入门版也要 99元/月，小游戏偏贵 ❌
• 支付宝云？有免费空间，结果实测 URL 化始终返回默认模板、从不执行我们上传的代码，平台级不可用 ❌ 最后老师一句"用本机版好了"，回到零配置方案：微信发链接，成绩存在各自手机，纯个人、不联网。

第 5 步：英雄榜不要了，换成"我的成长" "不要英雄榜了，换个其它的。" → 改成个人战绩页：挑战局数、最佳一局、最长连对、已学会几道。 徽章从一开始的 6 枚，加到现在的 15 枚，还专门设计了"自力更生 / 独立思考"——奖励那些没用提示就做对的题。

第 6 步：交付，就是一个链接 整个东西最后就是一个静态 HTML 文件，部署到云端，微信发链接，学生打开即玩。没有构建步骤、没有后端、没有账号体系。老师要的"简单一点，微信发发链接"终于落地。

五、结语

这个网页不大，但把我最近想验证的几个点都跑通了：

• 纯前端也能做「实时判题 + 不唯一答案识别」。
• 单文件产物是教育类小工具最好的分发形态。
• 成就系统比排行榜更适合小学生——他们更在意「自己又点亮了一枚徽章」。

如果你也有类似的「轻量练习工具」想法，建议从单文件 HTML 开始，别急着上后端。先把玩法跑顺，再决定要不要堆服务。

在线体验：https://b91d2ce8f2e84b40b69f2572c0756ca2.app.codebuddy.work

技术栈：原生 HTML/JS/CSS + Python 生成器 + CloudStudio 静态部署

适用年级：已掌握加减乘除和小括号的小学生