第11次修改了可删除可持久保存的前端html备忘录:将样式分离,可以自由秒添加秒删除样式
第11次修改了可删除可持久保存的前端html备忘录:将样式分离,可以自由秒添加秒删除样式


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>与妖为邻的备忘录</title><style>.finish{/* 删除线 text-decoration: line-through; */background: #000000;color:rgb(253, 250, 250); }</style>
</head>
<body><div class="h-div"><h1>备忘录<dfn>(memorandum)</dfn></h1><p></p></div><div class="up-div"><textarea class="up-textarea" name="uptextarea" rows="2" cols="30%"placeholder="请选择txt、js、css或html文件,文件内容会被自动读取"></textarea><button type="text" class="up-button">添加</button><button id="up-button1" class="up-button3">对选择的进行删除</button><sub><a href="输入网站地址" target="_blank">输入网站名称</a></sub><button><a href="https://www.baidu.com/s" target="_blank">百度一下</a></button><button id="openButton">打开URL</button><input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown"class="background3D" /></div></div><hr><div class="down-div"></div><script>var uptext = document.querySelector(".up-textarea");var addto = document.querySelector(".up-button");var text = document.querySelector(".down-div");/*************添加事件*****************/addto.onclick = function () {inserhtml(uptext.value, '');// 添加后清空输入框uptext.value = '';// 焦点放回输入框uptext.focus();savetodo();}/*************savetodo函数****************/var savetodo = function () {let todoarr = [];let todojs = {};var econtent = document.querySelectorAll('.content');for (let index = 0; index < econtent.length; index++) {todojs.name = econtent[index].innerHTML;todojs.finish = econtent[index].classList.contains('finish');todoarr.push(todojs);todojs = {};}save(todoarr);}var loadtodo = function () {let todoarr = load();for (let index = 0; index < todoarr.length; index++) {inserhtml(todoarr[index].name, todoarr[index].finish ? 'finish' : '');}}/**********************本地持久储存(localStorage)函数*****************************/var save = function (arr) {/**JSON.stringify(arr) 先将数组转换为字符串 *localStorage.todos 然后将字符串保存到本地的todos中*/localStorage.todos = JSON.stringify(arr);}/***读取函数,把todos转成数组*然后返回数组*/var load = function (arr) {var arr = JSON.parse(localStorage.todos);return arr;}/**********************finish样式函数*****************************//**********************按钮点击事件*****************************/text.onclick = function () {var tg = event.target;// 获取父元素下的所有子元素var tgkids = tg.parentElement.children;/*******************************对复选框的点击事件******************************/if (tgkids[0].checked) {tgkids[1].classList.add("finish");}else {tgkids[1].classList.remove("finish");}// 保存更改的样式savetodo();/*******************************对选择的进行删除********************************************/var Select = document.getElementById("up-button1");Select.onclick = function () {if (confirm("是否删除所选?")) {var check = document.getElementsByName("checkbox");for (var i = 0; i < check.length; i++) {if (check[i].checked) {check[i].parentElement.remove();i--;// 删除后保存savetodo();}}}}}var inserhtml = function (val, cls) {text.insertAdjacentHTML("beforeend",`<div><input type="checkbox" name='checkbox'> <span class='content ${cls}'>${val}</span> </div>`)}loadtodo();/*****************************提示弹窗无需点击的函数**********************************************/function displayAlert(type, data, time) {var a = document.createElement("div");if (type == "success") {a.style.width = "200px";a.style.backgroundColor = "#009900";} else if (type == "error") {a.style.width = "280px";a.style.backgroundColor = "#990000";} else if (type == "info") {a.style.backgroundColor = " #e6b800";a.style.width = "600px";} else {return;}a.style.textAlign = "center";a.style.position = "absolute";a.style.height = "60px";a.style.marginLeft = "-100px";a.style.marginTop = "-30px";a.style.left = "30%";a.style.top = "5%";a.style.color = "white";a.style.fontSize = "25px";a.style.borderRadius = "20px";a.style.textAlign = "center";a.style.lineHeight = "60px";if (document.getElementById("") == null) {document.body.appendChild(a);a.innerHTML = data;setTimeout(function () {document.body.removeChild(a);}, time);}}/**************************打开URL按钮的JavaScript******************************************/// 获取打开URL按钮元素var openBtn = document.getElementById("openButton");// 添加点击事件处理程序openBtn.addEventListener('click', function () {// 获取文件路径// 这里假设您已经有一个函数来获取文件路径,例如 prompt('请输入文件路径', 'D:/前端学习', '_blank');var filePath = prompt("请输入网站地址或者本地文件路径", "D:/备忘录信息");if (filePath) {// 使用window.location对象的assign()方法导航到指定文件// window.location.assign(filePath);// 或者使用window.open()方法打开新窗口导航到指定文件window.open(filePath);} else {displayAlert('info', '未提供有效的文件路径!', 1500);// alert("未提供有效的文件路径!");}});/**************************本地文件读取的函数******************************************/window.onload = function () {var text = document.getElementsByName('uptextarea')[0],inputFile = document.getElementsByName('inputfile')[0];//上传文件inputFile.onchange = function () {console.log(this.files);var reader = new FileReader();reader.readAsText(this.files[0], 'UTF-8');reader.onload = function (e) {// urlData就是对应的文件内容var urlData = this.result;text.value = urlData;};};};</script>
</body>
</html>
相关文章:
第11次修改了可删除可持久保存的前端html备忘录:将样式分离,可以自由秒添加秒删除样式
第11次修改了可删除可持久保存的前端html备忘录:将样式分离,可以自由秒添加秒删除样式 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"…...
hcip高级网络知识
一:计算机间信息传递原理 抽象语言----编码 编码---二进制 二进制---转换为电流(数字信号) 处理和传递数字信号 二:OSI--七层参考模型 ISO--1979 规定计算机系统互联的组织: OSI/RM ---- 开放式系统互联参考模型 --- 1…...
常用电子器件学习——MOS管
MOS管介绍 MOS,是MOSFET的缩写。MOSFET 金属-氧化物半导体场效应晶体管,简称金氧半场效晶体管(Metal-Oxide-Semiconductor Field-Effect Transistor, MOSFET)。 一般是金属(metal)—氧化物(oxide)—半导体(semiconductor)场效应晶…...
System.Data.SqlClient.SqlException:“在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误
目录 背景: 过程: SQL Express的认识: 背景: 正在运行程序的时候,我遇到一个错误提示,错误信息如下,当我将错误信息仔细阅读了一番,信息提示的很明显,错误出现的来源就是连接数据库代码这块string connStr "s…...
数据库(SQL语句:DMLDQL)
目录 有关数据表的DML操作 1.1 INSERT 语句 1.2 REPLACE 语句 replace语句的语法格式(三种) REPLACE 语句 和 INSERT 语句的区别 1.3 DELETE 语句 | | TRUNCATE 语句 DELETE TRUNCATE DROP 1.4 UPDATE 数据 1.5 SELECT 语句 (DQL数…...
AnimatedDrawings:让绘图动起来
老样子,先上图片和官网。这个项目是让绘制的动画图片动起来,还能绑定人体的运动进行行为定制。 快速开始 1. 下载代码并进入文件夹,启动一键安装 git clone https://github.com/facebookresearch/AnimatedDrawings.gitcd AnimatedDrawingspip…...
红黑树浅浅学习
红黑树浅浅学习 红黑树概念红黑树平衡性调整 红黑树概念 二叉树:二叉树是每个节点最多有两个子树的树结构。二叉查找树:又称“二叉搜索树”,左孩子比父节点小,右孩子比父节点大,还有一个特性就是”中序遍历“可以让结…...
QGraphicsView 如何让图形大小适配窗口
1. setSceneRect 做什么用? setSceneRect是一个Qt中的函数,用于设置QGraphicsView中的场景矩形(QRectF)。 QGraphicsView是一个用于显示和编辑图形场景的控件,而setSceneRect函数用于设置场景矩形,即指定…...
sqlmap使用教程(3)-探测注入漏洞
1、探测GET参数 以下为探测DVWA靶场low级别的sql注入,以下提交方式为GET,问号(?)将分隔URL和传输的数据,而参数之间以&相连。--auth-credadmin:password --auth-typebasic (DVWA靶场需要登录…...
期待已久!阿里云容器服务 ACK AI 助手正式上线
作者:行疾 大模型技术的蓬勃发展持续引领 AI 出圈潮流,各行各业都在尝试采用 AI 工具实现智能增效。 2023 年云栖大会上,阿里云容器服务团队正式发布 ACK AI 助手,带来大模型增强智能诊断,帮助企业和开发者降低 K8s …...
[BUG] Authentication Error
前言 给服务器安装了一个todesk,但是远程一直就是,点击用户,进入输入密码界面,还没等输入就自动返回了 解决 服务器是无桌面版本,或者桌面程序死掉了,重新安装就好 sudo apt install xorg sudo apt inst…...
23种设计模式概述
学习设计模式对我们有什么帮助? 1.提高代码质量和可维护性:设计模式是经过验证的解决方案,有助于解决常见的设计问题。使用设计模式可以减少代码冗余,增强代码的可读性和可维护性,并提高代码的可靠性。 2.提升开发效率…...
英文阅读-LinkedIn‘s Tips for Highly Effective Code Review
LinkedIn的CR技巧 LinkedIn团队CodeReview经验与方法,原文来自https://thenewstack.io/linkedin-code-review/ 总结 Do I Understand the “Why”? 在提交pr的同时需要描述本次修改的“动机”,有助于提高代码文档质量。 Am I Giving Positive Feedbac…...
性能优化-高通的Hexagon DSP和NPU
原文来自【 Qualcomm’s Hexagon DSP, and now, NPU 】 本文主要介绍Qualcomm Hexagon DSP和NPU,这些为处理简单大量运算而设计的硬件。 🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:高性能…...
第137期 Oracle的数据生命周期管理(20240123)
数据库管理137期 2024-01-23 第137期 Oracle的数据生命周期管理(20240123)1 ILM2 Heat Map3 ADO4 优点5 对比总结 第137期 Oracle的数据生命周期管理(20240123) 作者:胖头鱼的鱼缸(尹海文) Orac…...
电脑的GPU太强了,pytorch版本跟不上,将cuda驱动进行降级
我的情况: 我买的电脑的GPU版本为rtx4060,但是装上相应的驱动后,cuda的版本为12.3,而现在pytorch中cuda安装命令的最新版本为12.1,所以我将电脑的驱动进行降级为cuda版本为10.1的。 最后成功安装cuda10.1版本的驱动 …...
1 认识微服务
1.认识微服务 随着互联网行业的发展,对服务的要求也越来越高,服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢? 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构:将业务的所有…...
PHP+SOCKET 服务端多进程处理多客户端请求 demo
服务端 $socket socket_create(AF_INET,SOCK_STREAM,SOL_TCP); socket_bind($socket,0,95012) or die( server bind fail: . socket_strerror(socket_last_error())); socket_listen($socket,5);$child 0; //初始化子进程数 while(true){$client socket_accept($socket);$pi…...
Matplotlib笔记:安装Matplotlib+常用绘图
Matplotlib Python的2D绘图库 安装Matplotlib 打开Anaconda Prompt切换环境(默认是base,无需切换)输入命令行安装pip install -i https://pypi.tuna.tsinghua.edu.cn/simple matplotlib3.5.2 绘图 导入import matplotlib.pyplot as plt …...
Confluence6+mysql5.7安装避坑详细记录
目录 一、前言 二、下载与安装 1、版本和安装环境 2、安装数据库 3、配置数据库 4、安装confluence 三、Pj confluence 1、选择语言和产品安装 2、Pj 3、上传mysql驱动 4、重启Confluence服务继续安装 四、Confluence重启卸载方法 重启方法 方法一 方法二 卸载…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像(比如分辨率3000*3000的图像)的办法,尤其是想把内存中的裸数据(只有图像的数据,不包…...
【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...
pgsql:还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决
问题: pgsql数据库通过备份数据库文件进行还原时,如果表中有自增序列,还原后可能会出现重复的序列,此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”,…...
FOPLP vs CoWoS
以下是 FOPLP(Fan-out panel-level packaging 扇出型面板级封装)与 CoWoS(Chip on Wafer on Substrate)两种先进封装技术的详细对比分析,涵盖技术原理、性能、成本、应用场景及市场趋势等维度: 一、技术原…...
虚幻基础:角色旋转
能帮到你的话,就给个赞吧 😘 文章目录 移动组件使用控制器所需旋转:组件 使用 控制器旋转将旋转朝向运动:组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转:必须移动才能旋转,不移动不旋转控制器…...
C++11 constexpr和字面类型:从入门到精通
文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...
