随笔分类 -  01-02. 前端工作中遇到的问题及解决

节流、防抖
摘要：节流： 让事件函数隔一段时间触发一次。（应用场景：比如onscroll等高频率触发的事件中） // 函数节流 var canRun = true; var timer = null; document.onscroll = function () { if (!canRun) return; // 阅读全文
posted @ 2021-07-28 15:59 真的想不出来 阅读(112) 评论(0) 推荐(0)
PM₂.₅ / 10⁴ 等等上标、下标如何直接打出来，前端必备（附加：特殊符号大全）
摘要：项目中遇到需要打出 PM₁₀ ，等上下标，觉得用 <sub></sub> <sup></sup> 比较麻烦，上网找了很久，功夫不负有心人。 下面素材可直接剪切复制使用。字体太小，为了能看清，我放大。 上标：N ¹²³⁴⁵⁶⁷⁸⁹⁰ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ʰ ʲ ʳ ʷ ʸ ˡ ˢ ˣ ª ʹ ʺ 阅读全文
posted @ 2019-10-11 14:19 真的想不出来 阅读(12086) 评论(0) 推荐(0)
第一次尝试 ArcGis
摘要：第一次在项目中尝试 ArcGis， 由于之前项目中就已经有了，这里基本是搬砖，没有 npm install 的过程。这里只是展示一些代码，让地图展现。 第一步： 当然是安装依赖啦，不过这次没涉及，以后补充。 第二步： 引入组件 第三步： 调用。（这里的ArcGis，被深度分装过，所以有些不太适用，慢 阅读全文
posted @ 2019-09-29 20:47 真的想不出来
突破 Chrome浏览器 限制字体大小不能低于12px的限制
摘要：1. 利用 transform：scale() 进行缩放 p: { font-size: 12px; -webkit-transform: scale(0.75); //缩小 } 2. 矢量图标签 <div style="font-size: 5px; width: 80px; height: 20 阅读全文
posted @ 2019-09-25 17:35 真的想不出来 阅读(1173) 评论(0) 推荐(0)
对后端返回的 html 标签不识别的解决办法
摘要：问题：后端返回的数据中包含了 html 标签（比如：<br/> 、 \n)，展现到页面的时候无法正确识别转化， 关键字：识别HTML标签、 解决：比如： <span style={{whiteSpace: "pre-wrap"}} dangerouslySetInnerHTML={{ __html: 阅读全文
posted @ 2019-09-12 10:24 真的想不出来 阅读(2519) 评论(0) 推荐(0)
[chrome]click事件会触发mouseleave
摘要：问题 这几天一直被一个很奇怪的问题困扰，就是在chrome上的点击事件会触发该dom的mouseleave事件，在IE 火狐浏览器都没有复现这种问题，不知道是不是chrome的一个错误，或者是一个特性。。 解决办法 在mouseleave方法中监听event，当relatedTarget为空时，阻止 阅读全文
posted @ 2019-09-04 16:06 真的想不出来 阅读(773) 评论(0) 推荐(0)
解决 display 和 transition 冲突的问题
摘要：问题： 既需要“显示、隐藏”’效果，也需要动画效果。此时使用了xxx.style.display = "none / block" 之后，我们发现 transition 动画效果就没有了。 解决办法一：用定时器（这种方法并不好） 解决办法二：用 visibility 属性代替 display sty 阅读全文
posted @ 2019-02-07 22:23 真的想不出来 阅读(1085) 评论(0) 推荐(0)