HTML CSS JS
关注
分享
扫一扫
文章平均质量分 70
kfepiza
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript的 fetch() 方法 笔记250810
JavaScript 的 方法是现代浏览器提供的用于发起网络请求的 API。它基于 Promise 设计，相比传统的 更简洁强大。以下是核心知识点和示例： 基础语法：请求的目标地址（必需）：配置对象（可选），包含：：请求方法（, , 等），默认为 ：请求头（如 ）：请求体数据（ 时使用，需字符串化）：是否发送 cookies（、 或 ）：跨域模式（、、） 关键特性返回 Promise 对象需解析响应体响应对象 提供多种解析方法：默认不携带 Cookies需显式设置 。原创 2025-08-10 10:49:26 · 681 阅读 · 0 评论 -
JavaScript的Callback回调函数转Promise().then()和async{await} 笔记250810
JavaScript 回调函数转 Promise 和 async/await 指南在 JavaScript 中，回调函数是处理异步操作的传统方式，但随着语言的发展，Promise 和 async/await 提供了更优雅的解决方案。下面我将展示如何将回调函数转换为 Promise 和 async/await 模式。 回调函数的基本模式典型的回调函数模式（Node.js 错误优先风格）： 转换为 Promise 1. 手动包装为 Promise 2. 使用 util.promisify（N原创 2025-08-10 08:06:16 · 857 阅读 · 0 评论 -
JavaScript异步编程: 回调callback , Promise,then,catch,finally , async,await 笔记250810
JavaScript 异步编程全面解析：回调、Promise、async/await 一、异步编程基础 为什么需要异步？ 同步 vs 异步 二、回调函数（Callback） 基本模式 回调地狱问题 解决方案 三、Promise 核心机制 创建 Promise Promise 状态机resolve()reject()PendingFulfilledRejected .then() - 处理成功/失败 .catch() - 错误原创 2025-08-10 07:12:11 · 618 阅读 · 0 评论 -
JavaScript异步,笔记250810
JavaScript 异步编程全面解析 一、异步编程基础 为什么需要异步编程？JavaScript 是单线程语言，异步操作可以防止阻塞主线程： 事件循环机制JavaScript 引擎通过事件循环处理异步操作：是否调用栈调用栈为空?事件队列取第一个任务执行任务 二、异步解决方案演进 1. 回调函数（Callback）回调地狱问题： 2. Promise（ES6） 3. async/await（ES2017） 三、Promise 深度解析 Prom原创 2025-08-10 05:40:17 · 605 阅读 · 0 评论 -
JavaScript的 Promise,then,catch,finally,async,await 笔记250810
JavaScript 异步编程全面指南：Promise 与 async/await 一、Promise 核心概念Promise 是 JavaScript 处理异步操作的基础，它表示一个异步操作的最终完成（或失败）及其结果值。 基本结构 三种状态resolve()reject()PendingFulfilledRejected 二、Promise 链式方法 1. .then() - 处理成功状态 2. .catch() - 处理错误 3. .final原创 2025-08-10 04:22:56 · 1022 阅读 · 0 评论 -
Promise,then 与 async,await 相互转换 笔记250810
在 JavaScript 中， 和 是处理异步操作的两种方式，本质都是基于 Promise。以下是它们相互转换的规则和示例： 1. Promise.then() → async/await 转换 核心规则： 示例： 2. async/await → Promise.then() 转换 核心规则： 示例： 关键注意点错误处理：返回值：并行请求优化：链式中断： 转换对照表掌握这些转换技巧能帮助你在不同场景灵活选择更清晰的异步代码风格。原创 2025-08-10 03:07:50 · 651 阅读 · 0 评论 -
JavaScript的 async , await 笔记250808
JavaScript 异步编程：async/await 深度解析 和 由 ES2017 引入, 是 的语法糖 等价于 👆等价于👇在现代 JavaScript 开发中， 是处理异步操作的核心语法，由 ES2017 引入, 是 的语法糖, 它让异步代码拥有同步代码的可读性和可维护性。 核心概念 async 函数 await 表达式 错误处理机制 try/catch 模式async/await 可以使用同步的错误处理方式： 错误传播特性未处理的错误会向外层原创 2025-08-09 07:35:02 · 702 阅读 · 0 评论 -
Promise的reject处理: then的第二个回调 与 catch回调 笔记250804
Promise 错误处理深度解析：then 的第二个回调 vs catch在 JavaScript 的 Promise 链式调用中，错误处理有两种主要方式： 的第二个回调函数和 方法。这两种方法虽然都用于处理错误，但在行为和应用场景上存在重要区别。 核心概念对比 .then() 的第二个回调 .catch() 方法 关键区别分析 1. 错误捕获范围示例说明： 2. 错误处理后的链行为两种方法处理后都会返回一个新的 resolved Promise，允许链继续执行：原创 2025-08-04 07:28:04 · 929 阅读 · 0 评论 -
Promise().then().catch().finally() 笔记250804
Promise 是 JavaScript 异步编程的核心，其链式调用方法 、 和 提供了强大的异步控制能力。我将全面解析这些方法的工作原理、使用场景和最佳实践。 核心方法概述 完整语法结构 方法详解 1. .then() - 处理异步结果特点： 2. .catch() - 错误处理特点： 3. .finally() - 最终清理特点： 完整工作流程fulfilledrejectedPromise 创建状态执行 .then 第一个回调执行 .then 第二个回调或原创 2025-08-04 06:13:19 · 721 阅读 · 0 评论 -
JavaScript的 Promise,then 笔记250803
例一:例一代码:例一结果输出:例一讲解从例一看出:例二:例二代码: 与 例一 的唯一区别是调换了 和 的执行顺序例二结果输出:例二讲解从例二看出:例三:例三代码: 与 例二 的唯一区别是注释了的第二个函数参数(只用一个参数),留给例三结果输出:例三讲解从例三看出: 什么是 Promise？Promise 是 JavaScript 中处理异步操作的核心机制，它代表一个异步操作的最终完成（或失败）及其结果值。Promise 提供了一种更优雅的方式来处理异步操作，避免了传统的回调地狱问题。原创 2025-08-04 03:44:05 · 1019 阅读 · 0 评论 -
JavaScript将String转为base64 笔记250802
在 JavaScript 中将字符串转换为 Base64 编码有多种方法，每种方法都有其适用场景。下面我将全面介绍这些方法，包括处理 ASCII 字符、Unicode 字符以及性能优化方案。局限性Unicode 字符串处理方法方法 1：使用 TextEncoder（现代浏览器）方法 2：使用 encodeURIComponent（兼容方案）Node.js 环境专用方法使用 Buffer高级用法与性能优化1. 流式处理（大文本）2. Base64 URL 安全编码3. 性能比较原创 2025-08-02 21:15:59 · 609 阅读 · 0 评论 -
如何在`＜link type=“icon“ href=`的`href`中写SVG并使用path标签? 笔记250802
在 标签的 属性中使用 SVG 标签作为网站图标，可以通过 Data URL 内联 SVG 实现。以下是详细方法和完整示例： 核心方法：使用 Data URL 内联 SVG 完整示例代码 关键步骤详解构建 SVG 结构：URL 编码规则（必须转换的特殊字符）：处理 的 属性：使用在线工具自动编码：SVG 压缩工具添加动态样式（深色模式适配）： 实时生成工具（JavaScript 方法） 推荐工作流设计 SVG 图标：优化代码：原创 2025-08-02 19:08:50 · 877 阅读 · 0 评论 -
浏览器(Browser) WebSql 学习笔记
WebSql 学习笔记 前言三个主要函数 : openDatabase , transaction , executeSqlopenDatabase(数据库名, 版本号, 数据库描述, 数据大小(字节), 回调函数可选)transactionexecuteSql(sql语句 , [替代问号的数组] , 成功回调 , 失败回调)执行成功后的回调的第二个参数 SQLResultSet 查询时必须用到完整示例1前言当前除火狐以外, 基本都支持WebSqlWebSql不是Html5标准三个主要函数 :原创 2022-04-22 12:18:51 · 1803 阅读 · 0 评论 -
Chromium内核的浏览器Browsers查看Chromium的版本 : navigator.userAgent
不光Chromium内核的浏览器, 包括火狐Firefox,和已过时的IE等几乎所有主要浏览器都支持。userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。User-Agent 的约定格式是：应用名，跟一个斜线，跟版本号，剩下的是自由的格式。包含有关浏览器的信息。原创 2022-09-26 10:22:54 · 3287 阅读 · 0 评论 -
CSSStyleDeclaration 的 parentRule 笔记
目录测试代码结果截图心得测试代码<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>parentRule</title><style>#Div010{width:1200px; height:1000px; }#Div010{background-color:#ff6fff;}</style><scrip原创 2021-05-01 22:11:10 · 232 阅读 · 0 评论 -
浏览器Browser的WebSQL文件位置
浏览器Browser的WebSQL文件位置格式为Sqlite, 没有后缀名Chrome360极速浏览器XQQ浏览器Opera欧鹏格式为Sqlite, 没有后缀名ChromeC:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\databases例如👇 (没有后缀名)C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\databases\file__0\1360原创 2022-04-19 01:03:09 · 1261 阅读 · 0 评论 -
JavaScript 全局this globalThis 笔记
测试代码<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>全局引用globalThis</title><style>table {border-collapse:collapse; table-layout:fixed; width:33%; border:1px solid #999aaa;}td{border:1px s原创 2021-04-24 20:43:02 · 484 阅读 · 0 评论 -
浏览器 JavaScript 上传文件 笔记
文章目录前言用 FormData用 FileReaderreadAsDataURL()示例:2总结前言使用html的 form submit 会跳转<form id="Form001" method="post" enctype="multipart/form-data" action="url"> <input id="File001" type="file" name="file1" /> <input type="submit"/></form&原创 2021-04-23 20:18:44 · 357 阅读 · 0 评论 -
JavaScript 判断是否是数字 isFinite() Number.isFinite()
文章目录前言检验代码结果总结前言isNaN() 判断不是数字isFinite() 判断是数字isFinite() 有两个方法 : isFinite() 和 Number.isFinite()检验代码<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"/><title>Infinity isFinite() Number.isFinite()</titl原创 2021-04-09 23:13:11 · 754 阅读 · 0 评论 -
js的 encodeURI() encodeURIComponent() decodeURI() decodeURIComponent() 笔记250205
和。它们分别用于不同的场景，具体区别和用法如下：：编码完整的URI，保留保留字符（如:/?#@等），仅对非保留字符进行编码。：编码整个URL，确保URI结构不被破坏。://?张三：编码URI的组成部分（如查询参数），对所有非标准字符（包括保留字符）进行编码。：编码URI的某部分（如参数值），防止特殊字符破坏URI结构。%3D%26：解码由编码的URI，仅还原非保留字符的编码，保留保留字符的编码。%20%25?：解码由编码的字符串，还原所有字符的编码（包括保留字符）。原创 2025-02-05 06:57:01 · 2827 阅读 · 0 评论 -
text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thickness
CSS 简写属性设置文本上的装饰性线条的外观。它是和较新的属性的缩写。原创 2024-06-23 04:35:46 · 1417 阅读 · 0 评论 -
CSS的 text-decoration
CSS 简写属性设置文本上的装饰性线条的外观。它是和较新的属性的缩写。原创 2024-06-23 04:29:52 · 1159 阅读 · 0 评论 -
Html去除a标签的默认样式
Html去除a标签的默认样式,a标签超链接字体默认蓝色带下划线;测试代码原创 2024-06-23 04:23:12 · 2598 阅读 · 0 评论 -
place-content place-items 试验2406221223
原创 2024-06-22 13:11:45 · 136 阅读 · 0 评论 -
IndexedDB的ObjectStore的add和put方法有什么不同
IndexedDB的ObjectStore的add和put方法有什么不同?IndexedDB的ObjectStore的add和put方法的主要区别在于它们处理主键冲突的方式和返回值的类型。addaddputputaddIDBRequestputIDBRequestadd总的来说，选择使用add还是put方法取决于你的具体需求。如果你需要确保数据的主键唯一性，并且不希望更新已存在的数据，那么应使用add方法。如果你需要能够更新已存在的数据，或者添加新的数据（无论主键是否存在），那么应使用put方法。原创 2024-03-27 10:13:48 · 1202 阅读 · 0 评论 -
css与鼠标光标指针相关的属性有哪些?
cursor设置鼠标光标的样式。:hover伪类选择器：用于选取鼠标悬停在元素上时的样式。可以通过:hover伪类选择器来设置鼠标悬停时的样式。:active伪类选择器：用于选取鼠标点击元素时的样式。可以通过:active伪类选择器来设置鼠标点击时的样式。:focus伪类选择器：用于选取具有焦点的元素。可以通过:focus伪类选择器来设置具有焦点时的样式。属性：控制元素是否响应鼠标事件。属性：控制用户是否可以选择元素的内容。cursor。原创 2024-03-21 00:33:28 · 2679 阅读 · 0 评论 -
css禁用元素指针事件,鼠标穿透,点击下层元素,用`pointer-events:none；`
属性用于控制HTML元素如何响应鼠标和触摸事件，如点击、悬停等。这个属性决定了在何种情况下元素能够成为鼠标或触摸事件的目标。属性为开发者提供了灵活的方式来控制元素与鼠标和触摸事件的交互，从而可以创建出更丰富、更有趣的用户体验。属性是一个可继承属性，这意味着如果父元素设置了该属性，而子元素没有设置，那么子元素将继承父元素的。属性有多种可能的值，但其中两个最常用的值是。例如，你可以使用以下CSS代码来设置元素的。比如 button按钮 上面有个元素挡着。鼠标穿透,使鼠标事件无效。原创 2024-03-21 00:31:18 · 2072 阅读 · 0 评论 -
Js的 Promise的 then catch 笔记240222
上面代码中,f的标准名叫做resolve, 所以应该写成实际上Promise和then都可以有两个参数,resolve和虽然Promise中的resolve和reject都会执行,但then参中的resolve和reject只会执行其中一个, 前面的执行了,后面就不执行了,将resolve和reject调换位置测试可以将resolve和reject分别写到中这样正常执行resolve, 异常执行reject .但如果在then块中抛异常了怎么办呢?可以写到catch函数中, 注意是catch。原创 2024-02-22 11:16:49 · 1066 阅读 · 0 评论 -
js如何抛异常,抛自定义的异常
最简单的自定义异常来自chrome123的控制台的测试（匿名） @ VM209:1undefined示例1try{ throw "异常" } catch(e){ console.log(e);try{ throw new Error("自定义异常名") } catch(e){ console.log(e);try{ throw {n:"Object", v:"抛对象"} } catch(e){ console.log(e);原创 2024-02-22 05:49:37 · 891 阅读 · 0 评论 -
CSS的全局值 initial inherit revert overlay unset
在CSS中，全局值是一组特殊的值，可以应用于大多数的CSS属性，用于改变这些属性的默认值、继承行为或重置为浏览器的默认样式。不过，需要注意的是，使用这些关键字时，请务必检查它们的浏览器兼容性和预期的行为，因为CSS的规范可能会随着时间而更新，而浏览器的支持情况也会有所不同。是特殊的值，它们可以应用于大多数CSS属性，以改变属性值的继承、重置或层叠行为。使用这些全局值时，重要的是要理解它们的行为，并检查你的目标浏览器是否支持这些值。，因为它是一个相对较新的关键字，可能不是所有浏览器都支持。原创 2024-02-20 00:34:37 · 689 阅读 · 0 评论 -
css3的var()函数
需要注意的是，自定义属性的名称是区分大小写的，并且在引用时必须使用与定义时完全相同的名称。这个函数提供了一种强大的方式来创建可重用和可维护的样式，尤其是在大型项目中，当需要在多个地方使用相同的值时。CSS 变量的一个强大之处是它们可以动态更新，这意味着当变量的值改变时，所有使用该变量的样式都会自动更新。它允许你在样式表中定义可重用的值，并在多个地方引用它们，从而使你的CSS更加灵活和可维护。这些例子展示了如何在CSS样式中定义和使用自定义变量，并通过var()函数引用这些变量的值。这通常是通过修改元素的。原创 2024-02-19 08:38:23 · 4405 阅读 · 0 评论 -
CSS的伪类选择器:nth-child()
第一个匹配的元素是 0 [=5x0]，但由于元素的索引是从 1 开始的而 n 从 0 开始，所以不会匹配任何元素。是一个非常强大的工具，它允许你根据元素在其父元素中的位置（序数）来选择特定的子元素。表示第 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4]……表示第七个及其之后的元素：7 [=0+7]、8 [=1+7]、9 [=2+7]，等等。表示兄弟元素列表中的第 8 到第 15 个，且为 元素的元素。原创 2024-02-18 00:11:54 · 4104 阅读 · 0 评论 -
CSS的伪类选择器:nth-child()的用法示例
第一个匹配的元素是 0 [=5x0]，但由于元素的索引是从 1 开始的而 n 从 0 开始，所以不会匹配任何元素。表示第 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4]……表示兄弟元素列表中的每个 元素。这与简单的 p 选择器选择的元素相同（尽管具有更高的优先级）。表示第七个及其之后的元素：7 [=0+7]、8 [=1+7]、9 [=2+7]，等等。表示兄弟元素列表中的第 8 到第 15 个，且为 元素的元素。表示第 7 个元素。原创 2024-02-17 21:21:37 · 1569 阅读 · 0 评论 -
CSS的注释:以“ /* ”开头，以“ */ ”结尾
**//*原创 2024-02-17 16:05:50 · 726 阅读 · 0 评论 -
CSS background-size
将使背景图片缩放至最大尺寸，同时保持其原始的宽高比，以确保图片完全适应容器元素。这个例子将一个名为image.jpg的背景图片应用到一个div元素上，并使用contain属性值来缩小图片以适应div元素的尺寸。：这些值分别将属性设置为其初始值或从父元素继承值，但它们在实际使用中较少见，因为通常你会想要明确指定背景图片的大小。contain：将背景图片缩小以适应元素的尺寸，同时保持图片的长宽比。如果容器元素的宽高比与图片的宽高比不同，图片将被裁剪以适应容器。百分比是相对于容器元素的宽度和高度的。原创 2024-02-17 05:20:03 · 1248 阅读 · 0 评论 -
CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；
background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);原创 2024-02-17 03:44:31 · 11213 阅读 · 1 评论 -
Html的＜figure＞＜figcaption＞标签
标签用于包含独立的内容，这些内容应该与页面的主要内容分开，但仍然与页面有关。元素表示一段自包含的内容，通常与主内容相关，但也可以独立存在。标签通常一起使用，用于表示页面中的独立内容，如图片、图表、代码块等，以及为这些内容提供说明或标题。标签通常一起使用，用于对图像、图表、照片、代码块等进行分组，并为这些元素提供描述或标题。标签的内容以较小的字体显示，并将其与主要内容稍微区分开来，以便用户可以轻松地识别它。标签中，因此它们被视为一个独立的单元，与页面的其他内容分开。标签一起使用，以提供对内容的描述或解释。原创 2024-02-17 01:27:55 · 1831 阅读 · 0 评论 -
css3的calc()
了解一个英语单词，首先要看它在词典中的定义。我们来看一下calculate和compute在剑桥词典中的定义是什么：从上面的定义来看，calculate和compute都是计算某个事物的数量、总量，不过从方法来看，calculate没有限定是用什么方法，但compute往往是用机器得到结果。但是在方法这个层面也不是一定的，所以在大多数情况下，二者都可以互换。比如，下面的几个例子中calculate和compute可以互换：原创 2024-02-17 00:09:36 · 1095 阅读 · 0 评论 -
echarts的title标题属性
left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …图形阴影的模糊大小。原创 2024-02-10 02:29:17 · 4655 阅读 · 0 评论 -
Js的String的replace(和replaceAll(
相同点不同点比如给字符串"abcdaabcdefgabcaabcdefg"中符合/aa/规则的内容加括号以下代码等效也可以使用函数方式原创 2024-01-05 01:29:35 · 1086 阅读 · 0 评论