项目简介

用 HTML、CSS 和 JavaScript 制作一个功能完整的网页记事本，支持添加、编辑、删除和本地保存笔记。你将学习 DOM 操作、事件监听和 localStorage 本地存储。

1. 1

   准备材料

   电脑、文本编辑器 等 4 种

   共 4 种材料

   电脑1 个文本编辑器1 个浏览器1 个应用界面设计草图1 个
2. 2

   设计界面布局

   用HTML创建页面结构：顶部标题栏、笔记输入区（标题+内容）、添加按钮和笔记列表展示区。

   用HTML创建页面结构：顶部标题栏、笔记输入区（标题+内容）、添加按钮和笔记列表展示区。

3. 3

   美化样式

   用CSS设计现代风格界面：卡片式笔记列表、渐变背景、悬浮阴影效果、响应式布局适配不同屏幕。

   用CSS设计现代风格界面：卡片式笔记列表、渐变背景、悬浮阴影效果、响应式布局适配不同屏幕。

4. 4

   实现添加功能

   用JavaScript获取输入内容，动态创建笔记卡片DOM元素并添加到列表中，每条笔记显示标题、内容和时间。

   用JavaScript获取输入内容，动态创建笔记卡片DOM元素并添加到列表中，每条笔记显示标题、内容和时间。

5. 5

   实现删除和编辑

   为每条笔记添加删除按钮和编辑按钮，点击删除移除DOM元素，点击编辑将内容回填到输入框修改后保存。

   为每条笔记添加删除按钮和编辑按钮，点击删除移除DOM元素，点击编辑将内容回填到输入框修改后保存。

6. 6

   本地存储

   使用localStorage将笔记数据以JSON格式保存在浏览器中，页面加载时自动读取并显示已保存的笔记。

   使用localStorage将笔记数据以JSON格式保存在浏览器中，页面加载时自动读取并显示已保存的笔记。

7. 7

   高级功能

   添加笔记搜索过滤、按时间排序、笔记分类标签、双击确认删除等功能，提升应用实用性。

   添加笔记搜索过滤、按时间排序、笔记分类标签、双击确认删除等功能，提升应用实用性。