当前位置：首页 > news >正文

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

news 2026/2/9 22:23:48

<!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…...

编程日记 2024/9/8 9:17:31

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 "…...

编程日记 2024/9/8 9:15:29

Splasthop 安全远程访问帮助企业对抗 Cobalt Strike 载荷网络攻击

一、背景根据 FreeBuf（标题为：潜藏系统2个月未被发现，新型网络攻击瞄准中国高价值目标）和 The Hacker News（标题为：New Cyberattack Targets Chinese-Speaking Businesses with Cobalt Strike Payloads&a…...

编程日记 2024/9/8 9:13:27

Rust：Restful API 服务程序开发详述

0. 关于异步程序设计 0.1 对异步机制的理解运行效率对于后端程序来讲很重要。我曾经以为，多线程机制是后端设计的终极方法，后来才发现，异步机制才是榨干 CPU 运行效率资源的关键所在。我最初对于异步程序设计有误解，以为多线…...

编程日记 2024/9/8 9:11:25

《Cloud Native Data Center Networking》（云原生数据中心网络设计）读书笔记 -- 09部署OSPF

本章的目的是帮助网络工程师确定网络的理想 OSPF 配置。本章将回答以下问题应何时在数据中使用OSPF ?配置 OSPF 的关键设计原则是什么?OSPFv2 和 OSPFv3 之间有什么区别，应如何使用?如何在路由协议栈中配置 OSPF ?如何在服务器上配置 OSPF，例如为容…...

编程日记 2024/9/8 9:10:21

【Visual Studio 报错】未加载 wntdll.pdb（一种可行的解决办法）

调试程序时，会出现下面这个报错分析原因： 出现未加载 wntdll.pdb 报错大概率是你的指针使用错误 ，比如使用野指针、越界访问、或者堆区空间释放方式错误等。这里以堆区空间释放方式错误为例子 1、堆区开辟的数组空间使用 delete 释放 …...

编程日记 2024/9/8 9:08:19

[题目通道](血色先锋队 - 洛谷) #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(…...

编程日记 2024/9/8 9:05:13

HarmonyOS】ArkTS学习之基于TextTimer的简易计时器的elapsedTime最小时间单位问题

本文旨在纪录自己对TextTimer使用过程的疑惑问题我在查看教程时候，发现很多博客在onTimer(event: (utc: number, elapsedTime: number) > void) 这里提到elapsedTime：计时器经过的时间，单位为毫秒。我不清楚是否为版本问题。在我查看ver…...

编程日记 2024/9/8 9:04:12

函数指针学习

认识函数指针： 函数指针的用处： 回调函数（以函数指针为参数的参数） 定义带标签的结构体 typedef struct mode { int data; } Node; 标签（mode）: mode 是结构体的标签名。在这种定义中，mo…...

编程日记 2024/9/8 9:00:05

『功能项目』武器的切换实例【34】

本章项目成果展示我们打开上一篇33战士的A键连击的项目， 本章要做的事情是按键盘E键切换职业时切换手中的武器首先在资源商店下载免费的武器模型创建一个空物体命名为WeaponPos 将武器预制体拖拽至WeaponPos （注意调整空物体位置就可以后续文章会更…...

编程日记 2024/9/8 8:59:03

github中action作用和讲解

1，简介 GitHub Actions 是 GitHub 的一个自动化功能，它允许你在 GitHub 仓库中自动执行软件开发工作流程。你可以使用 GitHub Actions 来执行各种任务，比如： 自动测试：每当代码被推送到仓库时，自动运行测试…...

编程日记 2024/9/8 8:58:02

数据库管理-第238期 23ai：全球分布式数据库-架构与组件（20240904）

数据库管理238期 2024-09-04 数据库管理-第238期 23ai：全球分布式数据库-架构与组件（20240904）1 架构图2 分片数据库与分片3 Shard Catalog4 Shard Director5 Global Service6 管理界面总结数据库管理-第238期 23ai：全球分布式数…...

编程日记 2024/9/8 8:57:01

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…...

编程日记 2024/9/8 8:54:52

React 全屏问题解决方案

1、全屏下弹窗被遮挡的问题参考：https://www.jianshu.com/p/b22d1ad9533e 原因： 需要全屏的节点部分被传入 screenfull 中，弹窗的层级永远低于全屏，所以被遮挡。解决方法： 方式1：把整个 body 全屏&…...

编程日记 2024/9/8 8:51:48

Java JVM 垃圾回收算法详解

Java 虚拟机（JVM）是运行 Java 应用程序的核心，它的垃圾回收（Garbage Collection, GC）机制是 JVM 中非常重要的一个部分。垃圾回收的主要任务是自动管理内存，回收那些不再被使用的对象，从而释放内…...

编程日记 2024/9/8 8:44:37

hadoop dfs web页面访问增加鉴权

前言装好了Hadoop，通过浏览器访问，发现竟然不需要鉴权就能访问，且暴露了很多服务器层文件路径信息，基于多年积累的安全意识，必须得配置些鉴权信息，就有了该文，仅做学习记录，下次自…...

编程日记 2024/9/8 8:43:36

LCP 485. 最大连续 1 的个数[lleetcode -11]

从今天起，我们的算法开始研究搜索，首先就是DFS深度优先搜索（depth-first seach，DFS）在搜索到一个新的节点时，立即对该新节点进行遍历；因此遍历需要用先入后出的栈来实现，也可以通过…...

编程日记 2024/9/8 8:41:34

关于宏任务的说法已经过时

关于宏任务w3c的最新解释，（mdn已经搜不到宏任务队列） ● 每个任务都有一个任务类型，用一个类型的任务必须在一个队列，不同类型的任务可以分属不同的队列。在一次事件循环当中，浏览器可以根据实际情况从不同…...

编程日记 2024/9/8 8:38:31

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…...

编程日记 2024/9/8 8:35:28

QT如何判断一个文件是否存在

在Qt中，判断一个文件是否存在是一个常见的操作，可以通过QFile类和QDir类来实现。不过，对于简单的文件存在性检查，QFile类提供的接口更为直接。下面是一个使用QFile类来判断文件是否存在的例子： #include <QFile>…...

编程日记 2024/9/8 8:33:26

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2026/1/15 4:39:38