- 博客(55)
- 收藏
- 关注
RSS订阅原创 vue3 实现一个tab切换组件
3, 将bg大小进行调整 并移动到相应的位置。* 2. 获取元素的当前位置以及大小。// 没有找到值的时候找default。* 1. 找到相应的元素。文件: wqTabType。// wqTabs 元素。// 若没有找到tab。
2024-03-12 16:34:29
1021
原创 manjaro 安装 wps 教程
1. 安装wps主体```yay -S wps-office ```2. 安装wps字体 （如果下载未成功看下面的方法）```yay -S ttf-waps-fonts```3. 安装wps中文语言```yay -S wps-office-mui-zh-cn```
2024-03-06 08:19:27
664
原创 vue3 + vite + ts 封装 SvgIcon组件
> 备注: SvgIcon组件的, 按照自己的喜好与需求去封装, > 还有很多使用其他插件的教程, 大家根据自己的需求去下载使用, > 但对于每篇教程都要保留一定的思考性, 如果能找到对应的版本就很棒了, > 没有得话就找一下相似版本的教程作为参考,
2023-08-11 23:27:08
491
原创 Object.assign()的使用以及模拟实现
Object.assign()是JavaScript中的一个内置方法用于一个或多个源对象属性复制到目标对象中语法如下多个源对象可以通过逗号分隔或作为一个数组传递该方法将返回目标对象, 其中包含源对象的属性, 如果目标对象中的属性与源对象的属性相同, 则源对象中的属性将覆盖到目标对象中的属性。
2023-08-04 15:16:20
304
原创 如何在vue3中使用swiper插件(教程)
/pagination 就是指示器, 在效果中为小圆点...一定要下载正确的版本, 每个版本的使用差异还是有一些的。我的项目环境Vue3+vite+ts+scss,// 他有很多的模块, 具体看官方文档。// 这里需要引入样式,2.使用以下代码进行测试。// 这里需要引入模块。// 这里需要引入组件。
2023-07-26 15:11:32
1272
2
原创 js的 Babel原理
babel是一个JavaScript编译器,可以将ES2015+ 转换为向后兼容的JavaScript代码,Babel的原理是将JavaScript代码分为三个阶段: 解析, 转换和输出。
2023-06-21 09:59:07
576
原创 js判断数据类型的几种方法及其局限性(typeof, instanceof, Object.prototype.toString.call())
js中判断了类型的方法有很多, 这篇文章主要来说一下常用的几种判断类型的方法,以及使用:每个方法都各有优缺点,在日常使用的时候请结合这些优缺点进行斟酌:javaScript中typeof可以判断以下类型:undefined: 未定义的变量或者值boolean: 布尔类型, true 或falsenumber: 数值类型, 包括整数,浮点数, NaN, 和Infinity (无穷大)string: 字符串类星星, 表示文本symbol:符号类型,ES6中新增的基本数据类型function: 函数类型,可以
2023-06-08 11:21:04
1198
1
原创 CSS中flex属性的的使用以及应用场景有哪些
表示默认的状态,无需设置,适合小控件元素的分布布局,或者某一项内容动态变化的布局flex:0适用场景较少,适合设置在替换元素的父元素上,flex:none适用于不换行的呢绒固定或者较少的小控件元素上,如按钮flex:1适合等分布局flex:auto适合基于内容动态适配的布局。
2023-04-17 22:54:44
507
原创 20_有效的括号(语言:js)
给定一个只包括 '('，')'，'{'，'}'，'['，']'的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相同类型的左括号。
2023-04-16 12:27:03
64
原创 js使用正则完成字符串去除空格(前后空格, 前空格, 后空格, 全部空格,中间空格)
去除字符串1) 前后空格2) 前空格3) 后空格4) 中间空格5) 去除中间空格(这个方法值得讨论)
2023-04-12 10:32:24
1433
3
原创 使用CSS实现书籍的翻页效果(使用了animation)
要注意的是父盒子要开启3d, 并且要调整视距;还要注意旋转的角度以及起始位置;定义动画的起始状态和结束状态;让翻转到反面的元素不显示。来实现中间的动画效果;废话不多说,直接上代码。
2023-04-11 19:35:13
1460
原创 js对字符串进行字符计数,并将结果按照顺序输出
根据排好序的数组,对数组进行遍历,根据数组中元素取出Map容器中的存储的数据。使用Set容器进行去重,将set转换为Array并进行排序,采用Map容器进行计数,
2023-04-11 08:48:52
263
原创 HTTPS的加密原理(工作机制)
对称加密， 非对称加密， CA证书， 数字签证，https加密机制，http协议与https协议的区别， https的安全性，http为什么不安全， 数字证数是一种权威性的电子文档,它提供了一种在Internet上验证身份的方式;其作用类似于司机的驾驶证或日常生活中的凭证;它是由一个权威机构--CA证数授权(Certificate Authority)中心发行的，人们可以在互联网交往中用它来识别对方的身份。
2023-03-13 12:49:37
2893
1
原创 2. 事件捕获 及 如何阻止冒泡
DOM事件流机制 / 事件捕获什么是DOM?DOM 是描述 HTML 的内部数据结构,它会将 Web 页面和 JavaScript 脚本连接起来, 并过滤一些不安全的内容;HTML 解析器会把字节转换成DOM一个事件在发生的时候会在子元素和父元素之间传播,这会分成三个阶段:1. window 传到目标节点 ---- 捕获阶段(上层传到底层)2. 目标节点触发 ---- 目标阶段3. 目标节点传到window ---- 冒泡阶段(底层传到上层)
2023-03-06 20:59:45
206
原创 for in 和 for of 的区别
for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合，但是不能遍历对象，因为没有迭代器对象，但如果想遍历对象的属性，你可以用for in循环（这也是它的本职工作）或用内建的Object.keys()方法。
2023-03-06 20:06:11
92
原创 6. 渐变
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）使用角度 如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。语法background-image: linear-gradient(angle, color-stop1, color-stop2);
2023-03-05 15:30:19
125
原创 5.flex布局
1)flex-direction: row(默认值,主轴未水平方向,起点在左端) | row-reverse(主轴为水平方向,起点在右端) | colunm(主轴为垂直方向,起始点在上沿) | column-reverse(主轴方向为垂直方向,起始点在下沿)决定主轴的方向2)flex-wrap: nowrap(默认值,不换行) | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方)如果一条轴线排不下，如何换行3)
2023-03-05 14:47:02
159
原创 4. css实现水平或垂直居中
如果子元素的宽高确定的化,translate中的值也可以设置伪子元素宽高的一半,即transform: translate(-100px,-100px)子元素：margin:auto;这种方法适合子元素宽高确定的情况,给margin-top设置百分比的大小将不生效,即margin-top%;这种方式需要父元素的宽高都是确定的,才能保证子元素在父元素中垂直水平居中。这种方式适用于父元素高度确定的情况, 有关grid布局的适用可以参考。这种方式要求父元素的高度是确定的,百分比形式的高度将不生效。
2023-03-04 22:29:28
93
原创 如何使用markdown写目录
今天找到这样的一种方法,分享给大家, 希望在给使用markdown的你提供一些帮助。虽然是一个简单的笔记, 但如果有目录结构的化,就是快速定位到要看的位置,遇到了这样一个问题, 就是如何使用markdown写目录,链接部分使用 ` ` 标签的id值,这样点击链接的时候就可以快读定位到你想看的内容。今天在使用markdown记录笔记的时候,
2023-03-04 21:05:01
1180
原创 3. 清除浮动的几种方式,及其使用
使用before和after伪元素清除浮动(推荐使用): 这种方式也是使用额外标签方式达到效果，只是变相的使用了伪元素after/before，使得页面结构更简介，也是常用的清除浮动的方式。一个新的 display 属性的值，它可以创建无副作用的 BFC。给 元素设置 display: flow-root 属性后， 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。清除浮动: 清除浮动后造成的影响-->清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题。
2023-03-04 13:29:09
482
原创 2. 双飞翼布局
本笔记由作者在复习前端CSS部分的相关的一些总结, 如果有什么错误的地方或者有什么相关的建议欢迎联系我这份笔记借鉴了很多网上的文章, 如果有雷同或者相似的地方, 不用怀疑, 那就是搬得, 如果你是当中一些文章得作者,如果觉得这种行为不恰当, 请与我联系, 收到消息后我会尽快处理邮箱:QQ昵称: 只为你乱了浮生块级格式化上下文使页面上的一块渲染区域, 这块区域由符合条件的容器产生.容器内的子元素会由块盒子和浮动元素按如下规则排列:纵向一个挨着一个排列。
2023-03-04 13:22:20
291
原创 1.圣杯布局实现过程
三栏: float:left;给容器: pandding-left: 200px;圣杯布局是三栏布局: 两边高度固定, 中间栏自适应, 中间栏优先渲染。左侧挪到上一行前面: margin-left: -100%右侧往前挪: right: -150px。左右栏: 宽度+背景颜色。
2023-03-04 12:38:39
78
原创 ES6 Promise的使用
如果说,当我们需要发送多个异步异步请求,并且每个请求之间需要相互依赖,那这个时候,我们只能以嵌套的方式来解决 形成" 回调地狱"//每个请求之间需要相互依赖...})})})代码逻辑书写顺序与执行顺序不一致,不利于阅读与维护异步操作的顺序变更时,需要大规模的代码重构回调函数基本都是匿名函数,bug追踪困难。
2022-10-17 11:06:48
188
原创 前端发送请求的几种方式
Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML (en-US), XSLT, 以及最重要的 XMLHttpRequest。
2022-10-09 00:11:33
3222
原创 原型和原型链
所有函数都有一个prototype(原型)属性新建对象的时候都会默认调用构造器方法,构造函数里有prototype(原型)属性,而对象中的_proto_属性指向的是他的构造函数的prototype也就是说一个对象的_proto_(隐式原型)===其构造函数的prototype_proto_已被弃用,但是现在目前常见的浏览器仍旧支持,可以使用Object.getPrototypeOf(obj)获得原型//1)所有引用类型都有一个_proto_(隐式原型)属性,属性值是一个普通的对象或null。
2022-10-07 00:08:01
92
原创 事件流 & 事件的执行过程
事件流描述的就是从页面中接受事件的顺序,而早期的IE和Netspace提出了完全相反的事件流的概念,IE事件流是事件冒泡,而Netspace的事件流就是事件捕获。IE提出的事件流就是事件冒泡,几从下至上,从目标触发的元素逐级向上传播,直到window对象。2)处于目标阶段：事件目标阶段(对真正用户发生交互的标签进行触发事件)，事件目标就指的该标签。而Netspace的事件流就是事件捕获,即从document逐级向下传播到目标元素,3)事件冒泡阶段冒泡阶段(执行一次完整的冒泡)二.事件冒泡事件捕获。
2022-10-05 10:55:01
339
原创 js事件的执行机制
同步和异步任务分别进入不同的执行"场所",同步的直接进入主线程,异步任务进入 Event Table(事件表)并注册函数。js是一门单线程语言,js任务是一个一个顺序执行的,就像是只有一个核酸窗口,做核酸的人需要一个一个排队做核酸。2.主线程提取并执行事件队列的所有微任务,并注册微任务中的异步任务到事件队列中,同样,js任务也要一个一个顺序执行,如果一个任务耗时过长,那么后一个任务也必须要等着。3.执行事件队列中所有的微任务,并将微任务中的异步任务到事件队列中。异步任务分为 宏任务 与 微任务。
2022-10-03 23:46:40
138
原创 0022.JSON与js对象的相互转换
JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,所以JSON本质是一个字符串,通过JSON调用相应的方法,JSON和JS对象可以互相转换。
2022-10-02 15:48:14
188
原创 如何根据地理位置获取城市编码 / (高德地图) 获取城市编码API / 经纬度获取城市or城市编码
2022年9月29日,今天在做搜索天气的页面的时候遇到了这个问题,刚开始想用导入json文件的方法来去弄这个,有些json文件并没有做到那个精确,假如用到的地理位置是某个县,有可能就无法获取到城市编码.还需要自己去写方法,来截取存取地理位置的字符串.这里提供一个简单的方法,我们可以去使用某些地图平台的API(当然需要联网的情况下),去获取城市编码,比如百度地图或者高德地图.这里我使用的是高德地图.在文章的结尾我会附上原平台链接.代表的参数包括必填参数和可选参数。下面的列表枚举了这些参数及其使用规则。
2022-09-29 14:51:06
6693
1
原创 get和post请求的区别
HTTP定义了与服务器进行交互的不同方法,常用的有四种:GET,POST,PUT,DELETE其中,GET和POST最常用GET一般用来获取资源,他只是获取,查询数据,不会修改服务器数据,从这点来讲,他是安全的.由于他是读取的,因此可以对GET请求的数据进行缓存POST一般向服务器发送修改请求,进行数据的修改。
2022-09-28 22:29:51
101
1
原创 css中@font-face的使用
format]定义字体的格式,用来帮助浏览器识别字体,主要有以下这些格式：[truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)]font-face是css3中允许使用自定义字体的一个模块,它主要是把自己定义的web字体嵌入网页中。src:[url]加载字体可以是相对路径,可以是绝对路径,也可以是网络地址。font-weight:定义加粗样式。font-style:定义字体样式。
2022-09-26 22:22:35
1587
1
原创 JavaScript动画和CSS3动画的区别
如果动画只是简单的状态切换,不需要中间过程控制,这种情况下,CSS动画是优选方案,它可以让你将动画逻辑放在样式文件里,而不会让你的页面充斥JavaScript库,然而如果你在设计很复杂的客户端界面或者开发一个有着复杂UI状态的APP,那么你应该使用JS动画,这样你的动画可以保持高效,并且你的工作流也更可控,所以再实现一些小的交互动画的时候,就多考虑CSS动画,对于一些复杂控制的动画,使用JavaScript比较可靠。
2022-09-24 15:14:03
325
1
原创 JS判断一个值是什么类型
判断js数据类型有很多方法,我这里介绍以下三种常见的方法1.typeof运算符typeod是最常见的,使用它会返回一个字符串,设置函数对象和基本类型(js中的基本类型:number,string,boolean,null,undefined,object 还有ES6新增 symbol)的判断2.instanceof操作符(基于原型链)obj instanceof Object实质就是:instanceof操作符判断做操作数对象的圆形链上是否有右边这个构造函数的prototype属性,也就是说
2022-09-24 14:36:37
266
原创 JavaScript 中的作用域、预解析与变量声明提升
ES6之前 JavaScript 采用的是函数作用域 + 词法作用域 ES6 js采用的是块级作用域+词法作用域。局部作用域一般只在固定的代码片段内可以访问到,而对于函数外部都是无法访问的,最常见的例如函数内部,变量提升:定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升。在ES6之前,只有函数可以划分变量的作用域,所以在函数外面无法访问函数内的变量。凡是代码块就可以划分变量的作用域,这种作用域的规则就叫块级作用域,块级作用域和函数作用域描述的是,什么东西可以划分变量的作用域。
2022-09-23 20:07:48
231
原创 js如何遍历对象的属性
了解如何遍历对象属性之前,先知道什么可枚举属性 与 不可枚举属性在JavaScript中,对象的属性由可枚举和不可枚举之分,它是由对象属性描述符enumerable决定的,如果该属性是可枚举的那么这个属性就能被for...in遍历到在JavaScript中可以通过Object.defineProperty()来为对象设置属性描述符从ES5开始,添加对象属性描述符的支持,现在JavaScript中支持6中属性描述符:configurable:设置为true时,该属性的藐视符才能够被改变,同时该属性也能从对应的
2022-09-23 16:51:02
597
原创 浅谈数组与伪数组的区别
数组相信大家已经很熟悉了,那么这篇文章讲讲什么是伪数组以及数组与伪数组的区别伪数组的定义拥有length属性,其他属性(索引)为非负整数不具有数组所具有的方法常见的伪数组有:函数参数arguments,DOM对象列表;jQuery中的$(' ')等伪数组与数组的区别索引(index)和长度(length)伪数组的索引,就是那些键值对的key,没有真正的顺序,长度是手动设置的属性数组的索引和长度是内置属性Array.prototype伪数组没有Array.prototype,它只是
2022-09-23 11:06:13
191
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人