随笔分类 - javascript
摘要：js之列表转为树结构 原理： list.reduce 方法： children：子级数组名称id：数据idparentid：父级id字段名称 如果列表中字段名称不一致，需要修改方法中的这三个参数名。 list：列表数据rootvalue：父元素id字段第一级的默认值，一般为0或者null。根据数据传
阅读全文
摘要：js之转码（base64、ascii、十六进制、url） base64 npm install js-base64import { Base64 } from 'js-base64'; 编码： base64.encode("hello"); 解码： base64.decode("hello"); a
阅读全文
摘要：iframe之键盘事件监听 场景： 子页面中如果聚焦，页面会监听子页面的键盘事件，监听不到父页面和其他子页面的键盘事件 原理： 在父级别页面，获取到子页面的window，挂载监听事件 代码： <html> <body> <iframe id="if2" src="2.html" frameborde
阅读全文
摘要：js之形状补间算法 效果： 从一条线形变成另外一条线，计算其中的变化过程。 应用场景： 1.编写从矩形缓慢变化为圆形。 2.展示水位上升时候海岸线被淹没的过程。 原理： 1.将两条线个字按照长度平均分成1000份得到两个1000个点的数组。 2.两跳线生成的数组的点一一对应。 3.计算两个对应点中间
阅读全文
摘要：js之生成json文件 function saveJSON(data, filename){ if(!data) { alert('保存的数据为空'); return; } if(!filename) filename = 'json.json' if(typeof data 'object'){
阅读全文
摘要：ColorThief之获取图片主色 插件：ColorThief $ npm i --save colorthief 引用： <script type="text/javascript" src="../../dist/colorthief/dist/color-thief.min.js"></scr
阅读全文
摘要：jquery之表单加载图片并预览 效果： html： <input id="getImg" type="file" value="上传" onchange="changepic(this)"> <img src="#" id="img3" STYLE="display:none;width:120p
阅读全文
摘要：js之矩阵运算方法 一、方法 // 转置矩阵 function transpose(matrix) { let result = new Array(matrix[0].length).fill(0).map(arr => new Array(matrix.length).fill(0)); for
阅读全文
摘要：js之生成并下载txt文件 代码： downloadTxt(text, fileName){ let element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,'
阅读全文
摘要：h5之获取朝向和定位 定位： 通过h5中的getCurrentPosition()方法可以获取到移动设备定位的经纬度 function getLocation() { var that = this if (navigator.geolocation) { navigator.geolocation
阅读全文
摘要：浏览器兼容设置 1.谷歌浏览器关闭默认打开翻译提示 2.360浏览器默认打开极速模式
阅读全文
摘要：关闭google默认打开翻译提醒 在header中添加以下代码： 钻研不易，转载请注明出处~~~~
阅读全文
摘要：...args剩余参数用法 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。 语法 描述 如果函数的最后一个命名参数以...为前缀，则它将成为一个数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。 在上面的例子中，theArgs将收集该函数的第三个
阅读全文
摘要：js之向div contenteditable光标位置添加字符 原理： 在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。 当我们去点击一个输入框的时候，实际上它会产生一个选中对象-selection（就是我们可以看到的文字变成蓝色的那个区域），selection在火狐
阅读全文
摘要：js之split拆分字符串 1.单字符拆分 2.多字符拆分
阅读全文
摘要：js之拖拽事件 api：https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件，使用时在div上添加 draggable="true" 即可拖动该div 在拖动过程中，将激发多个事件，从而完成拖动 注意： 1.浏览器块（div等）默认禁
阅读全文
摘要：移动端自适应之flexible 作用：flexible的作用是使页面可以适配不同移动终端 原理：在页面html标签上添加style = "font-size: 36px;"样式，设置字体大小是屏幕宽度的十分之一。然后页面布局使用rem单位。 VUE:在vue-cli中需要使用lib-flexible
阅读全文
摘要：h5获取地理坐标 方法：h5自带获取地理信息的api api：navigator.geolocation.getCurrentPosition https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPositio
阅读全文
摘要：contains 之 点击元素外位置隐藏元素 api： contains 检测一个元素包含在另一个元素之内 详解：http://www.runoob.com/jquery/misc-contains.html 原理： 监听click事件，当点击时判断点击位置是否包含在目标元素内，若判断通过则隐藏 代
阅读全文
摘要：iframe之父子页面通信 1、获取 子页面 的 window 对象 在父页面中，存在如下两个对象 window.frames document.iframeElement.contentWindow 可以获取到 子页面 window 对象 既然拿到了 window 对象，那函数和DOM就到手了。
阅读全文