财务自由计算器 - FIRE运动进度追踪
根据资产、年支出与储蓄率,估算实现财务自由所需的年限与进度条,激发理财动力。
WebSocket 消息检查器 - 拦截并可视化收发数据
代理 WebSocket 连接,实时拦截并展示所有文本/二进制消息,支持过滤和搜索。
Webmention发送测试 - 手动Ping引用
输入源页和引用页URL,构造Webmention请求通知被引用页面,演示独立博客协议。
CSS缓动函数生成器 - Cubic-Bezier曲线编辑
直观拖拽曲线控制点,生成CSS transition/animation的cubic-bezier()值,并即时播放动画效果预览。
WebSocket 消息构建器 - 编辑并发送文本/二进制帧
连接到 WebSocket 端点,自定义消息内容(JSON、文本、ArrayBuffer)并发送,查看响应。
表单标签关联验证器 - 检查 label 与 input 的配对
分析表单 HTML,检查是否每个 input 都有正确关联的 label,并指出使用 aria-label 的替代情况。
CSS 容器查询演示 - @container 根据父元素响应
设置容器宽度阈值,改变容器大小观察组件内部样式的变化,学习容器查询用法。
波的干涉图样生成器 - 双源波长颜色调节
调节两列波的频率、波长和位置,实时观看水面波干涉形成的明暗条纹图案。
仿生阅读文本生成器 - 单词前半加粗提升速读
将英文文本转换为单词前几个字母加粗的格式,引导视线跳跃式阅读,模拟Bionic Reading效果。
网页计步器 - 利用手机加速度计
请求手机传感器权限,通过加速度变化峰值检测来简单估算步数。
DOM变动观察器 - 监听节点变化
配置监听目标,实时显示DOM节点的增删改及属性变化,辅助AJAX内容调试。
神经网络游乐场扩展版 - 自定义激活函数与架构
拖拽构造多层感知机,调整学习率和激活函数,实时观察分类任务训练过程,入门深度学习。
缓动函数沙盒 - 自定义贝塞尔及steps试玩
可视化调整cubic-bezier和steps()缓动,并可实时看到动画球左右移动。
ARIA Live Region测试 - 动态内容播报
模拟动态区域更新,测试不同aria-live值(polite/assertive)对屏幕阅读器的影响。
WebSocket在线测试工具 - 连接/发送消息调试
输入WebSocket服务地址,建立连接,发送和接收消息,方便调试实时通信应用。
滚动深度追踪器 - 测量用户阅读百分比
记录用户在页面上的最大滚动深度(25%、50%、75%、100%),并生成可视化热图。
点击劫持测试页面 - 检测 X-Frame-Options 缺失
尝试将目标 URL 加载到 iframe 中,检测是否缺少点击劫持防护头,并展示风险。
XSS 过滤器测试沙盒 - 输入转义与过滤演示
输入可能的攻击向量,选择不同的转义或过滤策略,实时查看是否被安全处理,教育安全开发。
Generator 与迭代器演示 - 暂停/恢复执行过程
编写 generator 函数,逐步 next() 并显示每次 yield 的值和状态,理解惰性求值。
推广链接构造器 - 添加UTM参数
输入原始URL,填入来源、媒介、活动名等,生成带UTM规范的推广追踪链接。
Datalist 自动建议增强演示 - 动态数据源
演示如何动态更新 datalist 选项以实现搜索建议,并处理键盘选择。
SQLite WebAssembly 浏览器端演示 - 离线数据库
在浏览器中运行完整的SQLite数据库,创建表、插入查询数据,体验客户端强大的SQL能力。
JSON Schema生成器 - 从JSON数据推断结构
粘贴JSON示例数据,自动分析并生成对应的JSON Schema,支持类型推断和必填标记。
仿生阅读转换器 - 实时加粗前半部分字母
输入网址或文本,将单词首部字母人工加粗,引导视线快速移动,提升阅读速度。
颜色变量命名工具 - 语义化名称建议
输入颜色十六进制值,根据色相和明度给出类似`--color-primary-500`的命名建议。
WebSocket压力测试 - 并发连接发送
配置WebSocket地址,模拟多个并发连接,发送自定义消息并记录响应延迟。
阅读宾果挑战卡 - 鼓励广泛阅读
生成含不同题材、作者的5x5宾果卡,每读完一本划掉,满一行有奖励。
z-index层级可视化 - 拖拽相互遮挡关系
添加多个色块拖拽顺序,直观表现层叠上下文与z-index值。
XML结构校验器 - 嵌套闭合与属性检查
检查XML的格式正确性,报告错误的标签闭合和属性缺失。
ResizeObserver演示 - 响应元素尺寸变化
拖拽改变一个div的大小,通过ResizeObserver API实时显示其新的宽度和高度。
UD5工具箱