Skip to content

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小时需要多轮迭代

建议

从 ⭐ 难度开始,做完一个再挑战下一个。完成比完美更重要