- 博客(33)
- 收藏
- 关注
RSS订阅原创 前端个人笔记
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关注的人