首页
统计
壁纸
Search
1
青龙面板某东短信登录
539 阅读
2
桥接模式下 Openwrt 软路由直接访问光猫后台
534 阅读
3
百度直连
382 阅读
4
京东脚本库
271 阅读
5
cns Network Server
208 阅读
WEB前端
JavaScript
CSS
Linux
Docker
京东脚本
生活随笔
登录
Search
‖任℡か性
累计撰写
23
篇文章
累计收到
0
条评论
首页
分类
WEB前端
JavaScript
CSS
Linux
Docker
京东脚本
生活随笔
页面
统计
壁纸
搜索到
8
篇与
的结果
2025-01-07
电视直播源
(推荐)科技长青:http://yuan.haitangw.net/tv/(推荐)长青聚合多线:https://github.com/skddyj/iptv备用 skddy!:http://yuan.haitangw.net/box/(备用)摸鱼:http://我不是.摸鱼儿.top(备用)饭太硬:http://www.饭太硬.com/tv/(备用)讴歌:http://tv.nxog.top/m/肥猫:http://肥猫.com春莹天下:https://盒子迷.top/春盈天下巧技:http://cdn.qiaoji8.com/tvbox.json王小二:http://tvbox.xn--4kq62z5rby2qupq9ub.top/OK吊炸天:http://ok321.top/tv直播接口:(推荐)科技长青直播:http://yuan.haitangw.net/ZB/PS:最好开启ipv6网络
2025年01月07日
117 阅读
0 评论
0 点赞
2023-07-03
JavaScript编写节流(throttle)和防抖(debounce)函数
节流function throttle(func, delay) { let timerId; return function(...args) { if (!timerId) { timerId = setTimeout(() => { func.apply(this, args); timerId = null; }, delay); } }; } // 使用示例 function handleThrottledScroll() { console.log('Scroll event throttled'); } const throttledScroll = throttle(handleThrottledScroll, 200); window.addEventListener('scroll', throttledScroll);在上述示例中,throttle函数的实现使用了闭包来保存一个定时器ID timerId。当事件触发时,throttle函数会检查定时器ID是否存在。若不存在,则设置一个新的定时器,并在延迟结束后调用传入的函数。这样,事件被触发时,只有在指定的延迟时间过去后,才会执行一次函数。防抖function debounce(func, delay) { let timerId; return function(...args) { clearTimeout(timerId); timerId = setTimeout(() => { func.apply(this, args); }, delay); }; } // 使用示例 function handleDebouncedInput() { console.log('Input debounced'); } const debouncedInput = debounce(handleDebouncedInput, 300); document.getElementById('myInput').addEventListener('input', debouncedInput); 在上述示例中,debounce函数的实现也使用了闭包来保存一个定时器ID timerId。每次调用debounce返回的函数时,它会先清除之前设置的定时器,并重新设置一个新的定时器。只有在指定的延迟时间之后没有再次调用函数,才会执行一次函数。请注意,以上示例只是简单的实现方式,实际应用中可能需要根据具体需求进行适当的修改。
2023年07月03日
145 阅读
0 评论
0 点赞
2023-06-18
JavaScript this指向
在JavaScript中,this指向是动态的,它取决于函数的上下文。this通常指向当前正在执行的函数的主体或调用它的对象。以下是常见的this指向情况:默认情况下,this指向全局对象window。在对象方法中,this通常指向调用该方法的对象。在构造函数中,this指向新创建的对象。在事件处理程序中,this通常指向触发事件的元素。在箭头函数中,this指向外层作用域的this。使用call()、apply()或bind()方法,可以显式地指定this的值。需要注意的是,如果函数被调用时没有明确指定this的值,则默认情况下将使用全局对象window作为其上下文,这可能会导致意外的行为。因此,在编写JavaScript程序时,确保理解this的工作原理,并在需要时正确地设置this的值是非常重要的。以下是几个示例以说明this指向的不同情况:默认情况下,this指向全局对象window:function showThis() { console.log(this); } showThis(); // window在对象方法中,this通常指向调用该方法的对象:const person = { name: "Alice", greet: function() { console.log(`Hello, my name is ${this.name}`); } }; person.greet(); // Hello, my name is Alice在这个例子中,greet方法使用this关键字来引用它所属的person对象。在构造函数中,this指向新创建的对象:function Dog(name, age) { this.name = name; this.age = age; } const myDog = new Dog("Fido", 3); console.log(myDog); // Dog { name: "Fido", age: 3 }在这个例子中,Dog函数作为构造函数使用,使用this关键字来设置新创建的Dog对象的属性。在使用new操作符创建新对象时,函数内部的this会自动指向新对象,从而使得属性赋值操作作用于新对象上。在事件处理程序中,this通常指向触发事件的元素:<button id="my-btn">Click me</button> <script> const btn = document.getElementById("my-btn"); btn.addEventListener("click", function() { console.log(this); // button }); </script>在这个例子中,事件处理程序使用this关键字来引用按钮元素,因为它是触发click事件的元素。在箭头函数中,this指向外层作用域的this:const person = { name: "Alice", greet: function() { const arrowFunc = () => { console.log(`Hello, my name is ${this.name}`); }; arrowFunc(); } }; person.greet(); // Hello, my name is Alice在这个例子中,箭头函数arrowFunc在person对象的greet方法中被调用,但是它的this关键字会自动继承greet方法中的this,所以它会指向person对象。使用call()、apply()或bind()方法,可以显式地指定this的值:const person1 = { name: "Alice" }; const person2 = { name: "Bob" }; function greet() { console.log(`Hello, my name is ${this.name}`); } greet.call(person1); // Hello, my name is Alice greet.call(person2); // Hello, my name is Bob在这个例子中,使用call()方法来调用greet函数,并将person1和person2对象作为参数传递,以明确指定该函数内部的this值。这使得函数的输出分别为“Alice”和“Bob”。以下是更多的示例以说明this指向的不同情况:在回调函数中,this的指向可能会出现问题。例如:const person = { name: "Alice", friends: ["Bob", "Charlie", "Dave"], listFriends: function() { this.friends.forEach(function(friend) { console.log(`${friend} is a friend of ${this.name}`); }); } }; person.listFriends();在这个例子中,listFriends方法中的回调函数中的this的指向会变成全局对象window,这是因为回调函数在全局作用域中被调用。这通常不是我们想要的结果。解决这个问题有多种方式。一种方法是使用箭头函数:const person = { name: "Alice", friends: ["Bob", "Charlie", "Dave"], listFriends: function() { this.friends.forEach((friend) => { console.log(`${friend} is a friend of ${this.name}`); }); } }; person.listFriends();在这个例子中,我们将回调函数变成了箭头函数,这样它可以访问到listFriends方法中的this。这会使函数的输出分别为“Bob is a friend of Alice”、“Charlie is a friend of Alice”和“Dave is a friend of Alice”。在嵌套函数中,也需要注意this的指向问题。例如:const person = { name: "Alice", greet: function() { function sayHello() { console.log(`Hello, my name is ${this.name}`); } sayHello(); } }; person.greet();在这个例子中,内部的sayHello函数中的this指向全局对象window,因为它是在全局作用域中定义的。要解决这个问题,我们可以利用箭头函数:const person = { name: "Alice", greet: function() { const sayHello = () => { console.log(`Hello, my name is ${this.name}`); }; sayHello(); } }; person.greet();在这个例子中,我们使用箭头函数来定义sayHello函数,因此它可以访问到greet方法中的this。这会使函数的输出为“Hello, my name is Alice”。总之,要正确地理解this的指向,在编写JavaScript程序时需要仔细考虑上下文,并在需要时显式地设置this的值。
2023年06月18日
131 阅读
0 评论
0 点赞
2023-06-17
文本超出省略号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>示例</title> <style> .single-line { padding: 5px; background-color: burlywood; white-space: nowrap; width: 300px; overflow: hidden; text-overflow: ellipsis; } .multi-line { padding: 5px; margin-top: 20px; background-color: darkcyan; width: 300px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; max-height: calc(1.2em * 3); } </style> </head> <body> <div class="single-line"> 单行文本超出省略号,单行文本超出省略号,单行文本超出省略号,单行文本超出省略号,单行文本超出省略号,单行文本超出省略号, </div> <div class="multi-line"> 多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号,多行文本超出省略号, </div> </body> </html>代码中,white-space: normal 表示可以换行,display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 3 表示超出部分隐藏并设置最多显示3行,max-height: calc(1.2em * 3) 表示最多显示3行并根据内容自适应高度。这里设置了最多显示3行文本。注意,-webkit-box-orient 只在 Safari 和 Chrome 上支持,如果需要在其他浏览器上兼容,可以使用 -ms-flexbox 和 display: -webkit-flex。
2023年06月17日
78 阅读
0 评论
0 点赞
2023-06-17
修改被选中文本背景颜色与字体颜色
使用::selection伪元素来选中被用户复制的文本,通过color属性设置选中文本的字体颜色。通过background-color属性来设置选中文本的背景颜色。示例<style> ::selection { color: blue !important; background-color: yellow !important; } </style> <p>这是一段文字,</p> <p>你可以尝试选中其中的一部分,看一下被选中的文本的颜色与背景颜色是否发生了改变。</p>选中其中一部分文本,被选中的文本会变成蓝色字体、黄色背景:!important 规则,强制应用了我们设定的 CSS 属性。记得要在 ::selection 伪元素后面加上:hover 状态,以上例子中如果你选中文本之后,再次用鼠标点击页面,选中高亮就会消失了。
2023年06月17日
81 阅读
0 评论
0 点赞
2023-06-17
Markdown语法
下面是 Markdown 的全部语法示例,包括标题、段落、区块引用、列表、代码块、链接、图片、表格、粗体、斜体、删除线等:标题Markdown 支持六级标题,分别用 1~6 个井号(#)表示,其中一级标题字体最大,依次递减。示例# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题示例效果一级标题二级标题三级标题四级标题五级标题六级标题段落在 Markdown 中,将两个及以上的空格加回车视为段落的分界线,空行也被视为段落的分界线。也可以通过在段落末尾添加两个空格使其换行。示例这是一段 Markdown 文本,它包括两个段落。 这是第二个段落。示例效果这是一段 Markdown 文本,它包括两个段落。这是第二个段落。区块引用Markdown 用大于号(>)表示区块引用,可以嵌套使用,每个嵌套层级前加一个大于号。示例> 这是一个区块。 >> 这是一个嵌套的区块。示例效果这是一个区块。这是一个嵌套的区块。列表Markdown 用数字、加号(+)、减号(-)表示有序列表和无序列表,也可以使用嵌套的列表。示例1. 第一项 2. 第二项 3. 第三项 - 无序列表项 1 - 无序列表项 2 - 嵌套列表项 1 - 嵌套列表项 2 + 也可以用加号表示无序列表项 - 或者用减号表示无序列表项示例效果第一项第二项第三项无序列表项 1无序列表项 2嵌套列表项 1嵌套列表项 2也可以用加号表示无序列表项或者用减号表示无序列表项代码块Markdown 用反引号()表示单行代码,用三个反引号(``)表示多行代码块。示例这是一行 `行内代码`。 function add(a, b) { return a + b; }示例效果这是一行 行内代码。function add(a, b) { return a + b; }链接Markdown 用方括号和小括号表示链接和链接的标题,分别对应链接地址和链接文字。示例[Google](https://www.google.com)示例效果Google图片Markdown 用感叹号、方括号和小括号表示图片,分别对应图片地址、图片标题和图片描述。示例示例效果表格Markdown 用管道符(|)和连字符(-)表示表格,其中每个管道符表示一个列,连字符用来分隔表头和表格内容,也可以在连字符中添加冒号(:)来指定对齐方式。示例| 表头1 | 表头2 | 表头3 | 表头4 | 表头5 | 表头6 | | :---: | :----:| :----:| :---: | :---: |:----:| | 内容1 | 内容2 | 内容3 | 内容4 | 内容5 | 内容6 | | 内容1 | 内容2 | 内容3 | 内容4 | 内容5 | 内容6 | | 内容1 | 内容2 | 内容3 | 内容4 | 内容5 | 内容6 | | 内容1 | 内容2 | 内容3 | 内容4 | 内容5 | 内容6 |示例效果表头1表头2表头3表头4表头5表头6内容1内容2内容3内容4内容5内容6内容1内容2内容3内容4内容5内容6内容1内容2内容3内容4内容5内容6内容1内容2内容3内容4内容5内容6粗体Markdown 用两个星号(**)表示粗体,将需要粗体的文本用两个星号包裹起来即可。示例这是一个 **粗体** 文本。示例效果这是一个 粗体 文本。斜体Markdown 用一个星号(*)表示斜体,将需要斜体的文本用一个星号包裹起来即可。示例这是一个 *斜体* 文本。示例效果这是一个 斜体 文本。删除线Markdown 用两个波浪线(\~\~)表示删除线,将需要添加删除线的文本用两个波浪线包裹起来即可。示例这是一个 ~~删除线~~ 文本。示例效果这是一个 删除线 文本。任务列表Markdown 用减号和方括号表示任务列表,方括号内用大写字母 X 表示已完成,用空格表示未完成。示例- [x] 已完成任务 - [ ] 未完成任务示例效果[x] 已完成任务[ ] 未完成任务表情符号Markdown 支持一些表情符号,可以通过输入对应的符号来插入表情。示例:smile: :heart: :star:示例效果:smile: :heart: :star:分割线Markdown 用三个或多个连字符、底线或星号表示分割线,连字符可以用来表示文本居中,星号可以用来表示文本左对齐。示例--- ___ *** --- 居中文本 ---示例效果_居中文本HTML 标签Markdown 支持使用 HTML 标签来扩展语法。HTML 标签不会被解析为普通文本,而是保留其原有的样式和格式。示例<p style="color: red;">这是一段红色的文本。</p>示例效果这是一段红色的文本。音频Markdown 使用 HTML 标签来插入音频,可以设置音频的源文件和控制器样式等。示例<audio src="example.mp3" controls></audio>示例效果视频Markdown 使用 HTML 标签来插入视频,可以设置视频的源文件、封面图片、控制器样式等。示例<video src="example.mp4" controls poster="example.jpg"></video>示例效果相对路径Markdown 允许使用相对路径来链接本地文件或者其他 URL,只要在链接地址前面加上相对路径即可。示例[本地图片](./images/example.jpg)示例效果本地图片公式Markdown 支持使用 LaTeX 语法来书写数学公式,只需要将公式用一对美元符号包裹起来即可。示例$E = mc^2$示例效果$E = mc^2$注脚Markdown 支持使用注脚来插入注释,可以让读者更好地理解文章内容。示例这是一段文本。[^1] [^1]: 这是一个注脚。示例效果这是一段文本。1总结Markdown 是一种轻量级的标记语言,常用于创建简单的文档和网页。它具有简单、易读、易写的优点,同时支持多种语法和扩展,满足不同场景下的需求。本文介绍了 Markdown 的基础语法,包括标题、段落、列表、引用、链接、图片、粗体、斜体、删除线、任务列表、表情符号、分割线、HTML 标签、音频、视频、相对路径、公式、注脚等多种语法,希望能够帮助你熟练掌握 Markdown 的使用。 这是一个注脚。 ↩
2023年06月17日
54 阅读
0 评论
0 点赞
2023-06-17
JavaScript查找数据的几种方法
在 JavaScript 中,查找数据的主要方法包括:indexOf()方法:用于查找数组中指定元素的位置,并返回该位置的索引值。如果数组中不存在该元素,则返回 -1。基本语法如下:array.indexOf(searchElement, fromIndex)其中:searchElement:要查找的元素;fromIndex:从哪个索引位置开始查找(可选)。示例代码如下:let arr = [1, 2, 3]; let index = arr.indexOf(2); console.log(index); // 输出 1在这个示例中,使用 indexOf() 方法查找数组 arr 中元素 2 的索引位置,最终结果返回了值为 1 的索引。lastIndexOf() 方法:与 indexOf() 方法类似,不同点在于它从数组的末尾开始查找指定元素的位置。如果数组中不存在该元素,则返回 -1。基本语法如下:array.lastIndexOf(searchElement, fromIndex)其中:searchElement:要查找的元素;fromIndex:从哪个索引位置开始查找(可选)。示例代码如下:let arr = [1, 2, 3, 2]; let index = arr.lastIndexOf(2); console.log(index); // 输出 3在这个示例中,使用 lastIndexOf() 方法查找数组 arr 中最后一个元素 2 的索引位置,最终结果返回了值为 3 的索引。find() 方法:用于查找数组中符合条件的第一个元素,并返回该元素的值。如果没有符合条件的元素,则返回 undefined。find() 方法会遍历数组中的每一个元素,并依次执行回调函数进行判断,直到找到符合条件的元素,或者遍历完整个数组。基本语法如下:array.find(function(currentValue, index, arr), thisValue)其中:currentValue:当前元素的值;index:当前元素的索引(可选);arr:当前元素所属的数组对象(可选);thisValue:执行回调函数时的 this 值(可选)。示例代码如下:let arr = [1, 2, 3]; let result = arr.find(function(value, index, array) { return value > 1; }); console.log(result); // 输出 2在这个示例中,find() 方法遍历了原数组 arr 中的每个元素,并查找第一个大于 1 的元素,最终返回了值为 2 的元素。filter() 方法:用于查找数组中符合条件的所有元素,并返回一个新的数组。filter() 方法会遍历数组中的每一个元素,并依次执行回调函数进行判断,将符合条件的元素组成的新数组返回。如果没有符合条件的元素,则返回空数组。基本语法如下:array.filter(function(currentValue, index, arr), thisValue)其中:currentValue:当前元素的值;index:当前元素的索引(可选);arr:当前元素所属的数组对象(可选);thisValue:执行回调函数时的 this 值(可选)。示例代码如下:let arr = [1, 2, 3]; let result = arr.filter(function(value, index, array) { return value > 1; }); console.log(result); // 输出 [2, 3]在这个示例中,filter() 方法遍历了原数组 arr 中的每个元素,并筛选出了大于 1 的元素,最终得到了一个新的数组 [2, 3]。需要注意的是,这些方法的返回值可能会受到数据类型、数据结构等因素的影响,因此在实际使用中需要多加注意。在特定场景下可以使用 map() 方法进行数据查找。虽然 map() 方法主要用于函数式编程中的数据转换,但是由于它会遍历数组中的每个元素,因此也可以用于查找符合条件的元素。使用 map() 方法进行查找时,可以在回调函数中进行判断和过滤,将符合条件的元素转换成特定的格式并收集起来生成一个新数组。可以根据需要决定是否只返回第一个符合条件的元素或者返回所有符合条件的元素。下面是一个简单的示例代码,使用 map() 方法查找数组中大于 1 的元素:let arr = [1, 2, 3]; let result = arr.map(function(value, index, array) { return value > 1 ? value : null; }).filter(function(value) { return value !== null; }); console.log(result); // 输出 [2, 3]在这个示例中,通过 map() 方法将大于 1 的元素转换成自身,不满足条件的元素转换为 null,然后通过 filter() 方法将所有值不为 null 的元素过滤出来,得到了符合条件的元素组成的新数组 [2, 3]。需要注意的是,这种方法可能存在性能问题,特别是在数组长度较大时,因为它会遍历整个数组,而无法中途终止。因此,在实际使用时需要谨慎选择合适的方法。
2023年06月17日
35 阅读
0 评论
0 点赞
2023-06-17
JavaScript的几种循环方式
以下是六种 JavaScript 循环语句的详细介绍和使用实例:For 循环特点:用于遍历数组或集合元素,循环变量可用 let 或 var 关键字定义。循环控制包括三个操作数:初始化表达式、判断条件表达式和循环后操作表达式。使用注意事项:循环变量、数组的长度、循环控制条件需要注意,避免数组越界。使用场景:用于遍历数组或集合元素。示例:let arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }输出结果:1 2 3forEach 循环特点:用于遍历数组中的元素,无需显式地编写循环表达式,会自动遍历数组。不会返回一个新数组,而是直接对原数组进行操作。需要一个回调函数作为参数,该函数会依次接收数组中的每个元素以及它的索引。使用注意事项:需要回调函数的参数;不支持 break 和 continue 语句。使用场景:用于遍历数组。示例:let arr = [1, 2, 3]; arr.forEach(function(value, index, array) { console.log(value); });输出结果:1 2 3do...while 循环特点:循环体会至少执行一次。使用注意事项:条件表达式需要放在循环体里面;需要注意循环体会至少执行一次的特点。使用场景:需要至少执行一次循环体的场景。示例:let arr = [1, 2, 3]; let i = 0; do { console.log(arr[i]); i++; } while (i < arr.length);输出结果:1 2 3while 循环特点:和 do...while 循环类似,但是循环体在循环条件的前面,不一定会执行一次循环体。使用注意事项:需要注意循环条件判断的位置。使用场景:适合用于条件不确定的循环。示例:let arr = [1, 2, 3]; let i = 0; while (i < arr.length) { console.log(arr[i]); i++; }输出结果:1 2 3for...in 循环特点:用于遍历对象的属性名称。使用注意事项:只能遍历到对象的可枚举、非 Symbol 类型的属性;不适用于遍历数组。使用场景:遍历对象属性或键名。示例:let obj = {name: "张三", age: 20, city: "广州"}; for (let key in obj) { console.log(key + ': ' + obj[key]); }输出结果:name: 张三 age: 20 city: 广州for...of 循环特点:用于遍历可迭代对象中的值,例如数组中的元素、字符串的字符、Map 和 Set 中的元素等。使用注意事项:仅适用于遍历可迭代对象;循环变量是上一次遍历的元素值,而不是索引。使用场景:遍历可迭代对象中的元素。示例:let arr = [1, 2, 3]; for (let value of arr) { console.log(value); }输出结果:1 2 3在实际使用中,我们需要根据需求灵活地选择
2023年06月17日
38 阅读
0 评论
0 点赞