随笔
关注
分享
扫一扫
文章平均质量分 56
墨语轩
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
类似 git 前端代码比对
类似于 gitee 选择 对比源和目标，然后获取两个版本的文件目录树，再根据选择的具体文件对比两个文件的内容，一般是对比源相对于目标的文件改动进行差异化展现，在内容上就是 增加、删除、变更。原创 2023-12-14 19:36:00 · 1876 阅读 · 0 评论 -
代码预览并语法高亮、增加行号
原理：highlight.js 将代码格式化以后，可以通过样式设定代码行高，然后计算代码总高度，再用总高度/行高 = 行数，最后生成行号。为什么不把每一行代码放入一个元素呢，因为 highlight.js 格式化后的代码是 span 标签字符组合，也不是使用一个元素包裹一行的，是通过类控制换行。如果需要将一行代码装入一个元素中，需要去了解 highlight.js 中的规则。`;});原创 2023-12-11 11:51:39 · 2938 阅读 · 0 评论 -
axios 用formData的方式请求数据
问题：传递数据的时候不是直接通过json的方式来传输的数据，二是通过formData的方式。axios 请求头设置，Content-Type。需求：使用axios库用来做http数据传输。原创 2023-09-10 21:35:32 · 2043 阅读 · 0 评论 -
JavaScript 实现文件下载并重命名
js给下载文件的链接重命名转载 2023-08-30 11:06:23 · 1111 阅读 · 0 评论 -
前端项目中代码格式化配置：eslint + prettier + stylelint + pre-commit
lint原创 2022-12-29 14:19:28 · 4812 阅读 · 3 评论 -
手写一个 instanceof
原型链代码：function instanceOf(left, right) { if (typeof left !== 'object' || left === null) { return false } while (true) { if (left === null) { return false } if (left.__proto__ === right.protot原创 2022-02-09 21:26:40 · 275 阅读 · 0 评论 -
JS 模拟 ping IP地址
测了一个可用的：function ping_ip (ip) { let img = new Image() let start = new Date().getTime() let isC = true let hasFinish = false return new Promise((resolve, reject) => { img.onload = function () { if (!hasFinish) { hasFinish =原创 2022-02-06 11:40:08 · 2192 阅读 · 1 评论 -
JS 对classList添加、删除、修改、替换
Element.classList是一个只读属性，返回一个元素的类属性的实时DOMTokenList集合。相比将element.className作为以空格分隔的字符串来使用，classList是一种更方便的访问元素的类列表的方法。语法：const elementClasses = elementNodeReference.classList;返回值elementClas...原创 2020-05-23 09:42:43 · 10238 阅读 · 0 评论 -
ztree插件中的拖拽使用
很多时候会用到树形结构来展示层级数据，有时候我们会用到拖拽效果该改变树结构中的层级数据首先设置配置项，必须配置edit：{enable:true}即开启编辑，然后只需要拖拽时需要禁用修改删除按钮，然后根据需要配置drag配置项，比如拖拽时是复制该节点到目标节点(isCopy)，还是将该节点移动到目标节点（isMove）。同级是否可以变换位置（prev,next）。如果允许将节点拖放成为目标节点...原创 2019-10-24 11:10:13 · 2477 阅读 · 1 评论 -
文件大小转换为对应的单位
给定一个文件大小转换为对应的单位大小，保留两位小数function transformUnit (size) { if (size < 1024) { return size + 'B' } else if (size < 1024 * 1024) { return (size / 1024).toFixed(2) + 'KB' } else if (size < 1024 * 1024 * 1024) { return (size / 1024原创 2022-01-10 19:56:35 · 528 阅读 · 0 评论 -
处理时间格式的工具类，毫秒转为剩余时间
1、处理时间格式的工具类定义一个时间格式相关的类，这个时间格式可以直接静态调用两个方法，一个是转换为两位数的时间格式(toTwoDigit)，另一个是将时间转为目标的时间格式(format)，里面的访问对应时间的方法定义为 get 方法，方便直接使用时返回结果class DateFormat { // 转为两位数格式的，如3 ->03, 9 -> -9 也可以用padStart static toTwoDigit (num) { return num < 10原创 2022-01-09 23:19:38 · 1122 阅读 · 0 评论 -
html2canvas 截屏遇到的问题
业务场景，需要在页面上点击按钮截取全屏，中间有一个 antv/l7 绘制的地图，要一起截下来。遇到两个问题:1.截下来的图里面没有地图2.保存到本地的时候，浏览器显示网络错误下载失败原创 2021-09-12 14:45:52 · 2170 阅读 · 1 评论 -
第六章 vscode的迁移
目录第一章 初次接触vscode第二章 vscode快捷键的使用第三章 vscode的界面配置第四章 vscode作为Markdown编辑器第五章 vscode进行git管理第六章 vscode的迁移第七章 vscode配置go语言开发环境第八章 vscode配置c/c++开发环境前言先说一下自己的情况, 因为公司给配备的台式机无法访问外网, 所以vscode是无法直接在线安装插件的, 尤其还有一些快捷键的配置, 一台电脑配置好了, 在另一台电脑再配置一遍, 太麻烦了, 所以就需要把vscode转载 2021-04-09 10:42:43 · 1835 阅读 · 1 评论 -
chrome浏览器的跨域设置
做前后分离的webapp开发的时候，出于一些原因往往需要将浏览器设置成支持跨域的模式，好在chrome浏览器就是支持可跨域的设置，网上也有很多chrome跨域设置教程。但是新版本的chrome浏览器提高了跨域设置的门槛，原来的方法不再适用了。下面笔者简单介绍一下新版本chrome的跨域设置方法。版本号49之前的跨域设置先介绍一下老方法，参考了一些网上的教程，其实直接在打开命令上加--disable-web-security就可以了。具体做法为：1.下载并安装好chorme浏览器后在桌面找到浏转载 2021-03-25 11:23:00 · 800 阅读 · 0 评论 -
mediainfo.js获取视频详细信息，js获取视频帧数
需求：上传视频的时候需要知道该视频的帧数等信息，input的file直接读取是不能读取帧数的方式：通过引入mediainfo.js来获取视频的帧率和视频的总时长，用帧率*时长得出总帧数栗子：上面输出格式是 text 我们可以根据需要将格式设为 json 对象，这样就能获取想要的信息了//这是text 格式MediaInfo({ format: 'text' }, (mediainfo) => { fileinput.addEventListener('change', () =原创 2020-12-10 13:58:46 · 8741 阅读 · 3 评论 -
spark.md5.js获取文件的md5值
需求：需要获取上传文件整体的md5值，然后传给后端，所以采用spark.md5.js代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2020-12-10 11:34:33 · 5087 阅读 · 2 评论 -
判断浏览器类型，IE，Chrome，Firefox
判断是否是IE11及以下或者其他(其他里包括IE edge)//判断是否是IE浏览器function isIE() { if(!!window.ActiveXObject || "ActiveXObject" in window){ return true; }else{ return false; }}原创 2020-11-18 10:53:09 · 716 阅读 · 0 评论 -
记录一个时间轴控件
timerAxis时间轴选取控件长这样子引用方式将对应的css,js引入html页面中调用方式var t1 = timerAxis.createAxis({ //目标盒子，只要一个盒子就行，但是需要知道盒子的宽度 box:document.querySelector('.box2'), //mousemove的callback 这里可以对时间进行限定，比如移动距离必须是30分钟的间隔， //返回时间数组，需要return对时间的处理 ti原创 2020-08-07 18:30:21 · 500 阅读 · 0 评论 -
JS 将字符串格式html代码插入页面中
使用原生 JS 经常会遇到将 html 字符串往页面的的某个节点插入，这里介绍几种插入方式插入方式一、使用 innerHTML 方式这种方式是将你的 html 结构的字符串直接给某个节点的 innerHTML 属性：var name = 'leo';var htmlStr = `<div><span>${name}</span></di...原创 2020-04-30 14:34:28 · 14577 阅读 · 0 评论 -
js 字符串前面补 0 模仿 padStart、padEnd 效果
我们在使用时间时比如 23：08：09 需要对数字前面补 0 ，可以直接使用 ES6 的 padStart 方法，但是现在我要在 IE 上使用这个方法，并且不用 webpack 通过 polyfill 转码。所以手动实现：实现的方式有很多，这里只列举一种简单的方式： function padStart(n,str){ str = String(str); ...原创 2020-04-10 11:23:57 · 1208 阅读 · 0 评论 -
js监听浏览器离开页面操作
序言 大家是否经常遇到在关闭网页的时候，会看到一个确定是否离开当前页面的提示框？想一些在线测试系统、信息录入系统等就经常会有这一些提示，避免用户有意或者无意中关掉了页面，导致数据丢失。这里面的实现过程很简单，利用了HTML DOM事件中的onunload和onbeforeunload方法。unload 事件属性 定义：当用户卸载文档时执行一段 JavaScript，例如：...转载 2020-03-30 21:09:26 · 1921 阅读 · 0 评论 -
网页上的元素(对话框)被ActiveX控件遮挡住，怎么把它显示出来呢？
查了这么多资料，大都很模糊，没有解决控件遮挡问题，说什么z-index之类的，都没说到点子上或者原理性东西，终于查到了这篇博文，发现其中讲解了原理东西，从窗口元素和五窗口元素就行区分就了解了为啥出现遮挡问题了。说到这个问题，那就要先了解网页上的元素分为几种？一般来说，分为有窗口元素和无窗口元素，有窗口 元素大概有以下几种：<object>、ActiveX控件、Plu...转载 2020-03-19 15:59:40 · 1454 阅读 · 0 评论 -
实现一个 Event 类，继承自此类的对象都会拥有四个方法 on, off, once 和 trigger
要求：请实现一个Event类，继承自此类的对象都会拥有四个方法on,off,once和trigger-ES6创建类 -自定义事件机制 -on添加事件监听 -off取消事件监听 -once事件只执行一次 -trigger执行事件Event类的实现：class Event{ constructor(){ ...原创 2019-12-12 11:27:20 · 1874 阅读 · 0 评论 -
原生js实现拖拽效果，js拖拽原理
之前用原生js中的H5中的api：gragstart，graggover，drop写的拖拽发现不能微调位置，于是改为用原生js来写拖拽效果。我们一共会用到三个事件：mosedown，mosemove以及moseup。第一种理解方式：（更易于理解）拖拽：1.鼠标摁下可以开始拖拽2.记录摁下时的鼠标位置和元素位置3...原创 2019-11-18 11:38:16 · 1651 阅读 · 0 评论 -
js自定义鼠标右键菜单
可以用js实现自定义鼠标右击菜单栏实现：鼠标右击时阻止右键的默认行为 显示自定义菜单列表 在document内点击时隐藏自定义菜单列表首先右击时阻止默认行为：//如果是整个文档都使用右键自定义菜单$(document).on('contextmenu',function(ev){ ev.preventDefault();})//如果是部分区域使用自定义菜单$(...原创 2019-10-23 14:17:39 · 1070 阅读 · 0 评论 -
JS数组reduce()方法详解及高级技巧
reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高...1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行...转载 2019-10-22 16:13:11 · 579 阅读 · 0 评论 -
使用sort对数据进行简单排序，包括中英文，数字，NodeList等，使用sort和localeCompare对中英文数字进行简单排序
我们会经常遇到对数据进行排序的情况，如果好好讲一下排序就会讲到一大堆算法之类的比如：冒泡排序，堆排序，快速排序等等。这里我们仅用简单的js原生排序方法sort来实现一般数据的排序。这里先介绍一下sort:arr.sort()直接使用：sort()方法用原地算法对数组的元素进行排序，并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。由于它取决于具体实现，因此...原创 2019-07-02 11:35:59 · 3626 阅读 · 0 评论 -
setInterval,setTimeout,requestAnimationFrame区别比较 setTimeout定时器模拟setInterval的实现扫码枪输入信息校验
相信很多人最初的时候都喜欢使用setInterval来实现一些动画效果，或者定时获取数据刷新效果，但是当了解了setInterval的缺陷后都更倾向于setTimeout来模拟实现setInterval的效果。当处理动画的时候则使用同系统帧率同步的requestAnimtionFrame来实现流畅的动画效果。1.setInterval首先来谈谈setInterval的实现机制吧fun...原创 2019-04-04 09:42:02 · 938 阅读 · 0 评论 -
JS实现图片懒加载的几种简单方式，图片懒加载
记得以前手机端有个业务时将用户上传的的图片在用户往上滑动手机的时候呈现，由于刚开始用户数量少就没留意，直接将后台的数据拉过来渲染，当时后台也没有分页，可是后来参与用户多了起来，跳转到这个页面就渲染个几十几百张的去请求数据，然后服务器就崩了，所以这种情况就需要用到懒加载。当需要的时候再发送图片请求，避免打开页面加载过多资源。原理介绍：我们使用img标签来显示图片，img标签有src属性用来表...原创 2019-08-28 16:46:45 · 1632 阅读 · 0 评论 -
js原生实现路由切换
什么是前端路由？路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。如何实现前端路由？要实现前端路由，需要解决两个核心： 如何改变 URL 却不引...原创 2019-07-01 17:39:01 · 3605 阅读 · 0 评论 -
javascript数据类型判断方法详细分析
Object.prototype.toString.call()这样的写法是为了判断一个变量是什么类型的数据：var toString = Object.prototype.toString;toString.call(123); //"[object Number]"toString.call('abcdef'); //"[object String]"toString.cal...原创 2020-03-11 20:45:20 · 235 阅读 · 0 评论 -
JS分别取数值的整数部分和小数部分的几种方法
javascript去整数和小数部分的方法有很多，梳理一下可以进行自由选择使用一.取数值整数部分1.使用parseInt()进行取整相信大家对parseInt()是非常熟悉了，parseInt(string, radix) string为字符串，radix为介于2-36之间的数。使用者告诉这个函数string（比如11）是radix（比如2）进制的，函数将默认返回string以十进制...原创 2019-07-30 16:50:55 · 27524 阅读 · 3 评论 -
原生js判断元素是否隐藏，jq判断元素是否隐藏
一.原生js判断元素是否隐藏1.通过offsetParent判断，使用这种方法来判断当前元素是否被隐藏，包括通过设置父元素为display:none以及自己本身为none的情况。但是如果是通过设置visibility:hidden则无法检测出。function isHidden(el){ return el.offsetParent === null;}2.通过getCom...原创 2019-08-26 15:29:26 · 4719 阅读 · 0 评论 -
js函数节流，js函数防抖
说到函数节流和函数防抖下面这两个比喻解释可以说是非常好理解的了：throttle-函数节流：一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。debounce-函数防抖：将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹。即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用......原创 2019-08-29 15:25:45 · 562 阅读 · 0 评论 -
js数组和对象浅拷贝、深拷贝的几种方法 ，js数组、对象深浅拷贝
我们经常会用到对一个数组或对象的拷贝，而不是操作原数组或对象。下面总结几种js数组和对象深浅拷贝的几种方式：一、es5实现数组和对象的浅拷贝与深拷贝1.数组和对象浅拷贝：function shallowCopy(source){ if (typeof source !== 'object') { throw TypeError('the source must...原创 2019-08-30 11:22:23 · 2325 阅读 · 0 评论 -
将信息生成二维码，并打印包括二维码等信息的部分页面内容。二维码生成器、打印页面一部分并解决页面事件失效的问题，doucument.write()方法浅析
之前遇到一个业务问题，就是先将信息生成一个简单的二维码，然后打印出包括二维码在内的部分页面内容（这个二维码旁边有二维码信息，让人识别，二维码交给扫码枪识别）。1.二维码的生成二维码生成器网上一找一大堆，可以直接看一下API然后调用就好了。网上可以直接下载jquery.qrcode.min.js的插件，下载完就好了使用：//声明一个QRCode的实例，传入两个参数，第一个参数是...原创 2019-04-05 21:13:42 · 1100 阅读 · 0 评论