第10次修改了可删除可持久保存的前端html备忘录

第10次修改了可删除可持久保存的前端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>* {/* 外边距: 上右下左 */margin: 0px 0px 0px 0px;/* 内边距: 上右下左 */padding: 0 0 0 0;/* 文本颜色 */color: #fff;}body {  background: #cfd1e1;/* 文本缩进 */text-indent: 5em;/* background: linear-gradient(0.25turn, #f7d6d6, #cacf80ac, #b7efea82); *//* background-image: url("file:///D:/%E5%9B%BE%E7%89%87/yyds.jpg");background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%; */}/* ********************背景颜色区**************************************** *//* 3D立体文本的样式 */dfn {text-shadow: 0px 1px 0px #999,0px 2px 0px #888,0px 3px 0px #777,0px 4px 0px #666,0px 5px 0px #555,0px 6px 0px #444,0px 7px 0px #333,0px 8px 7px #001135}/* 3D背景的样式 */.down-div,.finish,input,sub,button {background-image: linear-gradient(to top left,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0));box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);text-shadow: 1px 1px 1px #100000;border: 0;line-height: 30px;padding: 0 10px;border-radius: 10px;}/* 按钮凹进去的样式 */button:active,input:active {box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}/* 背景颜色 */.up-button,sub,.updiv {background-color: #59f43aec;}button {background-color: #f4770a;}input {background-color: #f6d607;}input:hover,button:hover,.up-button3 {background-color: #ff0000fb;}.down-div {background-color: rgba(51, 154, 25, 0.502);}/* 鼠标变小手 */input,button {cursor: pointer;}/* ***********************h1-div区************************************* */.h-div {h1,p {display: inline;color: #000000;}}/* **********************up-div区************************************** */.up-div {/* 圆角 */border-radius: 10px;.up-button+input {width: 150px;};textarea {/* 文本对齐 居中*/text-align: center;/* 字体大小 */color: rgb(0, 0, 0);&::placeholder {color: rgb(248, 0, 0);/* 文本间隔 */}}}/* ***********************down-div************************************* *//* -设置checkbox样式----*/input[type="checkbox"] {-webkit-appearance: none;appearance: none;width: 25px;height: 25px;position: relative;margin-right: 10px;border-radius: 50%;}input[type="checkbox"]::after {content: "";width: 100%;height: 100%;border: 2px solid #f10505;position: absolute;left: -3px;top: -3px;border-radius: 50%;}/* 设置checkbox点击之后的样式*/input[type="checkbox"]:checked::after {height: 15px;width: 25px;border-top: none;border-right: none;border-radius: 0;transform: rotate(-45deg);transition: all 0.5s ease-in-out;}/* 选中文本样式 */.finish {/* text-decoration: line-through; */background: #000000;}</style>
</head>
<body><div class="h-div"><h1>备忘录<dfn>(memorandum)</dfn></h1><p><sub>&lt;a href="输入网站地址" target="_blank"&gt;输入网站名称&lt;/a&gt;</sub></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><input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown"class="background3D" /><button><a href="https://www.baidu.com/s" target="_blank">百度一下</a></button><button id="openButton">打开URL</button><button id="up-button1" class="up-button3">对选择的进行删除</button></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;}/**********************按钮点击事件*****************************/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.id = "lunbo";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>

 

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

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

相关文章

ASTM F2057-23衣物收纳商品安全标准

美国每年均有大量因衣物存放装置翻倒而造成人员伤害甚至死亡的报道。 因此&#xff0c;美国消费品安全委员会CPSC于2023年4月19日发布决定&#xff0c;将ASTM F2057-23作为美国消费品安全委员会的强制性安全标准&#xff0c;替代16 CFR 1261&#xff0c;以此更好保护消费者免受…

关于Linux系统的目录结构介绍常用命令介绍

目录 一. Linux系统目录结构介绍 二. 一些常用命令的介绍 1、# 与 $的区别 2、ifconfig 3、su 4、cd 5、目录查看 6、查看文件内容 7、创建目录及文件 8、复制和移动 9、其他 10、tar 11、which 12、whereis 13、find 14、chmod 三. vim的基本使用 四. SSH密…

QT+C++桌面程序窗体框架模板-中英文切换-文件打开历史记录-工具选项设置

程序示例精选 QTC桌面程序窗体框架模板-中英文切换-文件打开历史记录-工具选项设置 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《QTC桌面程序窗体框架模板-中英文切换-文件打开历史记录-…

认识数学建模

文章目录 1 什么是数学建模2 数学建模的比赛形式3 参加数学建模的好处4 数学建模的流程5 数学建模成员分工6 数学建模常用软件7 数学建模竞赛7.1 美国大学生数学建模竞赛7.2 MathorCup高校数学建模挑战赛7.3 华中杯大学生数学建模挑战赛7.4 认证杯数学建模网络挑战赛7.5 华东杯…

Web08--JavaScript高级

1、BOM对象 BOM&#xff1a;browser object model 浏览器对象模型 BOM对象包括window对象、screen对象、history对象、location对象、navigator对象。 1.1 window对象 所有的浏览器都支持window对象。它表示的浏览器窗口 window对象是js中的顶层对象&#xff0c;所有的j…

HAL STM32+EC11编码器实现增减调节及单击、双击、长按功能

HAL STM32EC11编码器实现增减调节及单击、双击、长按功能 &#x1f4fa;实现效果演示&#xff1a; &#x1f4d8;内容提要 &#x1f4dd;本文主要实现&#xff0c;通过STM32 HAL库开发&#xff0c;实现的EC11编码器功能&#xff0c;按键结合状态机思想实现的拓展单击、双击、…

Web--HTML基础

文章目录 安装环境HTMLhtml框架html基础标签语义标签html特殊符号 安装环境 安装vscode后 安装插件 可以先不写后台直接将前度界面展示出来 自动补全tag&#xff0c;同时修改tag时自动改另一半 在设置里将保存自动格式化的选项勾上 创建一个index.htm文件&#xff0c;这个…

力扣80、删除有序数组中的重复项Ⅱ(中等)

1 题目描述 图1 题目描述 2 题目解读 对于有序数组nums&#xff0c;要求在不使用额外数组空间的条件下&#xff0c;删除数组nums中重复出现的元素&#xff0c;使得nums中出现次数超过两次的元素只出现两次。返回删除后数组的新长度。 3 解法一&#xff1a;双指针 双指针法可以…

防御第三次作业-防火墙组网实验(3)

目录 实验拓扑图 要求 1 2 针对10.0.2.10设备的安全策略&#xff1a; 针对10.0.2.20设备的安全策略&#xff1a; 3 4 实验拓扑图 各设备ip和接口已配好&#xff0c;均可可ping通防火墙。 要求 1.生产区在工作时间内可以访问dmz区域&#xff0c;仅可以访问http服…

Kali如何启动SSH服务并实现无公网ip环境远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh 远程连接kali! …

最佳的reCAPTCHA v3验证码解析器,使用API或扩展自动解析reCAPTCHA v3

在在线安全领域&#xff0c;reCAPTCHA v3作为一种重要工具&#xff0c;用于保护网站免受自动机器人和恶意活动的侵害。在本文中&#xff0c;我们探讨了Capsolver的能力&#xff0c;这是征服reCAPTCHA v3挑战的终极解决方案。凭借其先进的功能&#xff0c;包括API集成和多功能的…

AI新工具(20240124) ComfyUI-InstantID-ComfyUI下的非官方InstantID实现;Lumiere是由谷歌时空扩散模型

ComfyUI-InstantID-ComfyUI下的非官方InstantID实现 ComfyUI InstantID是对InstantID的非官方实现&#xff0c;支持本地和huggingface hub模型&#xff0c;同时支持通用styler。它包括基础模型加载、InsightFace模型加载、ID ControlNet模型加载、Ipadapter_instantid模型加载…

【ProtoBuf】使用指南

一.什么是ProtoBuf 特点&#xff1a;ProtoBuf是用于序列化和反序列化的一种方法&#xff0c;类似xml和json&#xff0c;但是效率更高&#xff0c;体积更小。ProtoBuf具有语⾔⽆关、平台⽆关&#xff0c;扩展性、兼容性好等特点。 ProtoBuf是需要依赖通过编译生成的头文件和源…

1.25学习总结

今天学习了二叉树&#xff0c;了解了二叉树的创建和遍历的过程 今天所了解的遍历过程主要分为三种&#xff0c;前序中序和后序&#xff0c;都是DFS的想法 前序遍历&#xff1a;先输出在遍历左节点和右节点&#xff08;输出->左->右&#xff09; 中序遍历&#xff1a;先…

华为云磁盘性能指标(参考)

MD[华为云磁盘性能指标(参考)] 云硬盘&#xff08;Elastic Volume Service, EVS&#xff09; 根据性能&#xff0c;磁盘可分为极速型SSD V2、极速型SSD、通用型SSD V2、超高IO、通用型SSD、高IO、普通IO。 性能指标(参考)&#xff0c;测速说明&#xff1a;操作系统-windows …

如何配置Tomcat服务环境并实现无公网ip访问本地站点

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…

conda环境下使用youtube_dl模块下载youtube视频异常解决方法

1 问题描述 使用python的youtube_dl模块下载youtube视频时失败&#xff0c;错误信息如下&#xff1a; ERROR: Unable to extract uploader id; please report this issue on https://yt-dl.org/bug . Make sure you are using the latest version; see https://yt-dl.org/up…

jquery练习

jquery练习 1.多图片展示 <!doctype html> <html> <head> <meta charset"utf-8"> <title>多图片展示效果</title> <link href"zns_style.css" rel"stylesheet" type"text/css" /> <sc…

从 Apk 提取代码到单独 dex

从 Apk 提取代码到单独 dex Android 中动态加载是指应用程序在运行时加载和执行 Dex 文件的过程&#xff0c;可以在运行时加载不同的代码或功能&#xff0c;而无需重新编译整个应用程序&#xff0c;动态加载 Dex 文件通常涉及以下步骤&#xff1a; 创建 Dex 文件 我们接触到的…

Redis的五种常用数据类型详解及相关面试问题

目录 Redis的五种常用数据类型详解 简述 Redis五种基本数据类型 String字符串 常用命令 应用场景 Hash散列表 常用命令 使用场景 List链表 常用命令 应用场景 Set( 集合) 常用命令 应用场景 SortedSet( 有序集合) zset 常用命令介绍 应用场景 面试题常问的数…