- 博客(33)
- 收藏
- 关注
原创 前端个人笔记
dt 定义项 装图片 (可以装任意元素)dd 描述项 装文本 (可以装任意元素,包括行内与块元素)form 表单元素 做数据交互table 表格 做数据展示address 倾斜 地址总结: 块元素独占一行支持width 和 height。
2023-04-16 15:29:53
162
原创 wavesurferjs+vue+ElementUi(音频标注案例)全网完整案例实现免费查看
waveserfurjs完整案例,音频标注功能(音频可视化频波图)代码免费查看,点击速进
2023-03-03 17:28:41
2041
11
原创 前端经典——todolist(html+javascript)
todolist项目可谓是前端学员的一个必修项目,各式各样的前端框架都可以从这个简单的小项目练起,在使用框架开发两年的时间呢,最近感觉对原生js的一些用法生疏的很,便借用这个基础小项目复习了一下js语言,同时也适用于刚接触前端的同学,下面就是一些示例图和代码,感兴趣的小伙伴来看看吧。
2022-09-22 18:40:20
1348
原创 倒计时效果动画(canvas仿雷达)
在直播平台中常常会出现各类限时竞速活动,最后五秒常采取动画来渲染紧张氛围,这里给大家展示的是仿雷达转圈的效果
2022-09-22 11:41:53
190
原创 Vue3.0
基础简介vue3.0版本于2020年9月18日晚11点半发布,更小、更快的全新体系不仅加强了typescript支持,开放了更多的底层功能,提高了可维护能力。更小:2.0采用的是面向对象编程的思想,3.0则采用函数是编程的思想,充分利用函数式编程组合大于继承的优势,采用函数式编程更利于逻辑功能的复用,webpack打包时更有利于tree-shaking,更利于代码的压缩,更利于返回值类型校验,压缩后的文件体积更小。更快:3.0修改了虚拟dom的算法(即diff算法 - 比对虚拟dom有没有变化);
2022-09-21 10:31:33
3387
原创 better-scroll使用总结
BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。<div class="wrapper"> <ul class="content"> <li>...</li>
2021-09-28 10:58:38
1027
原创 SVG —— 绘制进度路线
最近在工作中新接触到一个词叫svg,最开始呢以为单纯的是svga动效格式的简称,但是随着调查的深入,才发现这是一个世外桃源,话不多说,接下来就来看看这个新“视”界吧!前端常用动效实现手段:CSS3 transition、animation 针对dom元素操作Lottie => 直播状态,json格式动画文件Canvas动画 => 图标,部分活动画图requestAnimationFrame(svga) => 活动banner或礼物呈现效果javascript直接实现SVG(
2021-08-30 18:10:07
1324
原创 html5-canvas
canvas是一个标签,简单理解为一个有特殊功能的盒子标签,最好在标签上写上宽高属性和背景色,否则在页面上看不到效果。canvas 是一个二维网格,canvas 默认左上角坐标为 (0,0),可以通过translate(x,y)来更改原点坐标。注:在低版本浏览器中不兼容,需要提示用户绘制形式有三种:描边,填充和描边+填充。beginPath(): 清除当前所有子路径,以此来重置当前路径,重新规划一条路径。closePath(): 用于封闭某段开放路径。不是必需的,如果图形是已经闭合了的,即当前点
2021-05-31 11:26:58
386
原创 css画三角
css画三角#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}#triangle-down { width: 0; height: 0; border-left: 50px solid transpa
2021-04-09 11:17:04
75
原创 良好编码习惯养成助手——TS
js简单易上手灵活多变,既是优点,也是缺点,会为上线的代码埋下隐患,简单举“栗”子:let a;a = 10;a = '这是新值';在js中这样书写是不会报错的,因为js不会对函数的参数类型和个数进行检测,但在项目中如果我们所需的值仅只为数字进行运算如下:function sum(a, b){ return a + b;}console.log(sum(12, 34)) // 46console.log(sum(12, '34')) // 1234显然无论我们传数字还是字符串,编辑和
2021-03-26 17:54:52
570
1
原创 react总结笔记
前端框架———react一直都在用react,之前也有总结过一些东西,但都比较粗略!现在总结一些之前拉掉的东西,顺带自己也复习一下基础内容~前面写过的大家也可以参考一下,有什么不足或补充私信或评论区交流,共同学习生命周期hooksreact简版React起源于Facebook的内部项目,于2013年5月开源,主要用于构建UI,前端三大框架之一。特点:声明式设计、高效(虚拟dom,极大减少了dom交互)、灵活(可以与三方库很好的结合开发)、JSX(是JavaScript的扩展)、组件(构建组件
2021-03-25 15:22:30
149
原创 git指令小结
git clone 地址 //创建仓库git branch -a //查看本地与远程仓库分支git checkout -b 分支名 //新建分支git checkout 分支名 //切换分支git push origin 分支名 //创建分支后第一次推送测试文件时执行git add . //将所有文件添加到暂存区git status //查看状态git commit -m “描述” //添加描述文字git push //上传到远程仓库(有映射分支)git merge 分支名 //合并分
2021-03-25 14:21:59
90
原创 数组的reduce深解
数组—reduce数组的reduce方法和迭代方法(map、forEach、filter…)一样,都会对数组进行遍历,reduce的第一个参数得到的是计算后的效果。这个方法接受两个参数:要执行的函数,要执行的函数可传入四个参数,分别是:prev: 上次调用函数的返回值;cur: 当前元素;index: 当前元素索引;arr: 被遍历的数组。函数迭代的初始值let arr = [1, 2, 3, 4];let sum = arr.reduce(function(prev, cur
2021-03-24 11:11:29
161
原创 React新旧版本生命周期对比
React新旧版本生命周期对比❶ 过时生命周期:① componentWillMount② componentWillReceiveProps③ componentWillUpdate❷ 即将过时生命周期:(在新代码中我们应该避免使用它们)① UNSAFE_componentWillMount② UNSAFE_componentWillReceivePorps③ UNSAFE_componentWillUpdate❸ 新增生命周期① getDerivedStateFromProps②
2021-03-15 10:46:00
350
原创 nav滚动效果(子元素不换行布局方式)
nav滚动效果(子元素不换行布局方式)flex<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>div{ width: 100vw; height: 200px
2021-03-11 15:23:47
360
原创 简洁轻量的SVGA动效
简洁轻量的SVGA动效简介SVGA是一种动画格式,可以兼容安卓、ios和web,可以实现很多复杂的动画,避免了canvas来实现动画时的卡顿优化问题结合项目使用下载svgaplayerweb包import SVGA from 'svgaplayerweb'this.start = 'colorv/resource/ba27dd66524355aac0b5af17870977af.svga' // 不同动效路径this.start1 = 'colorv/resource/ffa8dbf
2021-01-27 16:59:15
1685
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人