html简单个人财务管理系统

dada02

简单个人财务管理系统

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

软件截图

功能介绍

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

关键代码

// 更新支出图表
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[index]}"></div>
                                        <span>${getCategoryText(category)}: ¥${filteredCategories[category].toFixed(2)}</span>
                                </div>
                        `;
                });
                ...

附件

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

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

欢迎试用

Lyc410152828

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

mryouan

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

dada02

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

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

坐久落花多

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

chaojisix

不错不错  收藏收藏  待用

lxf6091

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

yimin

谢谢大佬的热心分享

fxw520

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

YiH

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

繁花似锦丿遇见

看着不错，