个人记账网页应用

一个简洁、美观、功能齐全的个人记账网页应用，帮助用户管理日常收支情况。

主要功能

1. 收支管理

• ✅ 添加交易记录（收入/支出）
• ✅ 编辑交易记录
• ✅ 删除交易记录
• ✅ 查看交易明细

2. 分类管理

• ✅ 预设常见分类（收入/支出）
• ✅ 新增自定义分类
• ✅ 分类自动关联交易类型

3. 数据可视化

• ✅ 总收支情况展示
• ✅ 日历视图查看每天收支
• ✅ 点击日期查看当天明细

4. 其他功能

• ✅ 设置初始余额
• ✅ 数据本地存储（刷新不丢失）
• ✅ 响应式设计（支持移动端）

技术栈

• 前端框架：纯HTML5 + CSS3 + JavaScript
• 数据存储：浏览器LocalStorage
• 样式设计：自定义CSS，响应式布局
• 交互体验：平滑动画效果，直观操作界面

项目结构

charge_project/
├── index.html        # 主页面
├── style.css         # 样式文件
├── script.js         # 功能实现
└── README.md         # 项目说明

使用方法

1. 打开应用

直接在浏览器中打开 index.html 文件即可使用。

2. 基本操作

添加交易记录

1. 点击页面中部的「+ 添加交易」按钮
2. 在弹出的表单中填写：
   • 描述：交易的简要说明（如「午餐」）
   • 金额：交易金额
   • 类型：选择「收入」或「支出」
   • 分类：从下拉菜单中选择分类
3. 点击「添加」按钮保存

编辑交易记录

1. 在交易记录列表中，找到需要编辑的记录
2. 点击记录右侧的「编辑」按钮
3. 在弹出的编辑模态框中修改信息
4. 点击「保存」按钮确认修改

删除交易记录

1. 在交易记录列表中，找到需要删除的记录
2. 点击记录右侧的「删除」按钮
3. 在弹出的确认对话框中点击「确定」

3. 高级功能

新增分类

1. 点击页面中部的「+ 新增分类」按钮
2. 在弹出的模态框中填写：
   • 分类名称：新分类的名称
   • 分类类型：选择「收入」或「支出」
3. 点击「保存」按钮确认添加

设置初始余额

1. 点击页面中部的「⚙️ 设置余额」按钮
2. 在弹出的模态框中输入初始余额
3. 点击「保存」按钮确认设置
4. 系统会自动计算：总结余 = 初始余额 + 总收入 - 总支出

日历视图

1. 在日历视图中查看每周的收支情况
2. 点击左侧箭头查看上一周，右侧箭头查看下一周
3. 点击任意日期查看当天的交易明细
4. 有交易记录的日期会有特殊标记
5. 当天日期会有特殊样式

默认分类

收入分类

• 工资
• 奖金
• 投资收益
• 其他收入

支出分类

• 餐饮
• 交通
• 购物
• 娱乐
• 医疗
• 教育
• 住房
• 其他支出

数据存储

所有数据均存储在浏览器的本地存储（LocalStorage）中，包括：

• 交易记录
• 分类信息
• 初始余额设置

注意：清除浏览器缓存或使用隐私模式可能会导致数据丢失。

响应式设计

应用支持多种屏幕尺寸：

• 桌面端：完整显示所有功能
• 平板端：自适应布局，保持良好体验
• 移动端：优化显示，确保操作便捷

浏览器兼容性

支持所有现代浏览器：

• Chrome（推荐）
• Firefox
• Safari
• Edge

未来规划

• 数据导出功能
• 图表统计分析
• 预算管理功能
• 数据备份与恢复
• 多用户支持

贡献

欢迎提出建议和改进意见，共同完善这个记账应用！

许可证

本项目采用 MIT 许可证，详见 LICENSE 文件。

---

使用愉快！ 📊💰