如何选择第一个元素 潜意识第一反应就是 first-child: 然:表示在一组兄弟元素中的第一个元素 白: 只能选中第一个元素 第二反应就是 first-of-type: 然: 表示一组兄弟元素中其类型的第一个元素 白: 只能选中同类元素的第一个 那么如何选择一类(class 选择器)中的第一个原理:通过兄弟选择器第二个元素到结束,然后取非 123.class:not(.class ~ .class) { 2023-11-10 CSS #CSS
iframe在被移除的时候未触发beforeunload事件 原因分析beforeunload 事件仅当浏览器窗口关闭或者刷新时才会触发 如何监听 iframe 移除可以使用 unload/pagehide 事件代替 unload 事件当文档或一个子资源正在被卸载时触发 pagehide 事件当浏览器在显示与会话历史记录不同的页面的过程中隐藏当前页面时触发 2023-11-05 HTML #HTML #Iframe
由Array.reverse引发的血案 - Vue 起因项目部署后访问页面,竟然直接卡死 ! 原因Array.reverse() 竟然直接修改原数组!然后 Vue 里面便形成了 监听变化 => 修改元素组 => 变化 => 监听变化 的无限循环中! (一直以为是返回新数组!所以排查到是因为 reverse 调用引起的问题时,大吃一惊!) 2023-09-20 Vue #Vue
Echarts使用setOption的合并方式 合并方式普通合并触发条件: 未设置 notMerge 参数 未设置 replaceMerge 参数 合并策略对于一种类型的组件(如:xAxis, series),新来的 option 中的每个“组件描述”(如:{type: ‘xAxis’, id: ‘xx’, name: ‘kk’, …})会被尽量合并到已存在的组件中。剩余的情况,会在组件列表尾部创建新的组件。整体规则细节如下: 先依次对 o 2023-09-13 echarts #echarts
Vue中不展示Tooltip问题- echarts echarts 实例在 Vue3 中不能是一个响应式对象,否则提示框会显示不出来!可以使用 shallowRef 代替 ref ! 参考 https://blog.51cto.com/lenglingx/7050251 2023-09-12 echarts #echarts
如何在折线图上展示阈值 - echarts 核心是借助 echarts 的 visualMap 属性: 示例1234567891011121314151617visualMap: [ { dimension: 1, // 数据维度索引(可以将series中的data看做一个二维数组) seriesIndex: 4, // 对应series的索引值,通过该属性可针对多个不同的的数据项设置不同的条件表达 outOf 2023-09-05 echarts #echarts
画一个圆形进度条 - Canvas 大致思路不断绘制半圆弧(因为要形成间隔式透明线条效果),绘制两层,一层用作背景,一层用作进度条展示 代码如下:1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 2023-09-04 Canvas #Canvas
viewBox属性 - SVG 以下配置将以 100 大小的画图区域填充 200 大小的 svg 区域,就是指示在指定大小的 svg 容器中,展示那部分区域 123<svg width='200' height='200' viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 2023-08-31 SVG #SVG
使用点动态绘制一个圆 - WebGL 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210 2023-08-09 WebGL #WebGL
如何编写一个WebGL程序 - WebGL 如何编写一个 WebGL 程序 通过 canvas 创建 WebGL 绘图上下文环境 着色器创建(顶点着色器和片元着色器) 创建着色器 加载着色器代码(GLSL) gl_Position: 指定栅格位置 gl_FragColor: 指定栅格颜色 着色器代码编译 创建着色器程序 挂载顶点着色器 挂载片元着色器 链接程序 查找着色器变量位置(用来绑定状态数据) 创建缓冲区(用 2023-07-14 WebGL #WebGL