没有数据库，也没有登录注册，打开浏览器就能使用。对我来说，这正是前端最直接、也最有成就感的地方。

起因

平时做课程任务、整理实验数据时，我经常会用表格和一些小脚本解决问题。久而久之，我发现生活里也有不少类似的需求：问题不大，却总差一个刚好顺手的工具。专门安装一个 App 显得太重，用 Excel 又不够直观，比如和朋友旅行回来后算账，或者记录一天里真正花在各项任务上的时间。

市面上当然不缺类似工具，但我试过几个之后，总觉得“差那么一点”：有的夹着广告，有的必须注册账号，还有的功能过于臃肿，反而找不到真正需要的入口。

于是我想到，与其继续寻找，不如把需求拆开，像调试一个小实验那样逐项验证：数据怎么输入、结果怎么展示、哪些步骤最容易出错。既然已经能写一些前端代码，干脆自己做一个。

就这样,两个轻量的小工具慢慢成形了。

项目一：多人旅行 AA 结算器

在线体验： 打开「出行 AA 助手」

解决什么问题？

三五好友一起出游，你请了晚饭，他垫了门票，我付了打车费……旅程结束后，最头疼的往往不是整理照片，而是算清楚谁该给谁多少钱。人数和消费次数一多，数字看起来都没问题，最后却很容易差上几元。

手动算容易出错,用群收款又不够灵活（比如有的人只参与了其中一顿饭）。

核心逻辑

每个人有一个「已垫付金额」和一个「应承担金额」,两者相减得到净额：

  • 净额 > 0：别人欠你钱
  • 净额 < 0：你欠别人钱

接下来用贪心思路完成转账匹配：每轮找出欠款最多的人和应收最多的人，按双方金额的较小值完成一次转账，再重复这个过程，直到所有净额归零。我在调试时特意用多人参与、部分人缺席和小数金额等情况反复检查，最终得到一组清晰、尽量精简的转账建议。

功能清单

  • 参与人管理、消费录入（金额、垫付人、分摊人、标签、备注）
  • AA 核心结算 + 清晰的转账建议
  • 按标签统计消费,配一个饼图
  • 使用 localStorage 本地保存,支持 JSON 导入和导出
  • 结算报告一键导出 PNG
  • 移动端采用卡片化布局,并增大关键操作区域

项目二：学习日志时间轴

在线体验： 打开「学习计划」

第二个工具来自更日常的困扰：计划表写得很满，真正执行后却很难回答“时间到底花到哪里了”。于是我做了一条双栏时间轴，左边放计划，右边记实际情况，让两者能够直接对照。后来又陆续加入复习安排、专注计时、月历、统计和分级管理，才慢慢形成现在这套完整流程。整个工具无需构建，默认也不依赖网络。

核心特性

双栏时间轴

页面采用双栏结构：左侧是计划区,右侧是记录区,中间用一条小时轴建立时间参照。

  • 点击”在时间轴选时间”后,直接在任意半区选择开始和结束时间
  • 首次点击哪个区域,就自动使用哪个区域,无需预先切换计划区或记录区
  • 时间轴使用纯白背景和简洁的分钟点,小时数字加大,长时间浏览时更容易定位
  • 学习记录使用实线箭头,复习记录使用虚线箭头
  • 可直接拖动中央小时线调整双栏比例,也可通过”编辑布局”调整时间轴/右栏宽度和专注/复习高度

计划驱动学习

  • 计划区事件到达开始时间后,网页会弹出专用提醒窗口,展示学科、知识点、学习动作、计划时段和资料定位
  • 提醒窗口支持”一键开始学习””10 分钟后提醒”和”忽略本次”
  • 一键开始会自动带入计划事件的信息,启动正计时并进入沉浸界面
  • 完成后填写实际学习范围、结果和掌握程度,记录会写入记录区,并按学科规则生成复习任务

结构化学习记录

新增事件时可以保存：

  • 事件类型：学习、复习或自定义
  • 学习动作：视频、阅读、习题、背诵、复习,可多选
  • 知识点名称和资料定位
  • 掌握程度：尚未判断、薄弱、部分掌握、已掌握
  • 学习摘要、学习笔记、遗留内容和重点标记

这些信息会同时用于时间轴标签和后续复习卡片。我自己整理记录时最怕看到一句脱离上下文的“复习第三章”，所以这里尽量把知识点、资料位置和遗留问题一起留下，过几天再看也能迅速想起当时卡在哪里。

闪卡与主动回忆

  • 保存含知识点的学习事件时,会根据学习摘要、资料定位和遗留问题自动生成基础问答卡
  • 可在事件详情中增删、修改问题和答案；闪卡始终保留原事件来源
  • 使用方式采用”先主动回忆、再显示答案”,并建议在不同轮次交替使用复述、例题和错因分析

遗留待清池

  • 所有事件的遗留习题和问题会统一汇总到”待清池”,但数据仍挂载在原事件上
  • 可从待清池直接开始计时处理；保存结果后会自动标记完成

复习任务

  • 支持常用间隔、艾宾浩斯间隔和自定义复习天数
  • 学习记录保存后会自动提取知识点,形成对应日期的每日复习清单,并按一级学科分组
  • 清单会标记掌握程度、学习动作、资料位置、重点和遗留问题,并根据掌握程度与学习动作给出简短复习建议
  • 清单分为”当天清单””已过期”和”全部”；跨日仍未完成的任务会自动顺延到当天
  • 复习间隔按真实天数显示,例如 D1、D3、D7、D14

月度视图

点击右侧日期可打开月历。每天会显示：

  • 记录区事件内容
  • 当天记录总时长
  • 待复习任务数量

专注计时与沉浸界面

  • 支持正计时和倒计时,内置 15、25、45、50、60 分钟,并支持自定义分钟数
  • 开始计时后自动进入沉浸界面,支持倒数日、励志句子、背景透明度,以及多种主题
  • 沉浸界面和普通计时区都提供同步的实时笔记框,结束时自动带入学习详情
  • 默认主题和励志句子完全离线；只有用户主动填写图片网址时才会请求该图片

统计

  • 累计专注次数、总时长和日均时长
  • 今日专注次数和时长
  • 按本日、本周、本月或本年查看学科时长分布
  • 本月每日专注折线图、本年每月专注折线图
  • 支持一级、二级和三级学科筛选

学科管理

  • 独立的学科管理模块,可添加或删除一级学科
  • 每个学科可以设置颜色、文字大小、透明度、加粗、斜体和默认复习规则
  • 支持添加二级和三级科目,并可分别决定是否生成复习任务
  • 学科详情包括本月专注日历、当前/最高连续打卡、累计专注、年度热力图和历史记录

页面与数据

  • 顶栏采用紧凑设计,设置、导入导出和撤销重做收纳在右上角”•••”菜单
  • “清空全部事件”仅位于设置的二级页面,降低误触风险
  • 页面本身固定不滚动,时间轴和复习任务列表各自独立滚动
  • 数据保存在浏览器 localStorage,支持 JSON 导入导出、撤销和重做
  • “分享学习日报”会生成纯白 PNG,先展示总时长、事件数、待复习数和学科占比环图,再展示当天时间轴
  • 项目包含 Web App Manifest 与 Service Worker。通过本地 HTTP 服务或 HTTPS 打开后,可在 Edge 中安装为独立应用、固定到任务栏并离线打开

使用方法

直接用浏览器打开 index.html 即可使用主要功能,无需安装依赖。若要启用离线缓存、系统通知和”安装到桌面”,请在项目目录启动任意静态 HTTP 服务。

按 Esc 可以退出选点、关闭弹窗或退出沉浸界面；Ctrl + Z 和 Ctrl + Y 分别用于撤销和重做。

共同的设计原则

这两个项目有几个共同点，也是我一开始给自己定下的约束：

原则 说明
零后端 没有服务器、没有数据库、没有 API
零登录 打开就用,不收集任何信息
数据在本地 localStorage 保存,JSON 导入/导出做备份
零构建 不需要 npm install,也不依赖打包工具,浏览器直接打开
结构轻量 每个项目只由 index.html、styles.css 和 app.js 组成

技术上我没有刻意追求复杂：AA 结算依赖一段贪心逻辑，时间轴主要是 DOM 计算与事件监听，饼图则交给 Canvas 绘制。写的过程中，我更关心输入和输出是否对应、边界情况会不会出错，以及页面在手机上是否仍然好操作。对这类个人工具来说，清晰、稳定、够用，本身就是合适的架构。

一点感想

写这两个工具的过程很像完成一个小型实践项目：先从真实问题出发，做出能运行的版本，再根据每次使用中暴露出来的问题继续调整。我最大的体会是：

为自己做的工具,不必一开始就追求”通用性”。

它不需要用户系统,也不必承担多租户、并发和复杂权限这些产品级负担。我更愿意先问一个简单的问题：”这个功能,我自己真的会用吗？”

用得上就加，用不上就删。每增加一个功能，我都会先问它能不能减少一次重复操作，或者让一条记录更清楚。这种看似“自私”的开发方式，反而让产品始终保持轻巧。

当然,纯前端也有代价：数据默认只存在当前浏览器里,换设备或清理浏览器数据都可能导致记录丢失。因此,我为两个项目都加入了 JSON 导入和导出,用最低的成本保留手动备份与迁移能力。

最后

如果你也有类似的小需求，不妨亲手做一个。它可以只是帮你整理一次数据、记录一周计划，或者省掉某个每天都要重复的步骤。无需先搭建复杂框架，也不必一开始就想清楚所有功能；从一个 HTML 页面开始，就已经足够。

我很喜欢这种反馈明确的过程：写下一点代码，刷新浏览器，观察结果，再继续调整。一个原本只存在于脑海里的想法，就这样慢慢变成了真正能用的东西。

两个项目的结构都很简单：index.html 负责内容结构,styles.css 负责视觉样式,app.js 负责交互逻辑。无需构建,直接在浏览器中打开即可运行。