- 博客(47)
- 收藏
- 关注
RSS订阅原创 图片上传流程&前端上传文件&后端保存文件&并返回图片地址
也是在最近一点时间写小demo遇到的一些问题比如在用户界面，用户选择本地的一张照片，前端把照片传到后端，后端怎么把照片保存到服务器，然后返回给图片线上地址。也是找了一些文章，然后分享下。技术前端react后端egg.js(node框架)base64转换转二进制保存图片。...
2022-07-26 20:48:28
14607
2
原创 lottie-web，lottie动画使用详解
lottie-web container 用于渲染的容器 renderer 渲染器 loop 循环 autoplay 自动播放 path 路径api 使用： 名称参数描述stop无停止动画play无播放动画pause无暂停setSpeedNumber设置播放
2022-06-03 14:07:44
2054
原创 jwt 认证机制
jst 通常有三个部分组成，分别是header（头部）、payload（有效载荷）、signatrue（签名）三者之间用逗号隔开：Header.Payload.Signatruepayload 才是真正的用户信息部分，他是加密后的字符串 header、signatrue 是安全性相关部分安装：npm install jsonwebtoken express-jwtjsonwebtoken 用于生成 jwt 字符串 express-jwt 用于将jwt字符串解析还原成 jso.
2022-05-23 10:32:06
758
原创 MySql 安装使用（mac）
首先安装两个软件：数据储存：MySQL :: Download MySQL Community Server可视化工具：MySQL :: Download MySQL Workbench按照步骤安装即可使用1.输入设置的密码：2.设置库的名字：3.创建数据表：4.默认值：DataTypes数据类型：int 整数 varchar（len）字符串 tinyint（1）布尔值字符串的特殊标识：...
2022-05-22 17:02:20
494
2
原创 css3 Transition动画执行时有可能会出现闪烁的bug
再目标元素上面添加：-webkit-backface-visibility: hidden -webkit-transform-style: preserve-3d;
2022-04-19 19:03:44
1079
原创 animaction，判断动画执行结束，js添加动画的@keyframes
var anim = document.querySelector('div')anim.addEventListener('animationend',function(e){ //动画执行完毕 执行 console.log(e)//当前动画的属性 console.log(e.animationName) //当前动画的名字；})js添加动画的@keyframesvar style = document.styleSheets[0]; style.inse..
2022-04-18 20:23:45
715
原创 通过定位实现评论弹幕效果
实现效果：两行弹幕不停滚动，当弹幕轮播完之后，将自动回到初始位置原理：弹幕的添加功能就是瀑布流的实现原理，判断两个ul 的长度，谁短，往谁上面填添加 li轮播的原理就是给ul添加定位功能，改变他的left值上代码：html： <div class="box"> <ul class="one" style="left: 100px;"></ul> <ul class="two"></ul>
2022-03-28 20:30:43
173
原创 #region 与 #endregion 用法（注释代码的折叠）
我们在用 VS code 的时候，注释的代码是无法折叠的有时就会特别影响我们观看代码只需要在注释代码的开头加上#region 和代码的 结尾加上#endregion即可实现折叠 //#region if(){ }else{ } //#endregion...
2021-11-21 20:47:53
1201
原创 http服务过程（请求过程）
当我们 web 浏览器的地址栏输入一个网址的时候，具体发生了什么呢？ 对这个网址进行DNS域名解析，得到相应的 IP地址 根据这个IP地址 找到对应的服务器，发起 TCP 的三次握手 建立TCP 连接之后发起HTTP请求 服务器响应HTTP请求，浏览器得到HTML代码 浏览器解析HTML代码，并请求HTML代码中的资源（js、css、图片等） 浏览器对页面进行渲染呈现给用户 服务器关闭TCP连接 1.DNS怎么找到域名的DNS域名解
2021-11-14 20:55:39
1866
原创 同步、异步、Promise、async +await 及简单封装axios（原理）
目录同步和异步的不同点：ajax 的异步函数执行顺序：如果让第一个ajax 成功之后，再去发送第二个 ajax，再去发送第三个 ajax...promise：用 promise简单 封装 ajax简单的案例 用 async 和 await先说一说同步和异步的不同点：同步：代码从上往下执行，遇到同步就会一直等，等到完成才会继续走。异步：代码从上往下执行 ，遇到异步就先走了，异步的代码就后面执行。那么有哪些异步呢：定时器 ajax 事件处理（绑定...
2021-11-14 17:13:32
1487
1
原创 class es6的构造函数的另一种写法（语法糖）
构造函数的一般写法： // 构造函数 function Person(){ this.name="小明" this.age=18 this.say=function(){ console.log('person 的 say'); } } let p1 = new Person() console.log(p1.
2021-11-14 15:32:55
627
原创 赋值、深拷贝、浅拷贝、堆和栈
首先介绍一下JavaScript的数据类型有哪些：普通数据类型：string、number、undefined、Null、Boolean、引用数据类型：object(function、Array、Date)介绍一下他们的储存方式：浅拷贝和赋值的区别：首先是赋值：（看代码） let person = {name:'彭于晏'} let person1 = person person1.name = '胡歌' console.log(perso.
2021-11-12 12:16:28
1107
原创 Vue的生命周期和钩子函数详解
beforeCreated：组件实例创建前特点：在此之前获取不到 data 数据 以及methods 中的方法created：组件实例创建后特点：可以访问data 中的数据 和methods 方法 一般这里写数据接口调用beforeMount挂载前 el:'#app' 还没有挂载到vm 实例上页面还是上一次展示的页面，此时数据渲染出来的模板已经在浏览器的内存中 ，但是还没有替换到页面上mounted挂在后此时浏览器内存中的dom结构 已经挂...
2021-11-04 11:33:50
118
原创 数组去重的几种办法
var arr = [11, 2, 11, 2, 3, 3, 4, 8, 6, 7]; //将数组的每一个元素依次与其他元素做比较，发现重复元素，利用数组方法splice()删除重复元素 //两个循环遍历判断他们两个的数字是否相等，跟排序差不多，就是拿第一个数依次和后面的数进行 //比较，如果相等就删除他 for(var i = 0;i<arr.length-1;i++){ for(var j = i+1;j<arr.length;j++){ ...
2021-10-14 08:24:23
432
原创 JavaScript多方法获取鼠标位置、元素的宽高、元素的位置，以及他们的主要作用详细说明
获取鼠标的位置鼠标对象事件 说明 e.pageX 返回鼠标相对于文档页面的x轴坐标 e.pageY 返回鼠标相对于文档页面的y轴坐标 e.clientX 返回鼠标相对于浏览器窗口可视区的x轴坐标 e.clientY 返回鼠标相对于浏览器窗口可视区的Y轴坐标 e.screenX 返回鼠标相对于电脑屏幕的X轴坐标 e.screenY 返回鼠标相对于电脑屏幕的Y轴坐标 获取元素的宽高属性 方法 element.offsetWi
2021-09-05 16:09:05
347
原创 利用动画效果制作简易花落效果
首先我们需要动画效果如下： function animate(ele, obj,callback) { for (let attr in obj) { //ele是获取的标签名(div)，attr获取的是属性值(left)，l就是标签名的属性值(div.left) let l = getStyle(ele, attr) //获取初始位置 ...
2021-09-04 20:48:15
190
原创 js制作简易秒表效果详细讲解、开始、暂停与结束（定时器制作和时间戳制作）
首先，css和html <section> <div class="minute"></div> <div class="second"></div> <div class="mill"></div> </section> <button class="start">开始</button> <butto
2021-09-03 14:36:32
1453
1
原创 DOM总结
文档对象模型（Document Object Model，简称DOM）1.获取页面元素方法根据iddocument.getElementById（） 根据标签 getElementByTagName（） h5新增document.getElementsByClassName('类名') h5新增 document.querySelector('选择器')根据指定选择器返回第一个元素 特殊元素document.body //返回body元素对象 特殊元...
2021-08-29 20:20:50
147
原创 鼠标事件，键盘事件，表单事件，浏览器事件
事件类型 事件 备注 鼠标事件 click 当鼠标左键点击 mousedown 左键按下 mouseup 左键抬起 contextmenu 右键单击 dblclick 当鼠标双击时 mouseover 鼠标放上去 mouseout 鼠标离开 mouseenter 鼠标放上去 mouseleave 鼠标离开 mousemove 鼠标移动事件.
2021-08-26 21:39:44
93
原创 js获取下标的方法
https://upload-images.jianshu.io/upload_images/12363089-4239109173c1a27d.gif?imageMogr2/auto-orient/strip|imageView2/2/w/644/format/webp
2021-08-24 20:44:16
4395
2
原创 js事件委托（代理，委派）
事件委托：事件委托也成为事件代理，在jquery里面称为事件委派事件委托的原理不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上 ，然后利用冒泡原理设置每个子节点案例：给ul设置点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器当代码中有多个li的时候，我们不需要给每个li创建点击事件 ，我们只需要给父元素一个点击事件<ul> <li>知否知否&.
2021-08-20 15:27:10
129
原创 js 删除节点小案例
node.removeChild(child) //从DOM中删除一个子节点，返回删除的节点先写HTML <button>删除</button> <ul> <li>德玛西亚</li> <li>艾欧尼亚</li> <li>扭曲丛林</li> </ul>获取按钮和ulvar b...
2021-08-16 15:03:56
168
原创 表格 隔行换色效果（js）
当我们鼠标滑过表格的时候，表格里面的行会发生颜色的变化先设置html 和css样式（这里就不展示了）我们先获取tbody里面的所有的tr对象var tr = document.querySelector('tbody').querySelectorAll('tr')然后利用循环获取到每一个rt对象.bg{ background: pink; }for (var i = 0; i <= tr.length;...
2021-08-13 20:59:48
158
原创 js的排他思想案例
我们想要当我们点击按钮时，当前的按钮变成粉色，其他的按钮恢复初始颜色<button>按钮1</button><button>按钮2</button> //html样式<button>按钮3</button><button>按钮4</button><button>按钮5</button>然后再获取元素//获取元素var btn = docum...
2021-08-12 19:32:23
183
原创 淘宝点击关闭二维码
<style> div{ width: 100px; height: 100px; margin: 100px auto; /* background-color: red; */ position: relative; } span{ font-size: 30px; ...
2021-08-11 19:22:30
167
原创 根据时间更改照片和问候语（js）
<style> img{ width:200px}</style> <body> <img src="images/s.gif" alt=""> <p>上午好</p> <script> var img = document.querySelector('img') //获取事件源 var p = document...
2021-08-10 22:52:35
126
原创 js编写9*9乘法表。
想要编写9*9乘法表 ，需要两个循环。var str = ''; //声明一个空字符串for(var i = 0;i <= 9;i++){ //外层循环，因为9*9乘法表一共有9 行；所以外层循环有9 次 for(j = 0; j <= i; j++){ //里层循环从一开始，最大就是‘i’的值 str += j + '*' + i +'=' + j*i + '\t'; } str= str + '\n' //每循环一次代码 换一次行}
2021-08-09 20:58:25
211
原创 html ico实现
ico就是我们浏览网页上面的小图标需要准备一张照片 名字为favicon.ico然后再head中添加<linkrel="icon"href="favicon.ico">如果想要获取去他网站的ico 仅仅需要再网站的后面添加/favicon.ico即可...
2021-08-04 20:16:00
271
原创 css多列效果
主要作用是使多行文本进行分列1column-count：分栏的个数 很明显中间加了分割2column-width分隔栏的宽度3column-gap 分隔栏的间隔4column-rule5 column-span：all/none 设置或检索对象元素是否横跨所有列。6column-fill设置或检索对象所有列的高度是否统一（目前大部分浏览器尚未支持） auto：列高度自适应内容 balance：所有列的高度以其中最...
2021-08-04 19:59:54
64
原创 用动画效果制作旋转相册
需要了解的知识点：动画animation景深perspective基点transform-origin架构让整个架构在网页的中间并设置宽高给每个div设置一个基线 （设置-600是为了接下来让照片始终绕着中间的轴旋转）给盒子设置宽高和定位接下来就是给每一个盒子设置位置 让他朝z轴位移600px（为了让他一直围绕中间的基点旋转，跟上面的-600抵消）第一个照片不需要绕y轴旋转 每一个相隔30度以此类推然后再添加动画效果...
2021-08-02 21:12:55
132
原创 用css3 3d效果做一个立体盒子
想要做立方体的盒子 需要了解几个知识点旋转 transform：rotate基点的设置transform-origin3d设置transform-style：preserve-3d移动：transform：translat
2021-07-30 20:00:36
1519
原创 css3属性 渐变、
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gr.
2021-07-29 20:27:36
86
原创 html5 新增属性
1结构标签section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分； article：特殊独立区块，表示这篇页眉中的核心内容； aside：标签内容之外与标签内容相关的辅助信息； header：某个区块的头部信息/标题； hgroup：头部信息/标题的补充内容； footer：底部信息； nav：导航条部分信息 figure：独立的单元，例如某个有图片与内容的新闻块。2表单标签email：必须输入邮件； url：必须输入url.
2021-07-28 21:02:19
68
原创 css的选择器
1 基本选择器：* 通配符 ：给所有的添加属性； class 选择器 ：必需在元素中定义class属性 .class值； id 选择器：必需在元素中定义id值 #id值； 元素选择器： 标签选择器 标签名； 群组选择器：选择器中间用逗号分开，有相同属性的元素可以放在一起 ，减少代码量2 层次选择器：包含选择器（后代选择器） E F 选择匹配的F元素；且匹配的F元素被包含在 E元素内； 子选择器 E>F 选择匹配的F元素且匹配的F元素是所匹配的E元素的子元素（选择的仅仅只有自己的..
2021-07-27 19:35:21
240
原创 弹性盒子 （子元素的设置）续
首先来看第一个属性1 order指定子元素的顺序看效果（很明显 第一个盒子跑到了第五个盒子的位置上，剩下的盒子 会依次跟进）2{flex-grow: 2 子元素的延伸比例效果（他会占据两个盒子的宽度）3flex-shrink: 2收缩比 正好与延伸比相反4 flex-basis: 200px （子项目的基本宽度）效果5align-self:子元素垂直对齐auto 默认效果lex-start 我们先把高度都去掉给第一个...
2021-07-26 21:09:49
462
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人