- 博客(19)
- 收藏
- 关注
原创 时间格式化(昨天、前天)
时间间隔超过一年,显示 YYYY-MM-DD HH:mm,如 2023-01-01 09:20。时间间隔超过 2 天,不超过一年,显示 MM-DD HH:mm,如 01-01 09:20。时间间隔为 1 天,显示 昨天 HH:mm,如 昨天 09:20,时间间隔为 2 天,显示 前天 HH:mm,如 昨天 09:20,时间间隔为今天,显示 HH:mm,如 09:20,描述:以最近的时间间隔来格式化时间。
2023-04-15 17:33:13
298
原创 vue3 + element plus实现树状表格无线层级拖拽功能
通过js使element-plus提供的table树状表格具有拖拽排序的能力
2022-04-08 18:25:20
6586
11
原创 promise源码实现
promise实现初体验<script> // 实现微任务执行 let myNextTick = (function() { let cbCellect = [] let num = 0 function fn() { let copy = cbCellect.slice() cbCellect = [] copy.forEach(cb => { cb() }) } let o
2022-01-13 20:51:50
219
原创 虚拟滚动列表(动态高)
描述:动态高度需要一个positionData的数组先行存储全部数据量的位置信息。第一次初始化由于不知道cell的具体高度有多少,所以需要先自行预估一个大致的高度cellHeight,然后全部存储在positionData中。存储完成后获取可视区域第一行要渲染的数据的对应索引,即可开始渲染数据。数据渲染完成后,由于是预估的高度,使用的绝对定位导致cell互相重叠,所以在updated生命钩子中,对存储的位置信息positionData数组进行重新校对。注意点:(1)在html中,cell使用了绝对定位,
2021-12-15 11:30:32
2246
原创 虚拟滚动列表(固定高)
描述:滚动列表数据量庞大的时候(如一万条数据),会在页面创建一万个DOM元素,而页面的DOM太多会对页面的渲染造成很大的负担,出现页面卡顿等情况,严重的减少用户体验感,所以需要使用虚拟滚动列表,对长列表功能模块进行优化。在head中导入vue<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>css* { margin: 0; padding: 0;}.container
2021-12-14 11:45:39
1201
原创 图片懒加载实现
实现原理:当前img标签距离滚动盒子的距离(offsetTop) 小于 (滚动盒子已滚出去的距离(scrollTop)+ 滚动盒子的可视高度(clientHeight)),即可认为img标签进入了盒子的可视区域之内,在此时对img标签的src属性赋值,即可加载图片注:只有img标签的src属性改变了,才会发送资源请求,加载新的图片* { margin: 0; padding: 0;}.box { width: 280px; height: 590px; border: 2px s
2021-12-06 20:15:25
267
原创 web worker
概况描述:为js创造多线程环境。在主线程运行的同时,worker线程在后台运行,两者互不干扰。等到worker线程完成计算任务,再把结果返回给主线程。好处是耗时比较久的任务,由worker线程来完成,主线程在渲染交互页面时就会很流程注意点a) 同源限制描述:由worker线程运行的js文件,必须与主线程所在文件同源b) DOM限制描述:worker线程无法访问网页的DOM对象、document、window和parent等。可以使用navigator和location对象c) 通信联系描述.
2021-12-06 16:23:16
616
原创 群聊可@输入框
简介:群聊@他人的输入框实现。使用h5新增的contenteditable属性,使标签拥有可供输入的能力。对输入框的光标位置获取使用window.getSelection()实现,可查看文档。@弹框支持键盘上下按键对列表进行滚动选择,支持输入文字对列表进行数据筛选。按下enter确认选中后,依赖canvas将选择的名字进行绘画,生成一张base64的图片以供预览。注:键盘上下操作滚动列表可参考另一篇文章,键盘上下选择列表项html<!-- 编辑区域 --> <div clas
2021-11-29 21:35:23
437
原创 通过js下载图片或文件
url链接一般由后台提供注: download属性只有在同源的情况下才会生效( 项目部署地址和接口地址在一个服务器上 )
2021-09-16 16:56:40
2137
原创 键盘上下选择列表项
效果html<ul class="father"> <li class="bgc">0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li>
2021-09-16 16:40:08
467
原创 实现列表拖拽排序
使用h5新增的拖拽属性draggable实现多个列表各自拖拽排序功能,多个列表之间互不影响。拖拽过程可见元素变动,而不是单纯等拖拽完再更新domhtml<p class="title">列表一</p><ul> <li> <span class="drag">1</span><span> asdasdasdasd</span> </li> <li&
2021-08-28 20:14:35
1517
原创 Math对象常见API
Math.min()—返回一组数据的最小值语法:Math.min(num1,num2…numN)Math.max()—返回一组数据的最大值语法:Math.max(num1,num2…numN)Math.ceil()—向上取整,即返回大于num的最小整数语法: Math.ceil(num);Math.floor()—向下取整,即返回小于num的最大整数语法: Math.floor(num);Math.round()—将数值四舍五入为最接近的整数语法: Math.round(num);Ma.
2021-07-19 19:59:59
104
原创 字符串常见API
字符串恒定性 : 字符串不可以被修改 , 一般调用字符串API的时候使用新的变量来接收charAt()—返回字符串中指定的index位置的字符 , index从0开始语法: str.charAt(index);同理 : str[ index ]; 常用charCodeAt()—返回字符串中指定的index位置的字符对应的ASCII字符编码, 不传默认第一位语法: str.charCodeAt(index);indexOf()—从字符串的开头位置开始向后查找,返回下标数值,如没..
2021-07-19 19:09:12
851
原创 数组常见API
数组三要素 : 元素 , 下标 , 长度创建数组的基本方式有两种方式一:使用Array()构造函数 语法: var colors=new Array();注:小括号可直写数组的项目数量var colors=new Array(5);或者数组包含的具体值 var colors=new Array(1,2,3,5,0,10);方式二:使用数组字面量表示法 语法: var cols=[10,15,12,3,5,6,1];var cols=[];两种创建数值的方式不同之处在于 : new ..
2021-07-19 17:03:28
287
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人