自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(28)
  • 收藏
  • 关注

原创 歌词滚动效果

先看下效果吧:由于实现这个效果的重心是在于,html 和 css 大家看代码就明白了。

2024-01-13 23:53:53 441

原创 find 和 findIndex 的讲解和实现

findIndex在 JavaScript 中,findIndex是一个数组方法,用于查找。array:要在其中查找元素的数组。callback:一个回调函数,用于定义查找条件。elementindexarrayfindIndexthisArg(可选):在执行回调函数时使用的this值。findIndex方法会从数组的第一个元素开始遍历,直到找到满足条件的元素或遍历完整个数组。如果找到满足条件的元素,则返回该元素的索引;否则返回 -1。下面是一个简单的示例,演示如何使用findIndex。

2024-01-10 22:59:26 495

原创 了解 css中 backface-visibility 属性

是一个CSS属性,用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。当我们对一个元素应用3D转换(例如旋转或倾斜)时,默认情况下,元素的背面是不可见的,即不会显示在屏幕上。这是因为浏览器默认会进行背面剪裁(backface culling),以提高性能和减少不必要的渲染。但有时候,我们可能需要让元素的背面可见,这时就可以使用属性来控制。visible:表示元素的背面可见。背面将正常渲染并显示在屏幕上。hidden:表示元素的背面不可见。

2024-01-10 22:56:40 660

原创 一行代码将对象 转换成查询字符串

然后就stringify 方法 我们一行代码即可实现上方的需求。经过上面的处理之后 我们目前的数组变成了。然后我们讲一下使用到的API (ES6)再之后 , 加上前缀 this.pre。得到一个含有指定符号(因为map 之后 会。

2023-12-20 23:50:06 109

原创 Object.create() 方法 讲解 和实现

构造函数默认的原型(即 constructor.prototype)指向一个内置的 Object 对象。F 是为了实现 Object.create() 方法的核心功能。静态方法以一个现有对象作为原型,创建一个新对象。——同时保持代码的封装性和避免对全局环境的影响。——基于指定的原型创建新对象,下面是详细推理的过程。

2023-12-20 23:44:30 175

原创 封装QueryString构造函数,实现stringify、parse方法

封装QueryString构造函数,实现stringify、parse方法

2023-12-20 23:42:59 179

原创 js中实现浅拷贝和 深拷贝

在JavaScript中,浅拷贝和深拷贝是两种复制对象的方式,它们的主要区别在于:浅拷贝只复制对象的,如果属性是引用类型(如数组、对象),则,而不是实际的对象。这意味着如果你修改了复制后的对象的引用类型属性,原对象的对应属性:深拷贝不仅复制对象的基本类型的属性,还会复制。这意味着它会,并复制原对象的。因此,修改复制后的对象的任何属性,都。

2023-12-17 23:05:19 33

原创 构建工具到底是什么呢? 一篇帮你搞懂

构建工具他让我们可以不用每次都关心我们的代码在浏览器是如何运行的,我们只需要给构建工具提供一个配置文件(这 个配置文件也不是必须的,如果不给他,他会有默认的帮我们去处理),有了这个集成的配置文件之后,我们就可以在下次需要更新的时候调用一次对应的命令就好了,如果我们再结合热更新, ​ 我们就更加不需要管任何东西,这就是构建工具去做的东西.他让我们不用关心生产的代码是如何在浏览器运行的,只需要关注我们的开发如何舒服怎么来就ok ​ 这个东西就是构建工具。

2023-12-17 00:04:18 54

原创 手写call , apply , bind 方法的实现

/所有函数身上都有的方法 需要我们在Funtion 原型身上去定义...

2023-12-17 00:00:48 147 1

原创 React-Router学习

声明式导航是指通过在模板中通过组件描述出要跳转到哪里去,比如通过使用这种方式进行通过给组件的, 组件会被渲染位浏览器支持的a链接,如果需要传参直接通过字符串拼接的方式拼接参数即可。

2023-12-13 11:51:49 84 1

原创 WebSocket 介绍

WebSocket是一种在单个TCP连接上进行全双工通信的协议,它为客户机和服务器之间的双向数据流提供了新的选择。相比HTTP协议,WebSocket具有更低的延迟和更高的效率,可以实现实时数据传输,如即时通讯在线游戏等。WebSocket:创建一个新的WebSocket对象WebSocket事件处理程序:处理WebSocket对象所触发的所有事件使用或将一个事件监听器赋值给本接口的属性,来监听下面的事件。WebSocket(url):构造函数,创建WebSocket对象,并建立与指定url的服务器连接。

2023-10-24 18:04:54 47

原创 CSS实现倒影效果

实现倒影的两种方式。

2023-09-11 22:39:46 676 1

原创 第二章 物理层

物理层考虑是怎样才能在连接各种各种计算机的传输媒体上传输比特流物理层为数据链路层屏蔽了各种传输媒体的差异,使数据链路层只需要考虑如何完成本层的协议和服务,而不必考虑网络具体的传输媒体是什么.

2023-09-09 21:06:34 352 1

原创 第一章 计算机网络概述

现阶段计算机网络的一个较好的定义计算机网络主要由一些通用的,可编程的硬件互联而成的,而这些硬件并非专门用来实现某一特定目的(例如:, 传输数据或者视频信号). 这些可编程的硬件能够用来传输不同类型的数据,并能够支持广泛的和日益增长的应用。

2023-09-07 00:26:44 327 1

原创 ES6 扩展运算符(详解以及使用场景)

三个点(…)扩展运算符,是在ES6中新增加的内容,它可以在函数调用或者数组构造的时候,将数组表达式或者string在语法层面进行展开;我们可以直接看代码 就容易理解它是干什么的了通过扩展运算符,我们很容易的将str这个字符串给拆开.接下来我们多介绍一些使用扩展运算符的场景,方便更好地去理解它到底是干嘛的怎么用什么时候去用。

2023-08-30 21:31:17 1154 1

原创 超简单的Flex布局 一学就会(附图讲解)

其余效果图 可自行复制代码,到自己vscode进行演示,可以更快的了解到flex的强大之处😼😼😼。flex布局中 默认的子元素是不换行的,当排不开 会缩小子元素的大小。侧轴上子元素垂直居中 align-items: center;

2023-08-29 22:05:14 2404 1

原创 js中的reduce()方法 讲解 和实现

reduce方法讲解,使用场景,自己实现一个简易的reduce方法

2023-08-29 21:48:08 2013 3

原创 简单css代码 实现文字涂抹动画

1. 定义好一个div盒子 里面放文本内容2. 再在div盒子设置伪元素,父级设置`position: relative;`,伪元素(子级)设置`position: absolute; left: 0; top: 0;`实现和div盒子重叠,3. 通过设置伪元素的宽度,和溢出隐藏`overflow:hidden`以及文本不换行` white-space: nowrap;`,让他与父级文本保持一致 4. 最后就是实现动画的关键了 也很简单,就是在起始伪元素的宽度为`0%` ;结束的时候为父级的`100%

2023-05-07 22:30:04 1822 1

原创 JS 闭包

JavaScript 中的闭包是一个非常强大的概念,很多开发者在学习 JavaScript 时都会遇到这个问题。本篇文章将介绍 JavaScript 中的闭包,同时提供一些例子来帮助您更好地理解。首先,我们需要明白闭包是什么。简单的说,闭包是指可以访问独立变量的函数。具体来说,当一个内部函数引用了其外部函数的变量时,就形成了一个闭包。// 外部函数 function outerFunction() {// 内部函数 function innerFunction() {// 输出:123。

2023-05-05 22:11:47 1669 1

原创 学习TypeScript -- 基础部分

TS(TypeScript)是一种由Microsoft开发和维护的编程语言,它是JavaScript的超集,支持静态类型检查、类、接口、泛型等特性。TS最终会被编译为标准的JavaScript代码,因此可以运行在任何支持JavaScript的环境中。使用TS带来了许多好处,例如更早地发现类型相关的错误、提高代码可读性、使用面向对象的编程范式等。同时,由于TS与JS具有相似的语法和语义,因此学习曲线相对较低,也很容易与现有的JavaScript项目进行集成。TS开源教程以及应用在线编译 TS => JS的代码

2023-05-04 09:32:24 1700

原创 JS数组常用的方法

JavaScript数组是一种常见的数据类型,它由多个元素组成。末尾添加末尾删除开头删除开头添加添加删除转换为一个字符串指定元素第一次出现的索引没有`返回-1`包含则返回true否则返回false给定的函数这些方法可以方便地操作和处理JavaScript数组,可以根据实际需求选择使用。

2023-04-30 00:07:18 1662

原创 sass 基础学习

在Sass中,@mixin指令用于创建可重复使用的代码块。通过定义一些通用的样式或功能,并将它们组合成一个mixin,然后在需要时调用这个mixin,可以大大简化样式表的编写。// 兼容其他浏览器 -webkit-border-radius : $radius;} .box {// 引入定义好的混入样式 @include border-radius(5px);编译成CSS 之后.box {在上述代码中,我们使用了一个@mixin指令定义了一个名为的mixin,它接受一个参数。

2023-04-27 10:39:04 1686

原创 学习particles.js 给网页添加粒子特效

今天我们来学习一下Particles.js是一个开源的轻量级JavaScript库,它帮助你创建漂亮的交互式粒子效果。它基于HTML5 canvas元素,能够在。它可以通过调整不同的选项来定制化等等。除此之外,particles.js 还支持响应式设计,可以让效果在不同的设备上呈现出不同的表现。这个库非常适合,以增加互动的效果并吸引用户的注意力。

2023-03-09 18:45:05 3370

原创 three.js 基础

GreenSock 动画平台 (GSAP) 是一套行业知名的工具套件,用于超过 1100 万个网站,其中包括超过 50% 的获奖网站!你可以在任何框架中使用GSAP来制作可以触及的几乎所有东西。*无论您是想为 UI、SVG、Three 还是 React 组件制作动画.js -GSAP 都能满足您的需求。核心库包含创建超快、跨浏览器友好动画所需的一切。这就是我们将在本文中逐步介绍的内容。除了核心,还有各种各样的插件。您无需学习它们即可开始使用** ,但它们可以帮助解决特定的动画挑战,例如基于滚动的动画。

2023-03-09 00:05:50 1782

原创 CSS常用滤镜讲解

上了点年纪的人一般见过胶卷相机,照片的底片那种效果其实就是图片反转效果。旋转成新的对应颜色。通过设置grayscale(%)将图片转换成灰度图片,值可以是小数和百分数.默认 0。为图像设置高斯模糊,值越大越模糊, 默认是0,既不模糊. 值的单位是。当值超过100%时完全转换成灰度图片,当值为0% 图像无变化。该函数的值为0-1之间的数字或者百分比,默认值为0。所谓色相旋转,就是指将图像中的各种颜色按照给定的角度在。,图像的对比度更加强,意味着图片的鲜艳度更强。图片更加鲜艳了 白的更白,黑的更黑。

2023-03-08 23:33:44 3038

原创 ES6 新增语法 对象解构

ECMAScript6新增了对象解构语法,可以在一条语句中使用嵌套数据实现一个或者多个赋值操作,简单的说,对象解构就是使用了与对象匹配的解构来实现对象属性赋值name : "张三" , age : 21 } let {console . log(PersonName , job) // 张三 WebKaiFa可以方便地从对象中提取属性值,不需要使用点运算符或中括号。可以给变量赋予默认值,避免undefined或null的情况。可以使用别名,给变量取一个与对象属性名不同的名字。

2023-03-07 18:12:09 1734

原创 js 防抖与节流

防抖函数的作用是在用户停止触发事件后,延迟一段时间再执行函数。这样可以避免频繁地执行一些计算量大或者请求量大的函数,比如自动保存、搜索建议等。节流函数的作用是在一定时间间隔内,只执行一次函数。这样可以保证函数的执行速度不超过设定的频率,比如滚动事件、窗口大小调整等。防抖和节流函数的好处是可以提高性能,减少资源消耗,优化用户体验。

2023-03-06 19:20:45 1824

原创 【无标题】Vue3 异步组件实现骨架屏效果

Vue3 异步组件实现骨架屏效果具体代码实现```// axios.ts 文件 路径:src/server/axios.tsexport const axios ={get<T>(url:string):Promise<T>{return new Promise((resolve)=>{ const xhr = new XMLHttpRequest() xhr.open('GET',url) xhr.onreadystatechage

2023-02-20 11:04:00 2023 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除