- 博客(109)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 函数防抖和节流
最后，匿名函数内部的 func 的调用方式如果是最普通的直接执行 func() ，那么 func 内部的 this 必然指向 window ，虽然在代码简单的情况下看不出什么异常（结果表现和正常一样），但是这将会是一个隐藏 bug，不得不注意啊！我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。
2024-10-24 15:34:29
18
原创 原生js写气泡卡片
2、点击空白处收起气泡卡片，点击卡片内部则不需要收起。可在卡片上悬停时，设置变量，点击空白处根据变量判断是否需要收起卡片；在react项目中，表格中插入气泡卡片，由于表格数据较大，导致state状态控制的卡片卡顿，所以启用原生js。3、addEventListener监听方法，内部监听不到状态和变量，可用ref解决。效果：鼠标悬停，显示气泡卡片，点击，气泡卡片收起，显示另一个气泡卡片。1、鼠标悬停气泡需要防抖；
2024-10-24 15:18:36
127
转载 原生JavaScript实现动画
注意事项：在使用这些方法创建动画时，需要注意的是，如果在循环中进行大量的计算或操作，可能会导致动画变慢。动画与时间关联：在创建动画时，一个常见的问题是动画的速度会受到代码执行速度的影响。requestAnimationFrame()：这是一个更现代的动画API，它可以让浏览器在下次重绘之前调用你传入给它的回调函数来更新动画。淡入淡出动画：这是一个简单的淡入淡出动画效果，使一个元素在一定时间内逐渐显示或隐藏。匀速动画：这是一个简单的匀速动画效果，使一个元素在一定时间内匀速移动到指定位置。
2024-10-24 15:06:15
48
转载 react性能优化篇之useCallback的使用场景及其深度解读
useCallBack不要每个函数都包一下，否则就会变成反向优化，useCallBack本身就是需要一定性能的useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变useCallBack需要配合React.memo使用作者：工边页字链接：https://juejin.cn/post/7107943235099557896来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。...
2022-08-26 10:12:45
16302
8
原创 点击div、span、p等文本标签时隐藏光标的方法
/* 隐藏鼠标点击这些元素时出现的光标 */div, span, p { caret-color: transparent;}
2022-03-04 13:26:45
1216
转载 修改bootstrapTable(refresh)时候刷新的请求参数
monthPlanTable.getTableObj().bootstrapTable('refresh')默认请求数据{"sortOrder":"ASC","pageSize":10,"pageNumber":1}有时候跟我们后台接口参数名称有点区别，需要重新设置，方法如下：monthPlanTable.getTableObj().bootstrapTable('refresh',{ query: {pageSize: 12,pageNum:1,yearPlanId:yearPlanId}})
2022-03-04 13:24:12
1296
原创 js给元素添加css样式，加important不生效问题
需要在js里设置css样式，加important，发现并不生效，甚至样式都没有加上：// 点击事件 myChart.on('click', function(params) { var color = params.color; var id = params.data.id; $(`tr[data-uniqueid="${id}"]`).css('background', color+'!important'); })后来发现这样写是正确的：// 点击事件.
2022-01-24 13:30:11
2643
原创 iframe父子页面互相调用方法、获取变量、获取元素
每次iframe父子页面交互的时候总是现查，总也记不住，所以今天来详细记载一下。以下均为jquery 写法。1、iframe子页面调用父页面（1）方法parent.func()（2）变量parent.value（3）jquery元素$("div",parent.document)2、父页面调用iframe子页面（1）方法$("#childrenIframeId").eq(0)[0].contentWindow.func();（2）变量$("#ch
2021-12-22 09:34:16
3937
转载 销毁iframe
读到篇文章，mark一下。iframe src不设置为about:blank，内存不会释放掉，还必须用 iframe.document.write(''); 这样才能将内容清空但是这样处理之后任然会有500-1000K左右的内存残留，这就是ie6的iframe bug，动态创建的iframe总会耗费掉一些内存。function clearIframe(id){var el = document.getElementById(id),iframe = el.contentWind
2021-12-17 15:59:13
3722
转载 JS 获取浏览器窗口大小
常用:JS 获取浏览器窗口大小// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;// 获取窗口高度if (window.innerHeight)winHeight = window.innerHeight;els
2021-11-24 13:21:56
8192
原创 用html自定义横向条形图
// 进度条图表function progressCharts(interfaceCharts, list) { var html = '<div id="progress_inner" class="progress-inner">', artArr=[], max=0; // 获取最大值 for(var i=0; i<list.length; i++) { artArr.push(list[i].art); } max = Math.max.apply(.
2021-10-25 10:46:31
1153
原创 echarts 在markpoint气泡里显示的最大值加上单位
markPoint: { data: [ { type: 'max', name: 'Max' }, { type: 'min', name: 'Min' } ], label: { normal: { formatter: function(param) { return (.
2021-10-25 10:40:58
822
原创 echarts图例过长截断加省略号，并增加title
legend: { show: true, data: legendArr, type: 'scroll', orient: 'vertical', left: 10, top: 300, // selectedMode: 'single', formatter: function (name) { // if (!name.
2021-08-17 14:29:47
1159
原创 echarts图例完全自定义（不用自带的图例）以及点击某一个图例只显示当前折线的功能
1，主要问题图例又多又长，如下图，echarts上的图例过多时是有分页，但是我这个分页又太多，看最后一条要点击好久，所以想着有滚动条方便一些。而且点击某一个图例只显示当前的折线，取消某一条的点击时展现左右折现。下面不多说，直接上代码吧，主要是应用legendselectchanged和chart.dispatchAction，大家可查看官网。2，代码<!DOCTYPE html><html lang="en"><head> <meta.
2021-08-17 14:19:43
2849
1
原创 echarts图悬浮窗数据自定义
tooltip: { trigger: 'axis', enterable:true, //鼠标是否可进入提示框浮层中 confine:true, //是否将 tooltip 框限制在图表的区域内 // alwaysShowContent: false, //是否永远显示提示框内容 .
2021-08-04 16:33:11
1040
转载 echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts，当然也被其中的各种属性整的头大，记录一下其中遇到的问题。tooltip：鼠标悬浮时显示的提示框。今天想要记录的是【自定义提示框的内容】，如下图，鼠标悬浮时提示框内显示的内容格式为：年份 类型 <br> 装机容量：数据 单位<br> 增长率：百分比，那么如何才能自定义出来咱们想要的效果呢，代码如下： 1 2 3 4 5 6 7 8 9 10 11
2021-08-04 16:27:19
6481
转载 git | 修改分支名字
假设分支名称为oldName想要修改为 newName1. 本地分支重命名(还没有推送到远程)git branch -m oldName newName2. 远程分支重命名 (已经推送远程-假设本地分支和远程对应分支名称相同)a. 重命名远程分支对应的本地分支git branch -m oldName newNameb. 删除远程分支git push --delete origin oldNamec. 上传新命名的本地分支git push origin..
2021-07-20 10:22:35
136
转载 [git] 已经push的commit如何修改message
背景在使用git提交代码的时候，可能会出现message写错的状况，若是此时commit已经push到远程服务器了，修改起来就比较麻烦了。git下面整理了一下，修改历史中某几回commit的message的通用办法。服务器命令如下修复方式中，总共涉及这些命令，spa$ git log$ git rebase -i HEAD~5$ git commit --amend$ git rebase --continue$ git push -f注：在修复历史commit me
2021-07-12 16:20:07
2581
1
原创 js根据多个查询条件筛选数据
// 根据查询条件筛选数据function getJsonObj(params,dataArr) { var newArr = dataArr.filter(function(p) { var isFlag = false; for(key in params){ if(params[key] == ""){ isFlag = true; }else{ isFlag = params[key] == p[key]; } .
2021-07-12 13:08:48
916
原创 记录window系统命令
之前因为要下载低版本的谷歌浏览器做测试，不小心下了流氓安装包，捆绑了一大批流氓软件。卸载后还自动下载，循环往复，搞得我很崩溃……由于实在不想重做系统，于是我痛下决心要解决它们。以下分享我和流氓软件的对决。...
2021-07-07 13:54:46
96
原创 js正则表达式匹配任意字符（包括换行符）
相匹配html注释行中间的注释信息(<!--注释注释注释-->)，一开始是这么写的：let regExp=/\<\!\-\-(.*?)\-\-\>/g; 死活匹配不上，后来经过查找是发现注释中有换行符，没有被匹配。发现JavaScript中点号不匹配换行符。所以把点号换成[\s\S]就可以啦！let regExp=/\<\!\-\-([\s\S]*?)\-\-\>/g; ...
2021-07-07 13:43:52
3066
原创 chrome浏览器无法携带cookie的跨域问题解决
由于项目需要，不能在后台配置解决跨域，所以只能在浏览器上下手，着实折磨了我好一阵子。1. 问题描述平台跳转其他平台页面，并自动登录浏览器： chrome2. 解决方法 2.1 经查阅资料, chrome浏览器有跨域拦截，即sameSite。不同域下无法携带cookie。解决方法为在谷歌浏览器地址栏中输入chrome://flags/，将关于sameSite的属性设置为disabled，重启浏览器即可。这是针对80版本以上的chrome浏览器。 2.2...
2021-06-22 13:43:16
6304
3
原创 css文本超出宽度，省略号显示（包括展现两行）
// 一行.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}// 两行.ellipsis2 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; .
2021-06-15 10:21:39
141
1
原创 js给div赋值时，值中含有html标签导致的问题
1，问题描述let value = '<a>.......</a>';$('div').taxt(value);// 期望展现// <a>.......</a>// 实际展现// .......html将a标签识别为标签，导致展现形式不是期望值。2，解决方法将“<” 和 “>” 进行转义，即可。如有需要，也可转义双引号。如下代码：let titleStr = value.replace(/</g, '&a
2021-05-14 14:41:26
328
转载 js获取当前时间的年月日时分秒以及时间的格式化
1.获取当前时间var myDate = new Date();2.获取时间中的年月日时分秒myDate.getYear(); // 获取当前年份(2位)myDate.getFullYear(); // 获取完整的年份(4位,1970-????)myDate.getMonth(); // 获取当前月份(0-11,0代表1月)myDate.getDate(); // 获取当前日(1-31)myDate.getDay(); /
2021-05-14 11:30:30
3893
原创 js 复制文本框内容
ElementObj.select();//选中input框或textarea文本域的内容document.execCommand("Copy");// 执行浏览器复制命令说明：1，ElementObj为输入框或文本框的js对象；2，只能复制 input 或 textarea 的内容，div等元素内的文本不可复制，如果想要复制的话，可以将内容赋值到隐藏文本域中。...
2021-05-14 11:24:39
718
原创 JS中switch case，多个case对应同一操作的写法
let paramArrayPOPParam = 0; switch (tabType) { case 'list_selRefOppPop': paramArrayPOPParam = 1; break; case 'list_selRefTranPop': // 多个case对应同一个操作 case 'list_selRefSrvPop': case 'list_selRefFuncPop': paramArrayPOP..
2021-04-25 16:14:34
1856
原创 tab页过多，展现按钮可左右移动tab页
1，结果如下图，tab太多，一行放不下，右侧展现左右按钮，鼠标移上tab页可左右移动2，代码/** * 功能按钮过多时，可左右移动 * @param {*} id 按钮区域id * @param {*} dom 按钮元素 * @param {*} btnclass 按钮样式 * @param {*} mp 每个按钮需要增加的宽度 * @param {*} n 隐藏按钮增加的个数 */ function btnShowOrHide(id, dom, btnclass='', m.
2021-04-22 15:12:41
1923
原创 echarts图 宽高自适应
let chartDom = document.getElementById(options.id);let myChart = echarts.init(chartDom);// 根据数据计算高度，宽度let autoHeight = numArr.length * 30; //每个节点高度设为30let autoWith = numLevel * 180; //每个层级宽度设为180//重新渲染myChart.resize({height:autoHeight, width: auto.
2021-04-22 09:25:21
325
原创 echarts 解决浮窗被遮挡
1，问题如下图，echarts 鼠标移上去展示的浮窗，超出容器时被遮挡。2，解决办法tooltip: { //提示信息 trigger: 'item', triggerOn: 'mousemove', confine: true //解决浮窗被截断问题 },3，官网解释4，最终效果...
2021-04-22 09:12:48
3852
2
原创 jquery 判断元素是否显示隐藏
1. 隐藏方式是通过css的 display:none || block实现的//隐藏if( $("div").css("display")==='none')//显示if( $("div").css("display")==='block')2. 隐藏方式是通过其他方式实现的，包括display: none ||block// 判断是否隐藏$("#div").is(":hidden"); //判断是否显示$("#div").is(":visible")...
2021-04-20 13:47:50
1824
原创 echarts 树状图
// 树结构function creatTreeCharts(options) { // 获取参数 options = this.getOptions(options); // 初始化树 this.initTree(options);}creatTreeCharts.prototype.getOptions = function(options) { // 参数 options = $.extend({}, { id: 'main', menuFloor.
2021-04-13 15:52:38
1197
原创 jquery 绑定未来元素事件
1，用js动态生成dom元素很常见，那么给这种动态生成的元素如何绑定事件呢？首先排除click，是肯定不好用的。下面来介绍集中方法。1) 直接行内绑定<div onClick="doSomething()"></div>2) delegate先看下官方解释$('body').delegate('div','click',function(){ // do something……})3）onon绑定结合了click和delegate二者的功
2021-03-16 15:53:34
1098
原创 js 深拷贝和浅拷贝
一、先看个例子这个问题相信大家都遇到过，首先定义个对象obj，然后在定义个对象obj2，将obj赋值给obj2，本意是想不破坏原对象obj，而对obj2的数据进行一些列操作。然而事与愿违，当我操作obj2.b.c = 3的时候，打印obj，发现obj的数据也被改了。这将导致一些列问题。这是因为var obj2 = obj，是浅拷贝。二、深拷贝和浅拷贝的区别浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；深拷贝（deep copy）：复
2021-03-16 15:13:02
157
转载 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。jQ
2021-03-12 16:41:25
170
原创 js new操作符都做了哪些事情
1，先来看段代码function Fn() { this.a = 1;}let fn = new Fn();console.log(fn)输出为：我们都知道 fn 是 new Fn 出来的 Fn 的实例对象。那么在这个过程中，new 到底做了什么呢？2，我们先来看我们已知到了什么1）fn 是一个对象2）fn.__proto__ === Fn.prototype3）构造函数 Fn 中的this指向为它的实例 fn4）返回这个对象那么这些已知点，就是 .
2021-03-12 15:26:52
893
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人