网站 › 『编程语言区』 › html简单个人财务管理系统

dada02 发表于 2026-1-23 14:01

html简单个人财务管理系统

本帖最后由 dada02 于 2026-1-27 07:44 编辑

# 简单个人财务管理系统
【看到网友发布的个人财务管理系统，功能较多，操作稍显复杂，用html写个简单的用一下】

## 软件截图


## 功能介绍
日期：区间日期，上月、本月、下月等区间查询
汇总: 实时统计总收入、总支出和当前余额
统计：收入和支出分类饼图展示
新增：模态窗口新增记录
交易：可按交易描述、分类和金额搜索
修改：支持直接分类查询、修改和删除


## 关键代码
```js
// 更新支出图表
async function updateExpenseChart() {
      const container = document.getElementById('expense-chart-container');
      
      // 如果容器是折叠状态，不更新图表
      if (container.classList.contains('collapsed')) {
                return;
      }
      
      try {
                // 确保Chart.js已加载
                if (typeof Chart === 'undefined') {
                        console.warn('Chart.js未加载，正在重试...');
                        await loadChartJS();
                }
               
                const transactions = currentDateRange ?
                        await getTransactionsByDateRange(currentDateRange.startDate, currentDateRange.endDate) :
                        await getAllTransactions();
               
                // 只统计支出
                const expenseTransactions = transactions.filter(t => t.type === 'expense');
               
                // 如果没有支出数据，显示空状态
                if (expenseTransactions.length === 0) {
                        document.getElementById('expenseChart').style.display = 'none';
                        document.getElementById('expense-chart-placeholder').style.display = 'block';
                        document.getElementById('expense-chart-legend').innerHTML = '';
                        return;
                }
               
                // 显示图表
                document.getElementById('expenseChart').style.display = 'block';
                document.getElementById('expense-chart-placeholder').style.display = 'none';
                ...
               
                // 更新图例
                const legendContainer = document.getElementById('expense-chart-legend');
                let legendHtml = '';
               
                Object.keys(filteredCategories).forEach((category, index) => {
                        legendHtml += `
                              <div class="legend-item">
                                        <div class="legend-color" style="background-color: ${filteredColors}"></div>
                                        <span>${getCategoryText(category)}: ¥${filteredCategories.toFixed(2)}</span>
                              </div>
                        `;
                });
                ...
```

# 附件
个人财务管理系统html.zip，解压到文件夹，双击html浏览器打开使用。

蓝奏云
https://wwavl.lanzouu.com/iE0jD3gtv2qd 密码:52pj 基础管理
https://wwavl.lanzouu.com/i4zGm3h3g2bi 密码:52pj 增加和优化分类管理

欢迎试用

Lyc410152828 发表于 2026-1-23 17:16

不错，收藏，建议增加功能：1、登录，设置密码，可以选择免密登录，密码登录--登录用户名、密码设置，增加私密性；2、可以修改收入支出分类，用户可以设置“保存为模版”选项，增加收入支出的分类功能，后续的统计和比较才有意义

mryouan 发表于 2026-1-23 14:15

很好，关键是数据能不能保存

dada02 发表于 2026-1-23 14:20

mryouan 发表于 2026-1-23 14:15
很好，关键是数据能不能保存

数据保存在浏览器存储空间里，可以随手导出或导入

坐久落花多 发表于 2026-1-23 14:25

挺好，看着不错，前端设计赞

chaojisix 发表于 2026-1-23 14:36

不错不错收藏收藏待用{:1_893:}

lxf6091 发表于 2026-1-23 14:36

已经下载，，试下看怎么样，再转成手机版的。随时可以记录

yimin 发表于 2026-1-23 14:45

谢谢大佬的热心分享

fxw520 发表于 2026-1-23 15:03

好东西 我要每天记录我的消费数

YiH 发表于 2026-1-23 15:08

拿走用用，看着功能强大，冲着饼图诱惑

繁花似锦丿遇见 发表于 2026-1-23 15:16

看着不错，

查看完整版本: html简单个人财务管理系统