![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 65
艾欢欢
这个作者很懒,什么都没留下…
展开
-
JS实现拖拽元素交换位置
源码:js-essays/draggable基本效果展示:基本思路:使元素可以被拖拽(利用 draggable 属性, 注意:链接和图片默认是可拖拽的)拖拽时,通过被拖拽节点和其他节点的drag事件交互,来切换两个节点的位置(非唯一方法)添加用户拖拽交互效果用到的方法:ondrag 事件在元素或者选取的文本被拖动时触发。在拖动目标上触发(源目标元素):ondragstart - 用户开始拖动元素ondrag - 元素正在被拖动ondragend - 用户结束元素拖动原创 2021-03-09 18:09:23 · 4557 阅读 · 4 评论 -
移动端H5文本框获取焦点唤起键盘时,fixed或absolute定位的元素被键盘顶上去的问题解决方案
场景看下面两张图,文本框( input 或 textarea )获取焦点时,手机自带的键盘会被唤起,从而导致视口高度变小,从而导致处于 fixed 定位且设置 bottom 属性的元素,会被键盘顶上去,浮于键盘上方。(由于手机内部机制不同,仅安卓出现这种问题) 解决方案思路监听当前视口的变化:当视口大小发生改变时,判断变化后的视口高度是否小于初始的窗口高度,是则隐藏相关元素;反之,显示相关元素主要代码const WIN_HEIGHT = window.innerHeightwindow原创 2020-12-10 18:30:53 · 2043 阅读 · 2 评论 -
canvas绘图模糊处理(高分屏下的canvas绘制)
场景在移动端通过 H5 的 canvas 标签绘制图表的时候,不经过任何处理的图表相比较其他元素看起来会有些模糊。序先看下面一组高分屏下的圆,上面是普通 div 元素“绘制”的圆,下面是通过 canvas 绘制的圆。可以看出,下面的圆相比较是模糊的。为什么会这样?一台普通屏幕上的像素(逻辑像素),可以当做是正常的像素(css中设置的像素),当画一个100px的元素,他就是一个100px的元素。但是,在出现了一些高分辨率的屏幕之后,就发生了一些变化。随之也出现了一个属性 devicePixelR原创 2020-11-03 16:52:36 · 1982 阅读 · 3 评论 -
js中判断一个变量是否为NaN
定义NaN(不是一个数字,但数据类型为number)是执行数学运算没有成功,返回失败的结果。另外,NaN 不等于 NaN 。判断方法利用 NaN 是唯一一个不等于自身的特点function _isNaN(val) { if (val !== val) { return true; } return false;}利用 ES6 中提供的 Object.is() 方法var a = "string";var b = 2;var c = a原创 2020-11-02 14:20:38 · 15345 阅读 · 1 评论 -
什么是 `async/await` 及其如何工作,有什么优缺点
什么是 async/await 及其如何工作,有什么优缺点?介绍async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法,被普遍认为是 JS异步操作的最终且最优雅的解决方案。相对于 Promise 和回调,它的可读性和简洁度都更高。async 是异步的意思,而 await 是 async wait的简写,即异步等待。所以从语义上就很好理解 async 用于声明一个 function 是异步的,而await 用于等待一个异步方法执行完成。一个函数如果加上 async ,那原创 2020-07-31 10:04:24 · 2025 阅读 · 0 评论 -
js中监听事件addEventListener第三个参数的理解(事件的冒泡与捕获)
js中,可以给一个dom对象添加监听事件,像下面这样:domElement.addEventListener("click", function(){}, true);第一个参数是事件类型,比如点击(click)、双击(dbclick)第二个参数就是函数,触发事件后,需要执行的函数。而第三个参数就是事件的捕获与冒泡, 为true时捕获,false时冒泡。三个参数介绍完了,那么第三个...原创 2020-03-20 14:20:56 · 4188 阅读 · 0 评论 -
利用a标签获取字符串url的origin、hash等属性
代码:var url = 'https://www.baidu.com/#/?name=baidu'var tag = window.document.createElement('a')tag.href = urlconsole.log(tag.origin)console.log(tag.hash)输出:原创 2020-03-13 14:35:37 · 1484 阅读 · 0 评论 -
http协议的状态码——301,302,400,401,403,404,500,502,503等常见服务器请求状态码
http协议状态码有五大类1xx (临时响应)2xx (请求成功)3xx (重定向)4xx (请求错误)5xx (服务器错误)1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态码。100(继续)请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。101(切换协议)请求者已要求服务器切换协议,服务器...原创 2019-04-11 15:30:03 · 2540 阅读 · 0 评论 -
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
区别ECB: 是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文。CBC: 是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度。(不容易主动攻击,安全性好于ECB,是SSL、IPSec的标准)代码实现先安装 crypto-jsnpm install crypto-js --save...原创 2019-08-12 14:56:09 · 3407 阅读 · 0 评论 -
移动端h5监听键盘弹出和收起
在ios中软键盘弹起时,仅会引起 $('body').scrollTop 值改变,但是我们可以通过输入框的获取焦点情况来做判断,但也只能在ios中采用这个方案,因为在android中存在主动收起键盘后,但输入框并没有失焦,而ios中键盘收起后就会失焦;在android中软键盘弹起或收起时,会改变window的高度,因此监听window的 onresize 事件;一、Android端监听...原创 2019-11-01 17:18:55 · 2520 阅读 · 0 评论 -
判断移动端设备是ios还是安卓
主要代码var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if(isAndroid){ ...原创 2019-11-01 16:47:28 · 555 阅读 · 0 评论 -
JS实现每隔几个字符添加字符(串)
代码如下:/*** @param {string} str 需要插入的字符(串)* @param {int} length 间隔几个字符*/function strInsert(str, length) { let reg = new RegExp("\\d{1," + length + "}", "g"); let ma = str.match(reg); r...原创 2019-09-30 15:37:35 · 6891 阅读 · 2 评论 -
前端js/vue下载后台传过来的流文件(如excel)并设置下载文件名
这里介绍两种方法,使用 Blob对象 和 使用 js-file-download但是 不管使用哪种方法,发送请求时都要设置 responseType如果不打算了解直接使用,请通过目录进入 四、主要完整代码方法一:使用Blob对象Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了blob的功...原创 2019-09-30 13:41:59 · 16110 阅读 · 7 评论 -
vue中iframe使用详解,结合postMessage实现跨域通信
使用场景需求:在一个H5项目的页面中以url的方式嵌入另一个项目的页面。(不得不使用iframe)而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postMessage)。iframe使用基本使用直接在页面嵌套iframe标签指定src即可使用iframe。<iframe src="xxx.html"></i...原创 2019-09-29 16:34:42 · 4921 阅读 · 0 评论 -
火狐浏览器图形验证码刷新不生效的问题(图片src重新赋值不生效的问题)
场景之一图形验证码刷新刷新方式:点击一次图片,就重新给src赋值一次,从而进行刷新。// 这种方式,谷歌浏览器正常刷新,火狐浏览器不会刷新ImageCodeSrc = BASE_URL + "/login/captcha.jpg"这样写在谷歌浏览器中是正常显示的,没有问题。但是火狐就会出现不刷新的问题。原因【由于指定的src与原来图片的src相同,所以在ie7、火狐浏览器下验证码不...原创 2019-08-31 16:38:43 · 2159 阅读 · 1 评论 -
前端获取response响应头的所有数据/信息
前端默认只能获取以下响应头信息Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma如果想获取到响应头其他数据,需要在服务器端设置 Access-Control-Expose-Headers : 'Authorization' 这样前端就可以获取响应头的其他信息了(包括自定义的响应头)。举个栗子:...原创 2019-08-31 16:16:42 · 30436 阅读 · 1 评论 -
兼容IE时,判断是否为IE浏览器
目前只有IE浏览器支持ActiveX控件,判断浏览器是否支持ActiveX控件即可判断是否为IEif (!!window.ActiveXObject || "ActiveXObject" in window){ console.log('is IE') }else { console.log('is not IE')} ...原创 2019-08-31 15:21:56 · 586 阅读 · 0 评论 -
vue-i18n在单文件js中使用
示例:import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: localStorage.getItem('userLanguage') : 'zh', messages: { 'zh': require('../asset...原创 2019-08-27 15:11:50 · 2457 阅读 · 0 评论 -
JavaScript中 跳出(终止)forEach循环
JavaScript中 跳出(终止)forEach循环forEach()方法,不支持break和continue,但可以利用其他方式。跳出本次循环,需要用 return false or return true or return代码:[1,2,3,4].forEach(function(item,i){ if (item == 2){ return false;...原创 2019-03-12 19:51:21 · 3248 阅读 · 0 评论 -
通过原型扩展给数组(Array)添加一个删除指定元素的方法
可简化删除指定元素操作扩展的这个方法只需要输入要删除的元素,即可进行删除,会改变原数组。扩展的这个方法可以使删除指定元素操作变得简单。用到的数组已有的方法:indexOf 、splice代码:Array.prototype.remove = function(val){ //获取当前元素的下标(索引) var index = this.indexOf(val); ...原创 2019-03-12 21:05:09 · 577 阅读 · 0 评论 -
【前端性能优化】03--JS节流、防抖的理解和实现
理解节流 节流,就是拧紧水龙头让水少流一点,但是不是不让水流了。想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不多流满一桶水的时候再回来,这个时候,不能把水龙头开的太大,不然还没回来水就已经满了,浪费了好多水,这时候就需要节流,让自己回来的时候水差不多满了。 在JS里典型的场景就是,图片懒加载监听页面的scoll事件,或者...原创 2019-04-12 09:42:15 · 812 阅读 · 0 评论 -
通过Ajax读取本地json文件,提示跨域的原因和解决方法
通过Ajax读取本地json文件,谷歌报错提示跨域本地写有一个 .json 代码文件,然后网页文件使用ajax读取,并用谷歌浏览器打开,发现谷歌报错:提示跨域。谷歌浏览器控制台报错但是跨域一般是由于协议、域名、端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系?而使用火狐浏览器打开,数据正常打印出来了,不过提示 XML 解析错误:格式不佳火狐浏览器控制台谷歌浏...原创 2019-04-23 16:23:57 · 28708 阅读 · 14 评论 -
【BOM编程】-- cookie的赋值、过期时间、path路径,封装,以及与Storage的区别
cookie 不是window下面的属性,它是document下面的属性,cookie有一套专门的取值与赋值方法,与localStorage,sessionStorage不同特性cookie在document下面cookie可以设置一个时间自动去清除缓存,cookie如果不设置清除时间,则关闭浏览器自动清除。cookie它可以跨页面,但是不可以跨path路径(子路径可以取到父级路径的...原创 2019-04-29 20:06:11 · 379 阅读 · 0 评论 -
在线使用iconfont字体图标
使用阿里巴巴矢量图标库在线使用案例三种使用方式介绍使用准备进入 阿里巴巴矢量图标库 ,登陆以后,搜索需要的图标,然后点击添加入库进入“我的图标库”(右上角购物车),点击添加至项目点击 + 图标创建一个新项目,然后把新图标加入到新项目中。(也可以按需添加到已有项目)进入我的项目,即可看到如下界面三种使用方式介绍unicode引用unicode是...原创 2019-04-30 15:24:07 · 5219 阅读 · 1 评论 -
axios 进行同步请求(async+await)
一般使用axios进行数据请求就是要使用异步请求,一些需求可以写在回调里面。如果一定要同步的话,async+await 了解一下?methods: { async funA(){ var res = await axios.post('') //这里的res就是axios请求回来的结果 }}...原创 2019-04-27 16:46:56 · 60255 阅读 · 2 评论 -
图片转base64编码
主要代码:// 创建FileReadervar reader = new FileReader();// 读取内容,读取完整则返回base64编码文件reader.readAsDataURL(file);//---------以上已完成图片到base64编码的转换------// 读取操作完成后的方法reader.onload = function () { // this....原创 2019-05-27 10:37:07 · 958 阅读 · 0 评论 -
使用drop实现点击和拖放选择/上传文件
直接上代码,看注释:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖放选择/上传文件</title> <style> #dropbox { width: 150px; height: 40px; l...原创 2019-05-27 11:24:31 · 1978 阅读 · 0 评论 -
选择图片后显示缩略图(自动生成缩略图)
下面是完整代码,看注释:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>显示选择图片的缩略图</title> <style> #dropbox { width: 400px; height: 70px;...原创 2019-05-27 15:59:53 · 2832 阅读 · 0 评论 -
上传文件显示进度条,监控读取进度
我们在使用异步事件处理时还能顺便获得一项优势,那就是能够监控文件的读取进度;这对于读取大文件、查找错误和预测读取完成时间非常实用。onloadstart 和 onprogress 事件可用于监控读取进度。以下示例演示了如何通过显示进度条来监控读取状态。要查看进度指示器的实际效果,请尝试读取大文件或远程驱动器中的文件。<style> #progress_bar { ma...原创 2019-05-27 17:48:54 · 8229 阅读 · 1 评论 -
常用正则表达式公式总结
一、校验数字的表达式数字:^[0-9]\*$n位的数字:^\d{n}$至少n位的数字:^\d{n,}$m-n位的数字:^\d{m,n}$零和非零开头的数字:^(0|[1-9][0-9]\*)$非零开头的最多带两位小数的数字:^([1-9][0-9]\*)+(\.[0-9]{1,2})?$带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})$正数、负数、和小数:^(...原创 2019-06-05 15:56:57 · 400 阅读 · 0 评论 -
网页实现中英文切换方式对比与实现
一、使用谷歌/微软的翻译API优点:只须调用接口,即可轻松完成整站翻译,翻译准确度还好。缺点:谷歌被墙了,使用意义不大;微软的收费。参考:http://code.google.com/apis/language/translate/overview.html注: 网上很多的使用微软API的方法,现在已经无法实现。二、借助i18n插件,自己编写中英文对照表,用js控制...原创 2019-08-16 15:06:38 · 10859 阅读 · 0 评论 -
js中new Date()接收的参数格式详解(Date对象带参数初始化)
js中new Date()接收的参数格式详解(Date对象带参数初始化)1、用整数初始化日期对象new Date(2017,06,06).toLocaleDateString(); // "2017/7/6"new Date(2017,1,1).toLocaleDateString(); // "2017/2/1"new Date(2017,1-2,01).toLocaleDateStri...原创 2019-08-23 11:17:24 · 7503 阅读 · 0 评论 -
Javascript到底有几种数据类型?(基本数据类型和引用数据类型)
JS有六大数据类型:Number、String、Boolean、Null、Undefined、Object这些数据类型可以通过 typeof关键字 进行检测typeof 123 //numbertypeof 'abc' //stringtypeof true //booleantypeof undefined //undefinedtypeof null ...原创 2019-03-15 14:31:50 · 3627 阅读 · 1 评论