![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 66
何必诗债换酒钱
From now on, I will expect nothing, and just take what I get.
展开
-
vue-cli 3 以上的项目使用 axios 请求本地 json 文件
vue-cli 3 以上的项目使用 axios 请求本地 json 文件原创 2022-07-10 16:06:36 · 1211 阅读 · 1 评论 -
关于 Chrome 浏览器设置 border-radius 不成效的解决办法
关于 Chrome 浏览器设置 border-radius 不成效的解决办法原创 2022-07-06 16:36:47 · 832 阅读 · 0 评论 -
前端 <textarea> 标签中的内容保存、展示
前端 标签中的内容保存、展示原创 2022-07-03 15:41:23 · 1961 阅读 · 0 评论 -
js实现一个对页面某个节点的拖曳
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件。一、js拖拽插件的原理常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤:用鼠标点击被拖拽的元素按住鼠标不放,移动鼠标拖拽元素到一定位置,放开鼠标这里的过程涉及到三个dom事件:onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是:用鼠标点击被拖拽的元素触发onmousedown(1)设置当前元素的可拖拽为true,表示可以拖拽(2)记录当前鼠标的坐标x,y(3)记录当前元素转载 2021-04-30 15:26:08 · 1055 阅读 · 1 评论 -
js 跳出 forEach 循环
使用 forEach 的时候,是不能通过 return 来跳出循环的(只可以终止 return 语句后面代码的执行,并不会终止整个循环),比如下面的例子????var list = [ {id: 'id_1', name: 'name_1', price: 1}, {id: 'id_2', name: 'name_2', price: 2}, {id: 'id_3', name: 'name_3', price: 3}, {id: 'id_4', name: 'name_4原创 2021-01-26 23:09:18 · 7715 阅读 · 0 评论 -
浅析赋值、浅拷贝、深拷贝的区别
1、原理赋值:将某一对象赋给某个变量的过程,称为赋值。浅拷贝:浅拷贝是创建一个对象,这个对象有着原始对象属性值的一份精准拷贝,如果属性是基本类型,拷贝的就是基本类型的值;如果属性是引用类型,拷贝的就是内存地址,如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝:深拷贝就是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原有的对象。2、区别赋值:当我们将一个对象赋值给另外一个新的变量时,赋的其实是该对象在栈中的地址,而不是堆中的数据。也就是说原创 2020-10-25 17:23:42 · 2015 阅读 · 1 评论 -
JavaScript之this指向
this 是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。关于 this,经常会有一些误解:比如会把 this 理解成指向函数自身,又或者认为 this 指向函数的作用域。其实,this 是在函数调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。因此,函数的不同使用场合,this 也有不同的值。那么我们该如何判断 this 呢?可以按照下面的顺序来进行判断:1.函数是否在 new 中调用(new绑定)?如果是的话,this 绑定的是新创建的对象。首先,回想下 new 运算符原创 2020-09-23 21:21:32 · 99 阅读 · 0 评论 -
TS之装饰器
装饰器装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为。通俗的讲,装饰器就是一个方法,可以注入到类、方法、属性、参数上来扩展类、方法、属性、参数的功能。常见的装饰器有:普通装饰器(无法传参)、装饰器工厂(可传参)装饰器类型类装饰器属性装饰器方法装饰器函数参数装饰器类装饰器类装饰器在类声明之前被声明(紧靠着类声明);类装饰器应用于类构造函数,可以用来监视、修改或替换类定义;类的构造函数将作为唯一参数传递给装饰器;如果类装饰器返回一个值,它会原创 2020-06-21 17:07:40 · 597 阅读 · 0 评论 -
关于 ES 5 中的类、继承 小记
ES 5 ---- 类// 构造函数里定义属性 & 方法function Person() { this.name = 'zhangsan'; this.age = 18; this.run = function() { console.log(`${this.name}在跑步。`); }}// 原型链上定义属性 & 方法Person.prototype.sex = '男';Person.prototype.work = func原创 2020-05-17 12:18:49 · 182 阅读 · 0 评论 -
前端防抖与节流
1、防抖 1.1 定义: 在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。 1.2 应用场景: (1) 用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源; (2) window的resize、scroll事件,不断地调整浏览器的窗口大小、或者滚动时会触发对应事件,...原创 2020-03-16 11:10:01 · 332 阅读 · 0 评论 -
中英文状态的符号转换
1、JS把中文的标点全部替换成英文标点:function qj2bj(str){ var tmp = ""; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i) >= 65281 && str.charCodeAt(i) <= 65374){// 如果位于全角!到全角~区间内 tmp += S...原创 2020-03-13 09:57:59 · 1292 阅读 · 0 评论 -
前端处理跨域问题
跨域:即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域。相反,不跨域即叫同源,同源:即协议头、域名、端口完全一致。举个例子:URL 说明 是否允许通信http://www.demo.com/a.jshttp://www.demo.com/b.js ...原创 2020-03-06 16:21:38 · 287 阅读 · 0 评论 -
URLSearchParams 小记
URLSearchParams接口定义了一些实用的方法来处理 URL 的查询字符串。之前没有没有接触过,了解之后发现还是挺实用的,记录一下。首先,我们调用 new URLSearchParams()会返回一个 URLSearchParams对象实例:let str = 'name=Amy&age=24&sex=female';let obj = new URLSe...原创 2020-03-04 17:55:33 · 341 阅读 · 0 评论 -
js 导出 txt 文件
之前有写过一篇js 导出 csv 文件的,现在需求上要求导出 txt 文件,还要导出成指定的格式,只能再次研究下。先贴下这个项目导出 csv 的处理:let rstList = [];let csvList = [];data.list.forEach((item, index)=>{ rstList.push(item.program_info);});rstList...原创 2019-12-07 14:28:14 · 1616 阅读 · 0 评论 -
js 获取服务器时间
js 是客户端执行的,所以,js的一切关于时间的函数,如 Date.now() 都是以客户端为准的。但是如果客户端的时间跟网络时间不一致,对有些对时间依赖度较高的项目来说,可能就是致命性的问题,这种情况下,就不能简单的使用客户端的时间,而是要获取服务器时间以保证项目的正常运行。接下来说下 js 如何获取服务器时间。原理:使用 ajax请求,返回的头部信息就含有服务器端的时间信息,获取到就可...原创 2019-11-25 17:36:45 · 627 阅读 · 0 评论 -
textarea 文字换行保存后读出来没有换行
问题:页面上有个 <textarea></textarea> 元素,输入内容以后预览,发现回车键的位置并没有换行。如下图所示:预览结果:将内容打印出来,可以看到,<textarea> 中的内容里面,换行是用的 “\n” ,而 html 并不识别:解决办法:将内容里面的\r替换成<br>再进行预览就可以了:var ...原创 2019-10-16 20:23:27 · 1149 阅读 · 0 评论 -
JavaScript 实现导出 CSV 文件
通过接口拿到的数据结构如上所示,现在要通过 JavaScript 将数据导出: <script type="text/javascript" src="json2csv.js"></script> <script type="text/javascript"> var title = Object.keys...原创 2019-09-25 15:39:40 · 1799 阅读 · 0 评论 -
JS 比较两个字符串的相似度
function similar(s, t, f) { if (!s || !t) { return 0 } var l = s.length > t.length ? s.length : t.length var n = s.length var m = t.length var d = [] f = f || 3...原创 2019-09-05 17:16:39 · 8996 阅读 · 1 评论 -
递归遍历树形结构,根据属性值查找所在对象
目标:有一个对象数组,已知某个 id 属性的值,改变其所在对象的 children 属性值。方法:通过递归方式遍历对象数组,找到指定 id 对应的对象,改变该对象的 children 属性值。具体实现:// 原始对象数组[数据结构是这样的,但是每层有多少数据是不一定的]var originData = [{ id: 1, name: 'name1', children: [{...原创 2019-08-29 09:54:28 · 2494 阅读 · 0 评论 -
Google Chrome(谷歌浏览器)js调试
Chrome的调试功能十分强大,这里仅简单记录一些常用的 JS 调试,日常所需必备。1、设置断点 可以通过以下两种方式来设置断点: (1)F12 调出控制台后,在 Source 面板设置。找到要调试的文件,在内容源代码左侧的代码标记行的位置点击,即可打上一个断点: (2)在 js 文件中设置。在 js 源文件中需要执行断...原创 2019-07-11 14:02:29 · 1268 阅读 · 0 评论 -
JavaScript中用Date()对象获得时间
Date 对象的方法简介: ·Date | 返回当日的日期和时间 ·getDate | 从 Date 对象返回一个月中的某一天 (1 ~ 31) ·getDay | 从 Date 对象返回一周中的某一天 (0 ~ 6) ·getFullYear | 根据本地时间获取当原创 2015-05-02 21:09:52 · 1221 阅读 · 0 评论 -
JavaScript实现倒计时效果
学习js也有一段时间了,今天练习一个实现倒计时效果的小例子,自娱自乐。说着也快到高考了,就先来一个高考倒计时吧!高考倒计时 *{margin:0;padding:0;font-family:"微软雅黑";font-size:20px;} .wrap{background:lightBlue;width:500px;height:60px;margin:40px原创 2015-05-31 09:29:57 · 823 阅读 · 0 评论 -
文字信息无缝滚动效果
文字信息无缝滚动效果原创 2015-07-16 21:08:03 · 506 阅读 · 0 评论 -
文字信息间歇性滚动效果
学习了信息无缝滚动效果后,再来看看间歇性滚动的效果。信息间歇性循环滚动效果 *{margin:0;padding:0;} a{color:#000;text-decoration:none;} .wrap{width:400px;margin:60px auto;border:6px solid #ccc;border-radius:6px原创 2015-07-16 21:12:03 · 798 阅读 · 0 评论 -
小记——CSS 和 JS 中关于图片路径的问题
CSS/JS中图片路径问题原创 2015-09-12 19:33:37 · 1517 阅读 · 0 评论 -
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下:document.body.offsetWidth;document.body.offsetHeight;在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下:document.documentElement.clientWidth转载 2015-10-22 17:20:34 · 4818 阅读 · 0 评论 -
文本滚动元素 marquee 研究报告
不知道各位 JavaScript 开发者有没有关注过 W3C 在中国的官方教学网站: http://www.w3school.com.cn/此网站非常全面,并且内容也很完整丰富。不过今天不是广告时间,因为我发现了一个 FireFox, Chrome, IE, Safari 都能支持的某 HTML 标签,这个网站上竟然没有介绍!那就是 ,多么常用的文字滚动标签啊~接下来是我对此元素的分析转载 2016-12-12 18:43:12 · 422 阅读 · 0 评论 -
JS数组去重
/** * * @authors Your Name (you@example.org) * @date 2018-10-11 15:05:02 * @version $Id$ *///IE8以下不支持数组的indexOf方法,先对浏览器Array对象进行支持indexOf和forEach的polyfillArray.prototype.indexOf = Array.p...原创 2018-10-11 16:44:21 · 104 阅读 · 0 评论 -
js中splice()、slice()、substring() 、substr()、join()用法
记录一下。。。1、splice()方法:用于插入、删除或替换数组的元素。 注意:这种方法会改变原始数组 语法: array.splice(index,howmany,item1,.....,itemX) 参数: index 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 ...原创 2018-10-12 09:01:03 · 336 阅读 · 0 评论 -
sublime text 3 javascript 语法检查
本文是基于 sublime text 3 进行 javascript css html 的语法检查。正式开始前,再啰嗦一遍关于插件安装的:1、Package Control 组件安装ctrl+`调出 console,粘贴以下代码到命令行并回车:import urllib.request,os; pf = 'Package Control.sublime-package'; ipp...原创 2018-11-09 10:19:51 · 2413 阅读 · 0 评论 -
JavaScript 中 instanceof 运算符
前言: 在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行。 所有 JavaScript 对象都有 __proto__ 属性,但只有 Object...原创 2018-11-16 13:45:27 · 554 阅读 · 1 评论 -
JavaScript 几种数组排序
/** * * @authors Your Name (you@example.org) * @date 2019-01-09 10:41:53 * @version $Id$ */var array = [6,4,1,7,2,5,8,3];//借助sort排序array.sort(function(a,b){ //return a-b; //升序[默认] ret...原创 2019-01-09 15:21:35 · 1014 阅读 · 0 评论 -
JavaScript 关于闭包的一个小题
前两天遇到一个 闭包+递归 的问题,今天仔细想了下,特此记录。实现这样一个函数 go:输入、输出分别如下:go('l'); //输出 "gol"go()('l'); //输出 "gool"go()()('l'); //输出 "goool"go()()()('l'); //输出 "gooool"...go()...()('l'); //输出 "goo...ol"...原创 2019-01-16 22:06:36 · 163 阅读 · 0 评论 -
js位运算符
题外话: 位运算符是在数字底层(即表示数字的32个数位)进行操作的。 ECMAScript 整数有两种类型,即 有符号整数(允许用整数和负数)和 无符号整数(只允许用整数)。有符号整数使用31位表示整数的数值,用第32位表示整数的符号,0表示正数,1表示负数。 正数是以真二进制形式存储的,例如,18的表示法: 也可以将18...原创 2019-05-13 16:32:25 · 4978 阅读 · 0 评论 -
JavaScript关于sort()排序
关于 sort() 的具体说明,这里不再赘述,可以戳这里 ↓↓↓: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 之前也有用过 sort() ,但是没有具体弄清楚这个方法的含义,导致在一次字符串排序中遇到问题,...原创 2019-05-29 14:59:38 · 248 阅读 · 0 评论 -
JavaScript 立即执行函数
先理解一些函数的基本概念:函数声明、函数表达式、匿名函数。函数声明:使用function关键字声明一个函数,再指定一个函数名。function fnName(){}函数表达式:使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量。 这是最常见的函数表达式语法形式。var fnName = function(...原创 2019-06-11 12:06:26 · 93 阅读 · 0 评论 -
js 判断浏览器是否安装 flash 插件
//判断方法function flashChecker() { var hasFlash = 0; var flashVersion = 0; if(document.all) { var swf = new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); if(swf) { ...原创 2019-06-25 14:12:35 · 200 阅读 · 0 评论 -
JavaScript中substring()与substr()的用法
今天开始了我的JavaScript学习之旅,前两天的迷茫终于过去了。。又有了学习的方向,感觉很不错。。闲话不扯了,进入正题。正在看《JavaScript权威指南》(第五版),然后就毫无征兆的看到了 sub = s.substring(1, 4) ;(变量s包含一个字符串),汗颜啊,竟然不知道substring()的用法,赶紧地学习学习。。substring(): su原创 2015-01-08 20:50:16 · 632 阅读 · 1 评论