html记账本改写：保存数据 localStorage。
<!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开始，需要加1let 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>相关文章：
html记账本改写：保存数据 localStorage。
<!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…...
frida检测绕过-libmsaoaidsec.so
libmsaoaidsec.so 部分检测手段 检测机制在native层实现一般在init_proc()函数中触发使用 pthread_create 创建2个检测线程 绕过: nop pthread_create 的调用 eg: 在 bilibil1 - v7.26.1版本中, 在got表导入了pthread_create 绕过: 替换dlsym(xx, "pthread_create "…...
Splasthop 安全远程访问帮助企业对抗 Cobalt Strike 载荷网络攻击
一、背景 根据 FreeBuf（标题为：潜藏系统2个月未被发现，新型网络攻击瞄准中国高价值目标）和 The Hacker News（标题为：New Cyberattack Targets Chinese-Speaking Businesses with Cobalt Strike Payloads&a…...
Rust：Restful API 服务程序开发详述
0. 关于异步程序设计 0.1 对异步机制的理解 运行效率对于后端程序来讲很重要。我曾经以为，多线程机制是后端设计的终极方法，后来才发现，异步机制才是榨干 CPU 运行效率资源的关键所在。 我最初对于异步程序设计有误解，以为多线…...
《Cloud Native Data Center Networking》（云原生数据中心网络设计）读书笔记 -- 09部署OSPF
本章的目的是帮助网络工程师确定网络的理想 OSPF 配置。本章将回答以下问题 应何时在数据中使用OSPF ?配置 OSPF 的关键设计原则是什么?OSPFv2 和 OSPFv3 之间有什么区别，应如何使用?如何在路由协议栈中配置 OSPF ?如何在服务器上配置 OSPF，例如为容…...
【Visual Studio 报错】未加载 wntdll.pdb（一种可行的解决办法）
调试程序时，会出现下面这个报错 分析原因： 出现未加载 wntdll.pdb 报错大概率是你的指针使用错误 ，比如使用野指针、越界访问、或者堆区空间释放方式错误等。 这里以 堆区空间释放方式错误 为例子 1、堆区开辟的数组空间使用 delete 释放 …...
P1332 血色先锋队
[题目通道](血色先锋队 - 洛谷) #include<bits/stdc.h> using namespace std; int n,m,a,b,xa[114514],ya[114514],xb[114514],yb[114514],maxx[114514]; int main() {cin>>n>>m>>a>>b;for(int i1;i<a;i)cin>>xa[i]>>ya[i];for(…...
HarmonyOS】ArkTS学习之基于TextTimer的简易计时器的elapsedTime最小时间单位问题
本文旨在纪录自己对TextTimer使用过程的疑惑问题 我在查看教程时候，发现很多博客在onTimer(event: (utc: number, elapsedTime: number) > void) 这里提到elapsedTime：计时器经过的时间，单位为毫秒。我不清楚是否为版本问题。 在我查看ver…...
函数指针学习
认识函数指针： 函数指针的用处： 回调函数（以函数指针为参数的参数） 定义带标签的结构体 typedef struct mode { int data; } Node; 标签（mode）: mode 是结构体的标签名。在这种定义中，mo…...
『功能项目』武器的切换实例【34】
本章项目成果展示 我们打开上一篇33战士的A键连击的项目， 本章要做的事情是按键盘E键切换职业时切换手中的武器 首先在资源商店下载免费的武器模型 创建一个空物体 命名为WeaponPos 将武器预制体拖拽至WeaponPos （注意调整空物体位置就可以后续文章会更…...
github中action作用和讲解
1，简介 GitHub Actions 是 GitHub 的一个自动化功能，它允许你在 GitHub 仓库中自动执行软件开发工作流程。你可以使用 GitHub Actions 来执行各种任务，比如： 自动测试：每当代码被推送到仓库时，自动运行测试…...
数据库管理-第238期 23ai：全球分布式数据库-架构与组件（20240904）
数据库管理238期 2024-09-04 数据库管理-第238期 23ai：全球分布式数据库-架构与组件（20240904）1 架构图2 分片数据库与分片3 Shard Catalog4 Shard Director5 Global Service6 管理界面总结 数据库管理-第238期 23ai：全球分布式数…...
GIT | git提交注释自动添加信息头
GIT | git提交注释自动添加信息头 时间：2024年9月6日10:20:11 文章目录 GIT | git提交注释自动添加信息头1.操作2.commit-msg文件 1.操作 2.commit-msg文件 #!/bin/sh # # An example hook script to check the commit log message. # Called by "git commit&q…...
React 全屏问题解决方案
1、全屏下弹窗被遮挡的问题 参考：https://www.jianshu.com/p/b22d1ad9533e 原因： 需要全屏的节点部分被传入 screenfull 中，弹窗的层级永远低于全屏，所以被遮挡。 解决方法： 方式1：把整个 body 全屏&…...
Java JVM 垃圾回收算法详解
Java 虚拟机（JVM）是运行 Java 应用程序的核心，它的垃圾回收（Garbage Collection, GC）机制是 JVM 中非常重要的一个部分。垃圾回收的主要任务是自动管理内存，回收那些不再被使用的对象，从而释放内…...
hadoop dfs web页面访问增加鉴权
前言 装好了Hadoop，通过浏览器访问，发现竟然不需要鉴权就能访问，且暴露了很多服务器层文件路径信息，基于多年积累的安全意识，必须得配置些鉴权信息，就有了该文，仅做学习记录，下次自…...
LCP 485. 最大连续 1 的个数[lleetcode -11]
从今天起，我们的算法开始研究搜索，首先就是DFS深度优先搜索（depth-first seach，DFS）在搜索到一个新的节点时，立即对该新节点进行遍 历；因此遍历需要用先入后出的栈来实现，也可以通过…...
关于宏任务的说法已经过时
关于宏任务w3c的最新解释，（mdn已经搜不到宏任务队列） ● 每个任务都有一个任务类型，用一个类型的任务必须在一个队列，不同类型的任务可以分属不同的队列。在一次事件循环当中，浏览器可以根据实际情况从不同…...
Java箱与泛型
大O的渐进表示法 大 O 的渐进表示法 去掉了那些对结果影响不大的项 ，简洁明了的表示出了执行次数。 void func1(int N){ int count 0; for (int i 0; i < N ; i) { for (int j 0; j < N ; j) { count; } } for (int k 0; k < 2 * N ; k) { count; } in…...
QT如何判断一个文件是否存在
在Qt中，判断一个文件是否存在是一个常见的操作，可以通过QFile类和QDir类来实现。不过，对于简单的文件存在性检查，QFile类提供的接口更为直接。下面是一个使用QFile类来判断文件是否存在的例子： #include <QFile>…...
Midjourney锐化效果失效真相（2024官方未公开的渲染管线瓶颈解析）
更多请点击： https://intelliparadigm.com 第一章：Midjourney锐化效果失效真相（2024官方未公开的渲染管线瓶颈解析） 自2024年V6.2版本起，大量用户反馈 --stylize 与 --sharp 参数组合下图像边缘锐化效果显著弱化&am…...
别急着扔！12年老ThinkPad X230升级SSD和内存后，Win10流畅得像新电脑
12年老ThinkPad X230重生指南：极简升级打造流畅办公利器每次打开抽屉看到那台积灰的ThinkPad X230，总有种说不出的情感。这款2012年问世的经典商务本，曾陪伴无数人度过加班到凌晨的夜晚。如今性能确实有些力不从心，但直接丢弃又觉…...
双稳健机器学习：用正交性与交叉拟合解决因果推断中的ML偏差
1. 项目概述：当机器学习遇见因果推断的“干扰”难题在实证研究的日常工作中，我们常常面临一个核心矛盾：我们真正关心的，往往只是一个或几个关键参数——比如一项政策对就业率的平均影响（平均处理效应，ATE&a…...
【审计专栏】【财务领域】 第四十九篇 人在企业中的核心资产和核心利益01
编号 类型 企业 （行业/企业产品/企业利益链/生态位与层级） 业务领域 企业性质 企业中人的角色/岗位/利益矩阵 人在企业中的核心资产/附属资产 资产的业务-财务数学模型及数字/数值 关联知识 1 核心经营性资产（如IP、数据、品牌） 行业：人工智能 产品：工业视觉检…...
AB包相关知识
Lua与AB包/Addressables以及YooAsset 摘自千问： Lua 是菜谱（逻辑）：决定了菜怎么做，味道如何。因为你需要随时换菜谱（热更新），所以菜谱不能死板地印在墙上（编译进主包&a…...
Windows Cleaner如何5步解决C盘爆红问题？完全指南助你释放宝贵空间
Windows Cleaner如何5步解决C盘爆红问题？完全指南助你释放宝贵空间 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服！ 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否曾经面对C盘爆红的警告束手无…...
Playwright文件上传避坑指南：遇到动态生成的文件选择框怎么办？
Playwright文件上传避坑指南：动态生成文件选择框的实战解决方案最近在为一个电商平台做自动化测试时，遇到了一个棘手的问题——商品图片上传功能总是失败。页面上的"上传图片"按钮明明可以点击，但传统的set_input_files()方法却毫无…...
UnityExplorer：如何在游戏运行时实时调试和修改Unity项目
UnityExplorer：如何在游戏运行时实时调试和修改Unity项目 【免费下载链接】UnityExplorer An in-game UI for exploring, debugging and modifying IL2CPP and Mono Unity games. 项目地址: https://gitcode.com/gh_mirrors/un/UnityExplorer UnityExplorer是…...
密码学入门：区块链中的密码学原理
密码学入门：区块链中的密码学原理 大家好，我是欧阳瑞（Rich Own）。今天想和大家聊聊密码学这个重要话题。作为一个Web3探索者，密码学是区块链的基础。今天就来分享一下区块链中常用的密码学原理。 为什么密码学很重要&a…...
【Sora 2 HDR生成黄金公式】：曝光补偿系数×动态范围压缩阈值×时域一致性权重＝可商用HDR帧率（附Python验证脚本）
更多请点击： https://codechina.net 第一章：Sora 2 HDR视频生成黄金公式的提出与商业意义 Sora 2 的HDR视频生成能力不再依赖传统多曝光融合或后期调色管线，而是通过一个端到端可微分的物理感知渲染公式实现原生高动态范围建模。该公式被业界…...