![](https://img-blog.csdnimg.cn/01117e0789214ebc956cce4d395ba510.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML5+ES6-ES13+CSS3
文章平均质量分 62
HTML5+ES6-ES13+CSS3
Dormiveglia-flx
我陪你走的路,你不能忘~
因为那是我,最快乐的时光
展开
-
【今日文章】:Web浏览器的部分事件
/ 1.2 通过动画,配合使用【transform:translate(x,y)】,让小球移动。常见的应用场景:当页面【切换】的时候,浏览器为了保证自己的效率,会将【定时器】设置成1秒走一次。// 当页面切换的时候,浏览器为了保证自己的效率,会将定时器设置成1秒走一次.// 1.3 为了让小球连续的移动,我们需要获取小球的起始位置。// 需求:鼠标点击,点击到哪里,小球移动到哪里.//让动画,停留在最后的位置,而不是再返回回去。// 3.3 性能优化,把之前的动画清除。// 3.1 获取小球的起始位置。原创 2023-11-10 10:27:49 · 86 阅读 · 0 评论 -
【今日文章】:Web端常用的Observer监听器
/ 2. observer是当前MutationObserver的实例对象。这个Observer非常常用,常用于【图片懒加载】【下拉加载】【广告计费】等。// elem变化的时候,MutationObserver会监听到。// 比如【标签变化】、【子节点变化】、【属性变化】等等。// 1. mutationsList是发生变化的数组。// 这里填写的是,要监听的对象。// 【在这里进行业务操作】。与 浏览器窗口的交集。原创 2023-11-08 15:59:52 · 242 阅读 · 0 评论 -
【今日文章】:如何用css 实现星空效果
星星向上移动,且移动完成以后,没有“闪”一下的效果。这是常见的动画上面的需求,我们通常的做法就是。3. 写一个子元素,复制star, 当动画结束的时候,展示一模一样的子元素。1. 通过box-shadow中写多个偏移的阴影,就能形成星空效果。2. 星空是需要移动的,那怎样的动画效果才合理呢?不会出现动画“闪”一下的效果。最合理的解决方案是 "复制" 一份出来。如果是margin-left:auto,那是。这里我们需要知道,“星星”是怎么产生的。这个时候能上下左右居中的原理是,其次是星星的动画是怎么做的?原创 2023-11-08 10:04:32 · 992 阅读 · 0 评论 -
纯css手写switch
2.定义switch的开关按钮:使用伪元素,给switch添加按钮。1.定义switch的背景:让span标签,填充满父元素,用作switch的背景。标签,就可以在隐藏input的时候,点击label触发选中事件,我们经常用这种方式来定义一些样式。前置知识二:正常来说,我们dispaly:none的时候,我们就不会触发隐藏元素的点击事件了。当input选中的时候,已经添加的伪类,颜色变白,且移动44px */概念:为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的。原创 2023-10-14 11:22:15 · 809 阅读 · 0 评论 -
原生JS-鼠标拖动
/ 1. 给被拖拽的div加上 onmousedown 鼠标【按下事件】。//结束的位置,减去鼠标点下的位置,那么得到的位置,就是div落下的位置。// 三. 全局监听鼠标的抬起事件。//记录鼠标点下的位置。// 2. div按下后,全局监听鼠标【移动事件】。//这里还需要加上 div当前的位置, 累加。// 2. 鼠标移动,div跟着移动。// 鼠标按下的时候,开始监听鼠标的移动。// 鼠标移动后,给div赋值。// 3. 全局监听鼠标【抬起事件】。// 二. 全局监听鼠标的移动事件。原创 2023-10-10 17:38:43 · 1047 阅读 · 0 评论 -
CSS 经典使用场景
谷歌版本高的浏览器,会把overflow: overlay;当成overflow: auto;比较好的解决方法是:el-scrollbar组件。其实非常简单,就是给文字的div加一个动画。让整体向左或者右移动。/* 当hover效果的时候,滚动条出现 *//* 父元素hidden */原创 2023-10-07 17:10:19 · 231 阅读 · 0 评论 -
CSS 相关
width:100%:即图片的自动缩放。在容器比图片宽得多的情况下,图片会被无谓地拉伸。通常设置一个较小的宽度(最大宽度),来保证不用宽度分辨率下显示一致。如果包含图片的元素(比如包含图片的body或div)比图片固有宽度小,图片会缩放占满最大可用空间。max-width:保证图片最大显示为其自身的100%(即最大只可以显示为自身那么大)。缺点很明显:分辨率很大的屏幕(4K),两边的空白会很大。两列布局:左侧一列宽度固定,右侧一列,宽度撑满父元素。设置:box-sizing:border-box以后。原创 2023-09-30 10:18:56 · 336 阅读 · 0 评论 -
Vue2 常用用法
动画钩子函数的本质是副作用函数,就是触发动画的同时,还需要触发别的操作,这个别的操作就是副作用。可以在触发动画的时候,触发某个钩子函数,操作DOM。比如动画入场的时候,背景色是红色,动画出场的时候,背景色变成蓝色。2. attr 穿透的话,可以穿透多层,从父组件穿透到儿子组件,再穿透到孙子组件。loading动画的原理就是,每个字符都向上动,且有延迟时间。当子元素的数量变成四个,甚至更多的时候,我们发现,3. 子组件有多个根节点的,肯定是没法穿透了。封装了动画库,支持元素的进入与离开的过渡。原创 2023-09-25 14:14:22 · 124 阅读 · 0 评论 -
TS 入门
代码的地址。原创 2023-09-01 15:11:24 · 122 阅读 · 0 评论 -
前端----JS 面试题 部分阿里、百度一面
需求,把给一个数组,写一个函数输出对应类型的数组。接下来就渲染页面UI ,然后再执行一遍事件循环,再渲染UI。原创 2023-07-13 23:50:58 · 355 阅读 · 0 评论 -
JS通过递归,处理树型结构数据
这个时候,也是需要 遍历两个数组。当顶级的id == 子级的pid的时候,添加children。如果将来菜单的级数特别多怎么办?(不知道有几级)的时候,可以用。不知道具体执行多少遍。原创 2023-04-06 23:38:24 · 828 阅读 · 0 评论 -
ES6新特性--Generator
Generator 函数:1.可以理解成。原创 2023-04-06 17:34:58 · 436 阅读 · 1 评论 -
ES6新特性--Set与Map与ES7新特性--空值运算符与?. 操作符
【代码】ES6新特性--Map与Set。原创 2023-04-06 11:30:36 · 428 阅读 · 0 评论 -
ES6函数、对象、数组用法
【代码】ES6函数、对象、数组用法。原创 2023-04-04 15:14:37 · 52 阅读 · 0 评论 -
CSS面试题
同理border-top和border-right也有冲突,所以CSS如下图,安排这种情况。line-height设置的值。height自然是div的高度。是div中文字的高度,如果文字。所以如果要画三角形,只留一个。原创 2023-04-02 17:56:48 · 418 阅读 · 0 评论 -
ES6新特性--Proxy与Reflect
其次是不破坏原对象,以后直接用Proxy对象就行。我对Reflect的个人理解,就是反射,比如。的,Reflect就是通过反射,获取到这个。最常用的是与Proxy一起使用。Proxy用法,数据劫持,与。Reflect的使用:用于。一样,Proxy更好用。在obj外面再加一层。原创 2023-03-30 17:52:06 · 43 阅读 · 0 评论 -
CSS面试题
:disabled、:empty、:required 等。::first-child、:nth-of-type等。::visited、:focus、:hover等。::target、:lang、:not()等。结构伪类有一个好处是:通过文档结构的。原创 2023-03-17 14:16:01 · 402 阅读 · 0 评论 -
闲来无事,写写文章----JS面试题
下面举几个简单的例子大家就知道了。原创 2023-03-04 16:23:00 · 42 阅读 · 0 评论 -
CSS动画
* 需要过渡的css属性,默认值为all表示所有属性都过渡(width、height等等) */3 animation-fill-mode:设置当动画不播放时(动画播放完或延迟播放时)的状态;/* 定义动画开始播放前的延迟时间 *//* 完成一次动画周期需要的时间 *//* 完成一次动画周期需要的时间 *//* 完成一次过渡周期需要的时间 *//* 完成一次动画周期需要的时间 *//* 定义过渡前延迟的时间 *//* 定义动画播放的次数 *//* 动画播放的速度曲线 *//* 过渡播放的速度曲线 */原创 2023-02-08 15:12:47 · 78 阅读 · 0 评论 -
闲来无事,随便写写
模块化的开发方式可以提高代码复用率,方便进行代码的管理。定义当前模块对外输出的接口与变量,用require加载模块。一个文件就是一个模块。,有自己的作用域,只。原创 2023-02-07 17:03:34 · 43 阅读 · 0 评论 -
ES6之类的概念
/ 属性表达式 let methodName = 'setSex';// ... } } // 上面代码中,Person 类的方法名setSex,是从表达式得到的。// Class 表达式,可以写出立即执行的 Class。} }('张三');// "张三" // person是一个立即执行的类的实例// 静态属性,只能通过静态方法才能访问。console . log("这是静态方法");} } // 静态属性 Person . type = "这是静态属性";原创 2023-02-06 17:31:40 · 280 阅读 · 0 评论 -
CSS浮动之高度塌陷、JS事件冒泡和事件委托
CSS浮动造成的高度塌陷, JS事件委托与事件冒泡原创 2023-02-06 14:39:22 · 513 阅读 · 0 评论 -
Vue.$set()———Vue-给对象新增属性
Vue给对象新增属性一 背景二 例子三 解决方法一 背景当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,此时会更新此属性的值,但是不会更新视图的。根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。二 例子<template> <div> <p @click="addd(obj)">{{obj.d}}</p> <p @clic原创 2021-12-14 19:55:39 · 1891 阅读 · 0 评论 -
JS常见的优化代码常用的两种方法
JS常见的优化代码常用的两种方法原创 2022-12-13 16:45:15 · 97 阅读 · 0 评论 -
vue面试题八:一 JS中Promise用法、二闭包的概念与用法、三对象创建的四种方式与区区别、四 如何声明一个类
JS 面试内容原创 2022-07-25 10:58:21 · 334 阅读 · 0 评论 -
webpack基础教程
webpack基础教程原创 2022-12-07 11:02:45 · 899 阅读 · 2 评论 -
网站如何变成灰色的
网站如何变成灰色原创 2022-12-02 14:44:28 · 67 阅读 · 0 评论 -
JS基础----call和apply方法、代理Proxy的使用、JS中defineProperty用法
JS基础----call和apply方法、代理Proxy的使用、JS中defineProperty用法原创 2022-11-24 16:45:24 · 505 阅读 · 3 评论 -
ES6常见用法补充
ES6常见用法一、关于取值方面二、关于扩展运算符方面三、ES6 新增常见函数的操作四、ES6中新出的空值合并运算符一、关于取值方面ES6通过解构来取值如果不用解构,我们平时是怎么取值的?以对象为例const obj = { name:'flx', age:24,}// 如果不用解构我们怎么取值?const myName = obj.name; // flxconst myAge = obj.age; // 24如果用解构,是怎样取值的呢?const {name原创 2021-10-25 22:59:49 · 132 阅读 · 0 评论 -
webpack进阶教程之性能优化篇
webpack进阶教程之性能优化篇原创 2022-12-12 17:03:12 · 417 阅读 · 0 评论 -
CSS 基础
css 基础原创 2022-07-25 11:20:25 · 118 阅读 · 0 评论 -
JavaScript中的多线程——web worker
JavaScript中的多线程——web worker一 什么是web worker ,web worker的初体验二 web worker 用法一 什么是web worker ,web worker的初体验官网:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workersWeb Worker 的作用Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线原创 2021-12-25 16:36:19 · 257 阅读 · 0 评论 -
JS 面试题:如何用set() 给数组去重以及对数组对象去重、JS 中 ...扩展运算符 与 解构、JS 防抖与节流的概念、JS 中null 与 undefind出现的情况、JS 中map()
JS 面试题:如何用set() 给数组去重以及对数组对象去重、JS 中 ...扩展运算符 与 解构、JS 防抖与节流的概念、JS 中null 与 undefind出现的情况、JS 中map() 与 foreach() 的区别原创 2022-11-29 15:57:30 · 155 阅读 · 0 评论 -
大话JavaScript Promise
大话JavaScript Promise一 什么是 Promise?二 为什么有 Promise?三 Promise常用api四 Promise常用的两个用法一 什么是 Promise?一个 Promise 对象就像容器一样,在容器中写着一段执行具体操作的代码,并且在这段代码执行结束后,会执行两个回调函数,一个是操作成功的回调函数(resolve),一个是操作失败的回调函数(reject)二 为什么有 Promise?Promise 的出现是为了解决异步编程中,主要使用的回调机制的几个问题:原创 2021-12-27 23:06:50 · 406 阅读 · 0 评论