javascript
关注
分享
扫一扫
文章平均质量分 50
愚舜
这个作者很懒，什么都没留下…
展开
-
window.print打印时分页的问题
window.print打印分页的解决方案原创 2022-09-12 12:17:25 · 3090 阅读 · 1 评论 -
Ant Design vue中select下拉框组件偏移问题
当使用antdesign vue中的select出现下拉框位置偏移的时候原创 2022-09-12 12:10:56 · 5117 阅读 · 0 评论 -
cookie、localStorage和sessionStorage三者的区别
cookie、localstorage和sessionStorage三者都是在开发中用到的临时存储客户端会话信息或者数据的方法，下面就简单介绍一下三者的区别：一、存储的时间有效期不同1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效3、localStorage的有效期是在不进行手动删除的情况下是一直有效的二、存储的大小不同1、cookie的存储是4kb左右，存储量较小，一般原创 2021-04-16 09:43:41 · 28272 阅读 · 2 评论 -
vue从入门到放弃之------详细介绍Vue Cli的使用
一、Vue Cli是什么Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，使用 Vue Cli之后我们可以快速的搭建一个完整的系统(项目)。二、Vue Cli的安装1、安装Vue Cli需要先安装nodeJs(教程很多，在此就不多说了)2、安装Vue Clinpm install -g @vue/cli安装完成之后可以使用如下命令查看vue版本vue --version可以通过如下命令升级vue版本npm update -g @vue/cli三、原创 2021-04-12 10:52:30 · 224 阅读 · 0 评论 -
vue从入门到放弃之------详细介绍Vue Router的使用
Vue Router是vue.js的官方路由管理器，包含有很多的功能和vue.js相互集成，供大家使用，下面我们来说说Vue Router.2021 Be nice to me.原创 2021-04-12 08:42:10 · 182 阅读 · 0 评论 -
vue从入门到放弃之------详细介绍Vuex的使用
一、Vuex是什么？ 官方的介绍是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（我的理解就是把你需要在很多地方使用的变量归置在一个对象的state属性中，并且这些变量的获取需要通过特殊的方式getters中定义的方法，修改这些变量则需要通过特殊的方法，action提交mutation中定义的方法来修改state中定义的状态）二、Vuex的安装1、安装Vuexnpm ...原创 2021-01-25 21:59:10 · 171 阅读 · 0 评论 -
浅谈js函数柯里化
平时开发不注意，很多面试的时候比较容易问到柯里化，什么是柯里化呢，其实就是一种境界的提高(装个b，莫喷)，其实就是函数进阶的表现，接下来就简单说一下。一、什么是柯里化？函数柯里化：是将接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。看到这官方性的解释是不是有点似懂非懂，接下来我们就用使用了n多遍的add举个例子看看：function add(x,y,z){ //平常方式 return x+y+...原创 2021-01-03 10:57:48 · 877 阅读 · 1 评论 -
浅谈js的深拷贝和浅拷贝
老生常谈js的拷贝问题，今天就简单来聊聊js的深拷贝和浅拷贝的问题，故事要从js对数据的存储开始说起。话说很久很久之前。。。。。。，js的存储分为堆(heap)和栈(stack)两种存储类型。一、数据的存储方式，基本数据类型的数据存储在栈中，引用类型的数据存储在堆中，引用类型数据的堆的地址存储在栈中。...原创 2020-12-26 09:42:20 · 455 阅读 · 2 评论 -
1.写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,.......,a+nb的时间，然后写一个 myClear，停止上面的 mySetInterVal；
每天整一个面试题，大家一起进步，加油加油！！！1.写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,.......,a+nb的时间，然后写一个 myClear，停止上面的 mySetInterVal；解析：该题的思路就是每一次在定时器中重启定时器并且在时间每一次都加b，并且要把定时器返回回来，可以作为myClear的参数。具体的执行代码如下：var mySetInterVal = function(fn,a,b){ var timer = nu原创 2020-11-16 22:10:41 · 1024 阅读 · 1 评论 -
js拖拽时禁止触发单击事件的方法三种方法
在一个元素既有拖拽事件，又有单击事件的时候，会发现每一次拖拽后都会触发元素的单击事件，所以我们得在拖拽事件的时候屏蔽掉元素的单击事件所绑定的方法。元素拖拽和单击事件触发的顺序是mosuedown,mousemove,mouseup,click，所以就需要针对这个事件顺序在拖拽的时候屏蔽单击事件。主要有以下三种方法来在拖拽事件中屏蔽掉单击事件的执行：1、监听mousemove事件，在mousemove中加状态，在click事件中监听该状态 var elIsMove = ...原创 2020-09-26 21:41:50 · 6482 阅读 · 0 评论 -
vue设置代理proxy
在vue项目开发的过程中，在和后台联调或者使用mock-server的时候，有时候会涉及到跨域的问题，需要去设置代理。vue设置代理的方式很简单：1、在vue项目的根目录下，新建vue.config.js文件，和package.json处于同一级目录。（vue.config.js是一个可选的配置文件，在vue项目的根目录下(和package.json平级)它会被@vue/cli-service自动加载，所以不需要做其他的导入导出，vue.config.js还可以使用package.j...原创 2020-09-11 22:37:20 · 5517 阅读 · 1 评论 -
js字符串对比之localeCompare()方法
js提供了字符串的对比方法localeCompare()，该方法返回的是一个数字用来表示一个参考字符串和对比字符串是排序在前，在后或者相同。该方法基本不单独使用，大部分时间是配合字符串排序使用的。一、语法：string.localeCompare(targetString,locales,options);1、参数targetString：对比字符串locales：看MDN上的解释是用来表示一种或多种语言或区域的一个符合BCP 47标准的字符串或一个字符串数组，我个人的理解是o..原创 2020-08-25 21:34:02 · 36057 阅读 · 5 评论 -
javascript监听网络连通状态
监听网络状态在开发中很少使用，但是有时候确实需要的就是在持续运行的页面中监听网络的连接状况，来做出进一步的操作；下边就简单的介绍一下监听网络状态的事件和参数：1、监听网络状态的一个参数是navigator.onLine，如果当前网络是连通状态则该参数是true，否则是false;if (navigator.onLine) { console.log('网络连通');} else { console.log('网络断开');}2、监听网络由断开到连通事件是...原创 2020-08-09 20:00:33 · 1549 阅读 · 0 评论 -
Uncaught SyntaxError: Cannot use import statement outside a module
在html的script标签中使用es6中的import关键字导入模块的时候会报如下地错“Uncaught SyntaxError: Cannot use import statement outside a module“。<script type="text/javascript"> import test from './module.js';</script>究其原因，es6的module语法需要放在type为module下就好了...原创 2020-08-03 22:53:46 · 1374 阅读 · 0 评论 -
es6模块化
javascript在es6之前是没有模块化一说的，没有本身的模块化体系，没有模块化语法，这意味着不能把一个大点的程序拆分成为多个小程序，这会导致程序显得特别的庞大，臃肿，也意味着对于开发大点的项目有着重重的阻碍；javascript之前的模块化本身都是依赖于第三方js库的，例如commonJs，AMD等；大家都知道模块化一般分为导入和导出两部分，现在我们就通过这两部分介绍一下es6自有的模块化体系和语法：一、导出（export）： export命令用于规定模块的对外接...原创 2020-08-02 23:08:55 · 137 阅读 · 0 评论 -
js使用FileReaderSync同步读取文件内容
FileReaderSync接口允许以同步的方式读取File或Blob对象中的内容。注意1、使用的方式基本相当于FileReader，不过是以同步的形式读取。2、FileReaderSync是同步读取文件内容，所以只能在webworker中使用，不然会造成主线程的阻塞。...原创 2020-07-26 08:07:03 · 9867 阅读 · 1 评论 -
重绘和回流
重绘和回流是针对页面渲染来说的两个概念，都是页面做改变的时候的概念。重绘：重绘是不改变页面元素的布局和尺寸，只对元素的内容的样式进行改变，例如背景，字体颜色等不改变元素的尺寸和布局的样式修改，然后由浏览器重新绘制渲染的操作就称之为重绘（消耗较少）。常见的重绘的操作：1、改变元素的背景色2、改变元素的字体颜色回流：回流是当元素的尺寸或者页面布局、结构发生变化的时候，样式进行改变，浏览器重新渲染页面的操作称之为回流。因为回流浏览器需要重新计算尺寸，布局等重新渲染，所以消耗较重。常见的回流原创 2020-07-25 21:42:35 · 180 阅读 · 0 评论 -
javascript函数的节流和防抖
防抖和节流都是函数执行的过于频繁，导致影响性能等情况下，控制函数执行频率的概念，下面我们分别解释一下防抖和节流的概念。节流：（顾名思义，就像开闸放水一样），在固定的时间内执行一次函数；然后，在这个时间段内再收到执行该函数的命令也不在执行该函数，简单的说就是一段时间只执行一次函数。//节流function throttle(func, delay) { let status = true return function () { if (!status )...原创 2020-07-25 12:15:36 · 158 阅读 · 0 评论 -
在svg中使用angularJs的指令
在angularJs项目中使用到了svg，发现在svg中不可以像其他的元素上一样使用angularJs的指令，而是需要以ng-attr的形式来使用angularJs的指令。1、如果按和其他元素一样的方法去使用指令会报错<!--错误写法--><line x1="{{line.x1}}" y1="{{line.y1}}" x2="{{line.x2}}" y2="{{line.y2}}" ng-repeat="line in lineList track by $...原创 2020-07-21 23:02:48 · 446 阅读 · 0 评论 -
js监听鼠标滚动事件
js中监听鼠标滚动事件，事件的名称是“mousewheel”，按正常的事件绑定即可，其中有两点关于firefox浏览器的需要注意：1、firefox浏览器的事件名称是“DOMMouseScroll”2、firefox的滑动值和正常的相反的<!DOCTYPE html><html class="no-js"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Comp原创 2020-07-20 22:30:33 · 4975 阅读 · 0 评论 -
js反向求贝塞尔曲线百分比t的方法
贝塞尔曲线反向求t的方法在此使用分片迭代的方法，求到的t也只是一个在误差范围内的近似值，而不是该点对应的本身的值，分片迭代主要分为以下几个步骤：1、将t的范围0~1，分为若干份，遍历，2、然后将t带入贝塞尔公式中，求出该t时贝塞尔曲线的点的坐标3、判断该点和代入点的距离，在误差范围内则返回该t在此使用三次贝塞尔曲线做个例子：(1)、三次贝塞尔曲线求点的坐标function threeOrderBezier(t, p1, cp1, cp2, p2) { //参数分别为...原创 2020-07-14 22:48:47 · 701 阅读 · 0 评论 -
js获取贝塞尔曲线上的点
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。现在在很多地方都有使用，包括在svg和canvas上都有贝塞尔曲线相关的api，有时候我们需要去计算贝塞尔曲线上的点的坐标，我们需要通过公式去计算坐标，贝塞尔曲线的公式如下：一次贝塞尔：二次贝塞尔：三次贝塞尔：是不是一句“我*”出口了，这看不懂啊，是啊，我也看不懂 啊。。。没关系，请往下看：一次贝塞尔曲线(一次贝塞尔曲线就是直线，没有控制点)求点的坐标：function原创 2020-07-14 21:05:34 · 3173 阅读 · 0 评论 -
js知道顶点和底边中点坐标和长度，求等腰三角形其他两个顶点的坐标
三角形已知一点和 其对边中点，求等腰三角形的其他两个点，分为三步：1、先用直线y=ax+b算出斜率a和偏移量b2、利用直线获得二次方程的系数3、带入公式分别算出点的坐标，返回三个点的坐标function getSanjiaoxingOtherPoint(dot, bottomLineMiddleDot) { var [x1, y1] = dot, //顶点坐标 [x2, y2] = bottomLineMiddleDot; //底边中点坐标原创 2020-07-13 23:03:51 · 1311 阅读 · 1 评论 -
js的Blob对象
一、Blob是什么Blob(Binary Large Object)表示大的二进制类型的对象；表示不可变的类似文件对象的原始数据。二、Blob的构造函数var blob=new Blob(blobParts[, options]);参数：1、blobParts：是一个由ArrayBuffer, ArrayBufferView, Blob, DomString等对象构成的 数组，它将会被放进 Blob。DOMStrings会被编码为UTF-8。2、options：是一个可选的参数对.原创 2020-06-21 23:07:32 · 1357 阅读 · 0 评论 -
dom操作
dom是所有对HTML元素的对象和属性，以及访问它们的方法；javaScript定义的对原生的dom节点做一些操作，其中包括的操作主要有：查找、创建、添加、删除、替换、插入、复制等。1、查找(document可以换成element)//查找节点document.getElementById('id属性');document.getElementsByClassName('class属性');document.getElementsByTagName('标签名称');document.qu原创 2020-06-20 21:19:49 · 282 阅读 · 0 评论 -
js利用FileReader读取本地文件或者blob
FileReader对象提供了异步读取存储在用户计算机上的文件的内容，使用 File或 Blob对象指定要读取的文件或数据，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。一、FileReader的使用注意：如果需要兼容低版本的浏览器，需要判断一下FileReader对象是否存在。if (window.FileReader) { let reader = new FileReader();} else { console.log('你的浏览器不支持读取文件');.原创 2020-06-15 22:29:11 · 19921 阅读 · 0 评论 -
canvas的toDataURL()方法
canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type参数其类型，默认为PNG格式。图片的分辨率为96dpi。一、语法canvas.toDataURL(type, encoderOptions);二、参数1、type：图片格式，默认为 image/png,可以是其他image/jpeg等2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。三、返回值返回值是一个数据u...原创 2020-06-14 23:16:29 · 66530 阅读 · 21 评论 -
ArrayBuffer转为base64字符串
ArrayBuffer是字节数组，又称类型化数组，相当于数组，不过存储的东西是01组成的而已，ArrayBuffer不能直接操作，需要将其转化为类型化数组对象或一个DataView以特定格式表示缓冲区的对象，然后使用该对象读取和写入缓冲区的内容。所以将ArrayBuffer转成base64需要分为两步：1、将ArrayBuffer转为二进制字符串；2、将二进制字符串通过btoa方法转为base64字符串；function ArrayBufferToBase64(buffer) { //原创 2020-06-10 22:23:44 · 7804 阅读 · 0 评论 -
浏览器自动旋转图片的问题(Exif的oritetion原因)
浏览器自动旋转改变图片的方向的原因是由于Exif信息导致的；一、Exif是什么？Exif(Exchangeable image file format)是可交换图像文件格式，主要是为了数码相机(包括手机拍出)的照片设定的，可以记录拍出照片的一些属性信息和拍摄数据。二、为什么旋转？手机拍的相关照片会在EXIF中保留图片旋转角度orientation，img标签展示图片就是旋转的。浏览器单独打开图片会帮你处理旋转，所以看到的是打开图片是正常的，所以这也就是我们看到的图片在浏览器中打开的时候指向不原创 2020-06-10 21:11:55 · 3091 阅读 · 0 评论 -
当前设备的物理像素分辨率与CSS像素分辨率之比window.devicePixelRatio
window.devicePixelRatio属性返回的value的值是当前设备的物理像素分辨率与css像素分辨率的比率，简单的说，该比例为4，则代表1个css像素由4个实际物理像素组成。var value = window.devicePixelRatio;value是一个double类型的值，使用window.devicePixelRatio属性最常见的使用是可以矫正canvas的使用分辨率；<!DOCTYPE html><html class="no-js">原创 2020-05-30 21:30:10 · 987 阅读 · 0 评论 -
javascript监听页面刷新或者离开的事件onbeforeunload
一、onbeforeunload事件是干什么的javascript在监听页面加载的时候有onload事件，是在页面加载完成之后出发的事件，而onbeforeunload事件就是在即将离开当前页面（刷新或关闭）时触发，用来监听页面刷新或者退出，该事件并且会弹出对话框提示用户是留在当前页面还是离开；二、使用onbeforeunload事件onbeforeunload事件的使用也特别简单1、绑定在页面元素上，比如绑定在body上<!DOCTYPE html><html c原创 2020-05-30 19:18:19 · 3017 阅读 · 0 评论 -
Establishing a tunnel via proxy server failed;
浏览器->设置->高级->系统->打开您计算机代理设置->代理->使用代理服务器->关闭原创 2020-04-04 19:20:25 · 2944 阅读 · 1 评论 -
使用js的库QRcode.js生成二维码
二维码的使用越来越多，前端开发中生成二维码变的很寻常，QRCode.js 是一个用于生成二维码的js库，使用也非常简单：（1）、基本使用<div id="qrcode"></div><script type="text/javascript">new QRCode(document.getElementById("qrcode"), "h...原创 2020-03-25 21:11:08 · 587 阅读 · 0 评论 -
js实现页面全屏
js实现全屏显示、需要用到 element.requestFullscreen()方法，该方法是用来发出异步请求使元素(element)进入全屏模式，如果成功，该元素会触发fullscreenchange；如果失败，则会触发fullscreenerror事件；<!DOCTYPE html><html class="no-js"> <he...原创 2019-12-01 10:11:01 · 2803 阅读 · 1 评论 -
利用h5Blob将页面内容保存为本地文件
知识点：<1>.a的download 属性规定被下载的超链接目标，download属性可以设置一个值来规定下载文件的名称，(.img, .pdf, .txt, .html, 等等)。<2>.a标签可以作为下载链接，做为超链接下载的目标时必须要有href属性。<3>.h5中的Blob()对象，Blob本身没有什么，但是可以用于二进制数据的大理JS ap...原创 2019-05-29 23:09:41 · 3647 阅读 · 1 评论 -
javascript鼠标右击事件
1、屏蔽浏览器自带的默认弹出上下文菜单的contextmenu事件。2、使用mouseup或者mousedown事件监控鼠标的右键，就可以形成鼠标右击的事件。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv...原创 2019-06-09 11:41:02 · 1579 阅读 · 0 评论 -
input输入框中禁止复制剪切和粘贴
1.input中的剪切复制和粘贴分别对应的是"oncut"，"oncopy"，"onpaste"，html中大部分元素都支持(理论上都支持，但是部分元素实现有问题)。所以禁止剪切复制和粘贴的方法如下：<input type="text" oncut="return false" onpaste="return false" oncopy="return false">...原创 2019-06-11 22:47:48 · 7136 阅读 · 0 评论 -
js双击事件屏蔽单击事件
在单击事件中将绑定的函数放在定时器中，利用定时器的延迟来清除双击对单击事件的影响，如果是双击事件则在双击事件内部清除定时器，如果是单击事件则正常执行定时器中的函数；但是需要记得每次进入单击事件都需要清除定时器。1、定义外部定时器变量。2、定义单击事件。3、定义双击事件。<!DOCTYPE html><html> <head&...原创 2019-06-23 10:34:15 · 4167 阅读 · 0 评论 -
JavaScript冒泡排序
冒泡排序是一种比较常见，比较简单的排序算法，它的排序原理类似于冒泡，所以称之为冒泡算法。用JavaScript的实现也比较简单。 function bubbleSort(arr){ var Array=arr; for(var i=0,len=Array.length;i<len;i++...原创 2019-07-01 23:15:58 · 688 阅读 · 0 评论 -
web worker使用
JavaScript的一个特性就是单线程，web worker的出现解决了JavaScript无法多线程的问题，定义了“Worker”来执行代码的并行线程。web worker有许多使用上的限制：1、web worker中无法访问window对象和document对象。2、和主线程直接的通信只能通过异步消息传递机制来实现。3、不适宜创建很多的web worker；...原创 2019-06-23 17:32:38 · 714 阅读 · 0 评论