前端功能积累
西西同学不简单
要酷
展开
-
[React/JavaScript]使用html2Canvas将元素导出为PDF
【代码】[React/JavaScript]使用html2Canvas将元素导出为PDF。原创 2024-11-07 20:11:31 · 203 阅读 · 0 评论 -
WebSocket心跳机制(防止断联)的实现
(2)heartbeatCheck() 先清除定时器,然后创建30s定时器(倒计时)执行发送心跳的方法。(a)如果等待时间(10s)内收到了WebSocket推送来的消息,则认为连接仍然建立,重新开始间隔时间计时。(1)创建两个Ref存储定时器,一个定时器用于存储间隔时间及执行逻辑,一个定时器用于存储等待时间及执行逻辑。(b)如果没有收到消息,则认为连接已断开,发送关闭连接消息并重新建立连接。(3)heartbeatCheck() 执行的时机有两个,一个是开始连接的时候,一个是收到消息重置的时候。原创 2024-10-19 19:57:05 · 343 阅读 · 1 评论 -
[React/JavaScript/Css]手搓时间轴鱼骨图
2、时间轴分为一条线(base-line)和点位(degree-container),点位包括刻度(degree)、日期数字(num)和挂载在点位上的卡片。点位相对于线进行定位(上移,使刻度居于时间线上方),并逐步向右偏移相同的刻度(根据数据数量均分组件宽度)。4、通过添加鼠标滚轮事件修改缩放层级,时间轴放大transform: `scaleX(${scale})`,点位需同比缩小transform: `scaleX(${1 / scale})`,以保证时间刻度的大小不会变化。原创 2024-10-19 19:31:42 · 263 阅读 · 0 评论 -
统计浏览器页面停留时长
【代码】统计浏览器页面停留时长。原创 2024-07-23 20:28:43 · 193 阅读 · 0 评论