html记账本改写:保存数据 localStorage。

news2024/11/24 12:02:32

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>记账本改写</title>
    <style>
        table {
            user-select: none;
            /* width: 100%; */
            border-collapse: collapse;
        }
        table,
        th,
        td {
            border: 1px solid black;
        }
        th,
        td {
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table id="ledgerTable">
        <thead>
            <tr>
                <th style="width: 50px;"><input type="month" id="monthPicker"></th>
                <th colspan="3">日常开销</th>
            </tr>
            <tr>
                <th>日期</th>
                <th>项目</th>
                <th>支出</th>
                <th>收入</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td><strong>总和</strong></td>
                <td id="totalAmount">0</td>
                <td id="totalExpense">0</td>
                <td id="totalIncome">0</td>
            </tr>
        </tfoot>
    </table>
    <script>
        let currentYear, currentMonth;
        document.getElementById('monthPicker').addEventListener('change', function () {
            let selectedDate = new Date(this.value);
            currentYear = selectedDate.getFullYear();
            currentMonth = selectedDate.getMonth() + 1; // 月份从0开始,需要加1
            let daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
            let tbody = document.querySelector('#ledgerTable tbody');
            // 清空tbody中的所有行
            tbody.innerHTML = '';
            // 为每一天添加行
            for (let day = 1; day <= daysInMonth; day++) {
                let newRow = document.createElement('tr');
                newRow.innerHTML = `
                    <td>${day}</td>
                    <td>
                        <button class="add-item">+</button>
                    </td>
                    <td>0</td>
                    <td>0</td>
                `;
                newRow.querySelector('.add-item').addEventListener('click', addItemHandler);
                tbody.appendChild(newRow);
            }
            // 从localStorage加载数据
            loadData();
            // 初始化总和
            updateTotals();
        });
        // 添加项目的事件处理函数
        function addItemHandler() {
            const newItem = createItemElement({ name: '', expense: '', income: '' });
            this.parentNode.insertBefore(newItem, this);
            updateDailyTotals(this.closest('tr'));
            updateTotals(); // 更新总和
            saveData(); // 保存数据
        }
        // 创建项目元素的函数
        function createItemElement(item) {
            const newItem = document.createElement('div');
            newItem.innerHTML = `
                <input type="text" placeholder="项目" value="${item.name}">
                <select class="type-select">
                    <option value="expense">支出</option>
                    <option value="income">收入</option>
                </select>
                <input type="number" placeholder="金额" style="width: 70px;" value="${item.expense || item.income || ''}">
                <button class="remove-item">-</button>
            `;
            // 获取金额输入框和类型选择框
            const amountInput = newItem.querySelector('input[type="number"]');
            const typeSelect = newItem.querySelector('.type-select');
            // 添加事件监听器
            addEventListeners(amountInput, typeSelect, newItem);
            // 给“-”按钮添加事件监听
            newItem.querySelector('.remove-item').addEventListener('click', function () {
                const row = this.closest('tr');
                // 弹出确认对话框
                const confirmDelete = confirm("确定要删除此项目吗?");
                if (confirmDelete) {
                    this.parentNode.remove();
                    updateDailyTotals(row);
                    updateTotals(); // 更新总和
                    saveData(); // 保存数据
                }
            });
            return newItem;
        }
        // 添加事件监听器的函数
        function addEventListeners(amountInput, typeSelect, newItem) {
            // 监听金额输入框的变化
            amountInput.addEventListener('input', function () {
                if (typeSelect.value === 'expense' && this.value > 0) {
                    this.value = -this.value; // 如果选择“支出”且金额为正数,自动转换为负数
                }
                updateDailyTotals(newItem.closest('tr')); // 更新每日总和
                updateTotals(); // 更新总和
                saveData(); // 保存数据
            });
            // 监听类型选择框的变化
            typeSelect.addEventListener('change', function () {
                if (this.value === 'expense') {
                    // 如果选择“支出”,确保金额为负数
                    if (amountInput.value > 0) {
                        amountInput.value = -amountInput.value;
                    }
                    amountInput.min = '-999999';
                    amountInput.max = '0';
                } else if (this.value === 'income') {
                    // 如果选择“收入”,确保金额为正数
                    if (amountInput.value < 0) {
                        amountInput.value = -amountInput.value;
                    }
                    amountInput.min = '0';
                    amountInput.max = '999999';
                }
                updateDailyTotals(newItem.closest('tr')); // 更新每日总和
                updateTotals(); // 更新总和
                saveData(); // 保存数据
            });
        }
        // 更新每日总和的函数
        function updateDailyTotals(row) {
            const items = row.querySelectorAll('div');
            let expenseTotal = 0;
            let incomeTotal = 0;
            items.forEach(item => {
                const amountInput = item.querySelector('input[type="number"]');
                const amount = parseFloat(amountInput.value) || 0;
                if (amount < 0) {
                    expenseTotal += amount;
                } else {
                    incomeTotal += amount;
                }
            });
            row.querySelectorAll('td')[2].textContent = expenseTotal;
            row.querySelectorAll('td')[3].textContent = incomeTotal;
        }
        // 更新总和的函数
        function updateTotals() {
            const rows = document.querySelectorAll('#ledgerTable tbody tr');
            let totalExpense = 0;
            let totalIncome = 0;
            rows.forEach(row => {
                const expenseCell = row.querySelectorAll('td')[2];
                const incomeCell = row.querySelectorAll('td')[3];
                totalExpense += parseFloat(expenseCell.textContent) || 0;
                totalIncome += parseFloat(incomeCell.textContent) || 0;
            });
            document.getElementById('totalExpense').textContent = totalExpense;
            document.getElementById('totalIncome').textContent = totalIncome;
            document.getElementById('totalAmount').textContent = totalIncome + totalExpense;
        }
        // 保存数据的函数
        function saveData() {
            if (!currentYear || !currentMonth) return;
            const key = `ledger_${currentYear}_${currentMonth}`;
            const data = [];
            const rows = document.querySelectorAll('#ledgerTable tbody tr');
            rows.forEach(row => {
                const day = row.querySelector('td').textContent;
                const items = row.querySelectorAll('div');
                items.forEach(item => {
                    const name = item.querySelector('input[type="text"]').value;
                    const type = item.querySelector('.type-select').value;
                    const amount = item.querySelector('input[type="number"]').value;
                    data.push({ day, name, type, amount });
                });
            });
            localStorage.setItem(key, JSON.stringify(data));
        }
        // 加载数据的函数
        function loadData() {
            if (!currentYear || !currentMonth) return;
            const key = `ledger_${currentYear}_${currentMonth}`;
            const data = JSON.parse(localStorage.getItem(key)) || [];
            const rows = document.querySelectorAll('#ledgerTable tbody tr');
            data.forEach(item => {
                const row = Array.from(rows).find(row => row.querySelector('td').textContent === item.day);
                if (row) {
                    const newItem = createItemElement({ name: item.name, expense: item.type === 'expense' ? item.amount : '', income: item.type === 'income' ? item.amount : '' });
                    row.querySelector('td:nth-child(2)').insertBefore(newItem, row.querySelector('.add-item'));
                }
            });
            rows.forEach(row => updateDailyTotals(row));
            updateTotals();
        }
    </script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2114932.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据集 3DPW-开源户外三维人体建模-姿态估计-人体关键点-人体mesh建模 >> DataBall

3DPW 3DPW-开源户外三维人体建模数据集-姿态估计-人体关键点-人体mesh建模 开源户外三维人体数据集 inproceedings{vonMarcard2018, title {Recovering Accurate 3D Human Pose in The Wild Using IMUs and a Moving Camera}, author {von Marcard, Timo and Henschel, Robe…

从“游戏科学”到玄机科技:《黑神话:悟空》的视角打开动漫宇宙

近日&#xff0c;中国游戏界迎来了一场前所未有的盛事——由游戏科学公司开发的《黑神话&#xff1a;悟空》正式上线&#xff0c;并迅速成为全球玩家热议的焦点。在居高不下的讨论热度中&#xff0c;有人说他的成功在于对《西游记》为背景进行改编&#xff0c;对原著进行了分析…

读软件设计的要素04概念的关系

1. 概念的关系 1.1. 概念是独立的&#xff0c;彼此间无须相互依赖 1.1.1. 一个概念是应该独立地被理解、设计和实现的 1.1.2. 独立性是概念的简单性和可重用性的关键 1.2. 软件存在依赖性 1.2.1. 不是说一个概念需要依赖另一个概念才能正确运行 1.2.2. 只有当一个概念存在…

1 模拟——67. 二进制求和

1 模拟 67. 二进制求和 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 示例 1&#xff1a; 输入:a "11", b "1" 输出&#xff1a;"100" 示例 2&#xff1a; 输入&#xff1a;a "1010", b "…

单GPU一分钟生成16K高清图像!新加坡国立发布LinFusion:无缝兼容Stable Diffusion插件

论文链接&#xff1a;https://arxiv.org/pdf/2409.02097 Git链接&#xff1a;https://lv-linfusion.github.io/ 亮点直击 本文研究了Mamba的非因果和归一化感知版本&#xff0c;并提出了一种新颖的线性注意力机制&#xff0c;解决了扩散模型在高分辨率视觉生成中的挑战。 本文…

Vue——day11之生命周期

目录 生命周期的八个阶段 生命周期执行的流程图 代码示例 总结 Vue的生命周期是指在Vue实例创建、挂载、更新和销毁过程中&#xff0c;会触发的一系列钩子函数。这些钩子函数可以用来在不同的生命周期阶段执行相应的逻辑操作。 生命周期的八个阶段 Vue的生命周期可以分为…

Github 2024-09-08 php开源项目日报 Top10

根据Github Trendings的统计,今日(2024-09-08统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目10TypeScript项目1JavaScript项目1Laravel: 以优雅语法简化Web开发 创建周期:4028 天开发语言:PHP协议类型:MIT LicenseStar数量:30…

gazebo 已加载模型但无法显示

目录 写在前面的话问题一&#xff1a;robot_state_publisher 发布机器人信息失败报错一 Error: Error document empty.报错二 .xcaro 文件中有多行注释成功启动 问题二&#xff1a;通过 ros2 启动 gazebo 失败成功启动 问题三&#xff1a;gazebo 崩溃和无法显示模型问题四&…

使用LSTM(长短期记忆网络)模型预测股票价格的实例分析

一&#xff1a;LSTM与RNN的区别 LSTM&#xff08;Long Short-Term Memory&#xff09;是一种特殊的循环神经网络&#xff08;RNN&#xff09;架构。LSTM是为了解决传统RNN在处理长序列数据时遇到的梯度消失或梯度爆炸问题而设计的。 在传统的RNN中&#xff0c;信息通过隐藏状…

电动机制造5G智能工厂工业物联数字孪生平台,推进制造业数字化转型

电动机制造5G智能工厂工业物联数字孪生平台&#xff0c;推进制造业数字化转型。5G智能工厂与物联数字孪生平台的融合应用&#xff0c;为电动机制造业的数字化转型铺设了一条高速通道。这一创新模式不仅极大地提升了生产效率&#xff0c;还深刻改变了产品的设计、生产、管理及运…

在全球化时代成为超级个体:Web3、个人品牌与AI工具的融合

随着Web3技术和人工智能的快速发展,个人品牌建设与创作者经济正在迎来前所未有的机遇。《Web3Brand》是一个专注于帮助用户理解Web3技术、建立和增强个人品牌、提升创作者经济实力,并利用AI工具提高工作效率的平台。本文将探讨该博客如何通过提供播客、案例分析、策略指南和工…

redis内存清理和linux系统清理缓存以及redis启动

1清空所有数据库 redis-cli FLUSHALL 2清空所有数据库redis-cli FLUSHDB 3. 删除指定的缓存键 redis-cli DEL <key>4. 设置键过期 redis-cli EXPIRE <key> <seconds>例如&#xff1a; redis-cli EXPIRE mykey 605.启动redis 这个启动命令要在/usr/loca…

sql 中名字 不可以 包含 mysql中 具有 特定意义 的单词

这种sql执行不报错 这种sql执行报错 所以sql中名字不可以使用mysql中具有特定意义的单词 以此文章作为警告&#xff0c;我下次起名字不可以使用 mysql中具有特殊意义的字符 就因为这个导致我搞了一个多小时&#xff0c;急死我了&#xff0c;周五就要前后端联调了。下次千万不…

NSmartProxy:一款.NET开源、跨平台的内网穿透工具

前言 今天大姚给大家分享一款.NET开源、免费&#xff08;MIT License&#xff09;、跨平台的内网穿透工具&#xff0c;采用.NET Core的全异步模式打造&#xff1a;NSmartProxy。 内网穿透工具介绍 内网穿透工具是一种能够允许用户从互联网上的任何地方安全地访问并管理处于内…

代码随想录训练营day37|52. 携带研究材料,518.零钱兑换II,377. 组合总和 Ⅳ,70. 爬楼梯

52. 携带研究材料 这是一个完全背包问题&#xff0c;就是每个物品可以无限放。 在一维滚动数组的时候规定了遍历顺序是要从后往前的&#xff0c;就是因为不能多次放物体。 所以这里能多次放物体只需要把遍历顺序改改就好了 # include<iostream> # include<vector>…

数据结构:线性表的顺序存储

文章目录 &#x1f34a;自我介绍&#x1f34a;线性表的顺序存储介绍概述例子 &#x1f34a;顺序表的存储类型设计设计思路类型设计 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以&#xff1a;点赞关注评论收藏&#xff08;一键四连&#xff09;哦~ &#x1f34a;自我…

Temu官方宣导务必将所有的点位材料进行检测-RSL资质检测

关于饰品类产品合规问题宣导&#xff1a; 产品法规RSL要求 RSL测试是根据REACH法规及附录17的要求进行测试。REACH法规是欧洲一项重要的法规&#xff0c;其中包含许多对化学物质进行限制的规定和高度关注物质。 为了确保珠宝首饰的安全性&#xff0c;欧盟REACH法规规定&#…

【H2O2|全栈】关于HTML(2)HTML基础(一)

HTML相关知识 目录 前言 准备工作 标签的具体分类&#xff08;一&#xff09; 本文中的标签在什么位置使用&#xff1f; 属性 标题标签 段落标签 文本格式化标签 分类汇总 计算机输出标签 ​编辑分类汇总 引文&#xff0c;引用标签 分类汇总 预告和回顾 UI设计…

SAP学习笔记 - 开发04 - Fiori UI5 开发环境搭建

上一章学习了 CDSView开发环境的搭建&#xff0c;以及CDSView相关的知识。 SAP学习笔记 - 开发03 - CDSView开发环境搭建&#xff0c;Eclipse中连接SAP&#xff0c;CDSView创建-CSDN博客 本章继续学习SAP开发相关的内容&#xff0c; - Fiori UI5的开发环境搭建 - 安装VSCode …

JavaScript Web API入门day7

目录 1.图片切换模块 2.鼠标经过以及离开中等盒子&#xff0c;大盒子的处理 3.黑色遮罩层的位置以及放大功能 4.放大镜的完整代码 1.图片切换模块 效果图&#xff1a; 思路分析&#xff1a; ①&#xff1a;鼠标经过小盒子&#xff0c;左侧中等盒子显示对应中等图片 获取对…