---
title: "E.2 效率工具类（10 个）"
---


![99-appendix_e-2-content.png](/images/Basic/99-appendix_e-2-content.png)
# E.2 效率工具类（10 个）

这些项目能真正提高你的工作效率。做出来之后，你会每天都用。


## 1. Markdown 预览器

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：Markdown 解析、实时预览

**功能描述**：
- 左侧输入 Markdown
- 右侧实时显示渲染效果
- 支持常用 Markdown 语法
- 可选：导出为 HTML

**学到什么**：第三方库使用（如 marked.js）、分栏布局


## 2. JSON 格式化工具

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：JSON 解析、代码高亮

**功能描述**：
- 粘贴混乱的 JSON
- 一键格式化/美化
- 语法高亮显示
- 错误提示

**学到什么**：JSON.parse/stringify、错误处理


## 3. 单位转换器

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：数学计算、单位映射

**功能描述**：
- 支持长度、重量、温度等单位转换
- 输入一个值，显示其他单位的结果
- 界面简洁易用

**学到什么**：数值处理、select 下拉框


## 4. 颜色工具箱

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：颜色格式转换、颜色选择器

**功能描述**：
- HEX/RGB/HSL 互转
- 颜色选择器
- 显示颜色预览
- 复制颜色代码

**学到什么**：颜色格式、input type="color"


## 5. 文本统计工具

**难度**：⭐（入门）  
**预计时长**：30 分钟 - 1 小时  
**核心技术点**：字符串处理

**功能描述**：
- 统计字数、字符数
- 统计行数、段落数
- 统计单词数（英文）
- 实时更新

**学到什么**：字符串方法、正则表达式基础


## 6. 二维码生成器

**难度**：⭐⭐（基础）  
**预计时长**：1 小时  
**核心技术点**：第三方库使用

**功能描述**：
- 输入文字或链接
- 生成二维码图片
- 可下载保存
- 可选：自定义颜色

**学到什么**：使用 qrcode.js 等第三方库


## 7. 剪贴板历史

**难度**：⭐⭐⭐（进阶）  
**预计时长**：2-3 小时  
**核心技术点**：剪贴板 API、历史记录

**功能描述**：
- 记录复制过的内容
- 点击快速复制回去
- 搜索历史记录
- 可清除历史

**学到什么**：Clipboard API、列表管理


## 8. 快速笔记（便签）

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：拖拽、LocalStorage

**功能描述**：
- 创建多个便签
- 可拖动位置
- 不同颜色区分
- 自动保存

**学到什么**：拖拽 API、位置存储


## 9. 快捷短语管理

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：文本管理、快捷复制

**功能描述**：
- 保存常用短语/模板
- 分类整理
- 一键复制
- 搜索

**学到什么**：分类管理、剪贴板操作


## 10. 网页截图标注

**难度**：⭐⭐⭐（进阶）  
**预计时长**：3-4 小时  
**核心技术点**：Canvas、图片处理

**功能描述**：
- 上传截图
- 添加箭头、框、文字标注
- 导出标注后的图片

**学到什么**：Canvas 绑定、图片编辑基础


## 效率工具的共同特点

好的效率工具应该：
- **快**：打开就能用，不需要登录
- **简**：功能聚焦，不堆砌
- **存**：数据本地保存，不丢失

::: tip 做效率工具的心法
先问自己：「我每天重复做的事情有哪些？」然后把它做成工具。**解决自己的问题，就是最好的项目 idea。**
:::