![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
吴越南蛮
Java程序员。主要研究的语言是Java,JS,Python,C。坚持原创,拒绝做搬运工。
展开
-
JSON.parse方法实现
JSONReader.js/** * 将json字符串转为token */class JSONReader { constructor(str) { this.str = str; this.pos = 0; this.tokens = []; this.scan(); } scan() { while(this.pos < this.str.length) { le原创 2021-02-11 08:09:36 · 1232 阅读 · 0 评论 -
JSON.stringify方法实现
JSONFormat.js/** * 将对象转为json字符串 */class JSONFormat { /** * 构造器 * @param obj 目标对象 * @param replacer {function|Array} * @param space {string|number}间隔符 */ constructor(obj,replacer,space) { this.target = obj;原创 2021-02-11 08:04:07 · 384 阅读 · 2 评论 -
HTML词法分析
读取html字符串,转为tokens数组。scanner.js/** * 扫描器类 */class Scanner { /** * 构造器 * @param str html字符串 */ constructor(str) { this.str = str; this.pos = 0; this.tokens = []; this.scan(); } /** *原创 2021-01-22 20:50:16 · 281 阅读 · 0 评论 -
js 打印输出格式类封装
/** * 字体样式 */class Style {}Style.DEFAULT = 0;Style.HIGHLIGHT = 1;Style.NOTBOLD = 22;Style.UNDERLINE = 4;Style.NOTUNDERLINE = 24;Style.BLINK = 5;Style.NOTBLINK = 25;Style.ANTIDISPLAY = 7Style.NOTANTIDISPLAY = 27;/** * 颜色类枚举,因为前景色和背景色相同颜色差值1原创 2020-12-25 22:25:49 · 220 阅读 · 0 评论 -
关键字提示编辑器二
做了一些改进。当前行无内容时,隐藏提示框。存在的问题,如果某一行的文字过多,则会自动换行,但是这种换行只是在视觉上的,html代码中没有体现。所以可能会导致高度计算不够。效果:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div提示框跟随光标移动</title> <link rel=原创 2020-11-24 22:06:28 · 133 阅读 · 0 评论 -
关键字提示编辑器一之可编辑div获取光标位置
没有考虑浏览器兼容性,暂时只考虑了Chrome。效果在div中输入的时候,底下的蓝色部分(span)跟随光标变化而变化,而且内容为光标前的所有文本。红色的部分是一个|,用来模拟光标。所以只要获得|的相对像素位置,以及div的位置,就可以计算出光标的绝对像素位置。还有个前提是蓝色部分的样式要和div文字的样式相同。div获取光标位置比较复杂,如果是textarea和input框,内部是纯文本,比较好处理。div中输入的时候,第一行输入的内容是div的第一个文本元素。换行之后,每一行都会自动被一个d原创 2020-11-22 23:19:06 · 1906 阅读 · 0 评论 -
JS比较两个对象数组的差异
后台传过来一个对象数组,vue渲染到页面中,然后修改了这个对象数组,可能是增删改了其中的某些对象。但是不是操作一下就发到后台去保存,而是只是前端页面在发生变化,最后点击提交按钮的时候才把变化过的数据传到后台去更新。而且后台更新的时候,不是把这整个数组替换成新的,而是改动里面的一部分。所以最后一步发送到后台的时候,前端就需要比较新的对象数组相比于原来的对象数组做了什么操作。然后把这些操作发送到后台。以下是比较的算法,刚开始我是把list1和list2都遍历了一遍,觉得效率低就改为了下面的。/** *原创 2020-11-09 17:43:57 · 13100 阅读 · 3 评论 -
原生JavaScript轮播图
HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="css/style.css"></head>...原创 2019-11-14 10:19:16 · 66 阅读 · 0 评论 -
JavaScript中Attribute和Property的区别
JavaScript更改对象的属性有两种方式:一种是使用对象的getAttribute()/setAttribute()/removeAttribute()方法,操作的是对象的HTML文档节点标签的属性。改变后的属性会在HTML文档节点中显示,这里用Attribute属性来指代。另一种是使用JS对象的属性,也就是对象.属性名来访问。改变后的属性不会在HTML文档节点中显示,这里用Property...原创 2019-11-13 20:07:46 · 104 阅读 · 0 评论