---
title: "E.1 个人工具类（10 个）"
---


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

不知道做什么？从这里找灵感。每个项目都标注了难度和预计时长，选一个感兴趣的开始吧！


## 1. 每日名言展示器

**难度**：⭐（入门）  
**预计时长**：30 分钟 - 1 小时  
**核心技术点**：HTML/CSS 基础、JavaScript 数组操作

**功能描述**：
- 每次打开显示一条随机名言
- 点击按钮切换下一条
- 可选：收藏喜欢的名言

**学到什么**：网页基础结构、DOM 操作、数组随机取值


## 2. 简易待办清单

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：LocalStorage、列表渲染、事件处理

**功能描述**：
- 添加待办事项
- 标记完成/未完成
- 删除事项
- 刷新后数据还在

**学到什么**：数据持久化、增删改查操作


## 3. 番茄钟计时器

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：定时器、状态管理

**功能描述**：
- 25 分钟工作 + 5 分钟休息的循环
- 开始/暂停/重置按钮
- 倒计时显示
- 时间到了有提醒

**学到什么**：setInterval/setTimeout、时间格式化


## 4. 个人记账本

**难度**：⭐⭐⭐（进阶）  
**预计时长**：2-4 小时  
**核心技术点**：表单处理、数据统计、LocalStorage

**功能描述**：
- 记录收入/支出
- 分类标签
- 查看当月统计
- 简单的图表展示

**学到什么**：表单验证、数据聚合计算


## 5. 密码生成器

**难度**：⭐（入门）  
**预计时长**：30 分钟 - 1 小时  
**核心技术点**：随机数生成、字符串操作

**功能描述**：
- 选择密码长度
- 选择包含的字符类型（大写、小写、数字、符号）
- 一键生成随机密码
- 复制到剪贴板

**学到什么**：随机数、剪贴板 API


## 6. 习惯打卡器

**难度**：⭐⭐（基础）  
**预计时长**：2-3 小时  
**核心技术点**：日期处理、LocalStorage、日历视图

**功能描述**：
- 创建要养成的习惯
- 每天打卡
- 查看连续打卡天数
- 日历视图显示打卡记录

**学到什么**：Date 对象、日历布局


## 7. 个人书签收藏

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：链接管理、分类整理、搜索过滤

**功能描述**：
- 添加网站书签（名称+链接）
- 分类管理
- 搜索书签
- 点击直接打开

**学到什么**：列表过滤、URL 处理


## 8. 简易笔记本

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

**功能描述**：
- 创建/编辑/删除笔记
- 笔记列表
- 自动保存
- 搜索笔记内容

**学到什么**：文本区域处理、实时保存


## 9. 倒计时页面

**难度**：⭐（入门）  
**预计时长**：30 分钟 - 1 小时  
**核心技术点**：日期计算、定时更新

**功能描述**：
- 设置目标日期（如生日、考试、假期）
- 显示距离目标还有多少天/时/分/秒
- 好看的倒计时展示

**学到什么**：日期差值计算、动态更新页面


## 10. 个人主页 / 链接树

**难度**：⭐（入门）  
**预计时长**：30 分钟 - 1 小时  
**核心技术点**：HTML/CSS 布局、响应式设计

**功能描述**：
- 头像和自我介绍
- 社交媒体链接
- 作品展示
- 漂亮的个人风格

**学到什么**：CSS 布局、个人品牌展示


## 难度说明

| 难度 | 含义 | 建议 |
|------|------|------|
| ⭐ | 入门级，30分钟-1小时 | 刚学完教程就能做 |
| ⭐⭐ | 基础级，1-2小时 | 需要一点点练习 |
| ⭐⭐⭐ | 进阶级，2-4小时 | 需要多轮迭代 |

::: tip 建议
从 ⭐ 难度开始，做完一个再挑战下一个。**完成比完美更重要**。
:::