- 博客(19)
- 收藏
- 关注
RSS订阅原创 时间格式化（昨天、前天）
时间间隔超过一年，显示 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
270
原创 vue3 + element plus实现树状表格无线层级拖拽功能
通过js使element-plus提供的table树状表格具有拖拽排序的能力
2022-04-08 18:25:20
6448
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
215
原创 虚拟滚动列表（动态高）
描述：动态高度需要一个positionData的数组先行存储全部数据量的位置信息。第一次初始化由于不知道cell的具体高度有多少，所以需要先自行预估一个大致的高度cellHeight，然后全部存储在positionData中。存储完成后获取可视区域第一行要渲染的数据的对应索引，即可开始渲染数据。数据渲染完成后，由于是预估的高度，使用的绝对定位导致cell互相重叠，所以在updated生命钩子中，对存储的位置信息positionData数组进行重新校对。注意点：（1）在html中，cell使用了绝对定位，
2021-12-15 11:30:32
2234
原创 虚拟滚动列表（固定高）
描述：滚动列表数据量庞大的时候（如一万条数据），会在页面创建一万个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
1186
原创 图片懒加载实现
实现原理：当前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
262
原创 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
615
原创 群聊可@输入框
简介：群聊@他人的输入框实现。使用h5新增的contenteditable属性，使标签拥有可供输入的能力。对输入框的光标位置获取使用window.getSelection()实现，可查看文档。@弹框支持键盘上下按键对列表进行滚动选择，支持输入文字对列表进行数据筛选。按下enter确认选中后，依赖canvas将选择的名字进行绘画，生成一张base64的图片以供预览。注：键盘上下操作滚动列表可参考另一篇文章，键盘上下选择列表项html<!-- 编辑区域 --> <div clas
2021-11-29 21:35:23
436
原创 通过js下载图片或文件
url链接一般由后台提供注: download属性只有在同源的情况下才会生效( 项目部署地址和接口地址在一个服务器上 )
2021-09-16 16:56:40
2112
原创 键盘上下选择列表项
效果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
457
原创 实现列表拖拽排序
使用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
1500
原创 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
98
原创 字符串常见API
字符串恒定性 : 字符串不可以被修改 , 一般调用字符串API的时候使用新的变量来接收charAt()—返回字符串中指定的index位置的字符 , index从0开始语法： str.charAt(index);同理 : str[ index ]; 常用charCodeAt()—返回字符串中指定的index位置的字符对应的ASCII字符编码, 不传默认第一位语法： str.charCodeAt(index);indexOf()—从字符串的开头位置开始向后查找，返回下标数值，如没..
2021-07-19 19:09:12
843
原创 数组常见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
274
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人