- 博客(76)
- 收藏
- 关注
RSS订阅原创 JS实现拖拽元素交换位置
源码：js-essays/draggable基本效果展示：基本思路：使元素可以被拖拽（利用 draggable 属性， 注意：链接和图片默认是可拖拽的）拖拽时，通过被拖拽节点和其他节点的drag事件交互，来切换两个节点的位置（非唯一方法）添加用户拖拽交互效果用到的方法：ondrag 事件在元素或者选取的文本被拖动时触发。在拖动目标上触发(源目标元素):ondragstart - 用户开始拖动元素ondrag - 元素正在被拖动ondragend - 用户结束元素拖动
2021-03-09 18:09:23
4452
4
原创 使用CSS让矩形图片只展示中间正方形区域且图片不变形（div/img两种标签）
效果示意CSS实现使用 div 标签时，设置背景图，并设置 background-size: cover<!-- 标签 --><div class="square"></div><!-- 样式 --><style> .square{ width: 80px; height: 80px; background: url("背景图地址") no-repeat; b
2021-02-08 13:46:32
1268
原创 移动端H5文本框获取焦点唤起键盘时，fixed或absolute定位的元素被键盘顶上去的问题解决方案
场景看下面两张图，文本框（ input 或 textarea ）获取焦点时，手机自带的键盘会被唤起，从而导致视口高度变小，从而导致处于 fixed 定位且设置 bottom 属性的元素，会被键盘顶上去，浮于键盘上方。（由于手机内部机制不同，仅安卓出现这种问题） 解决方案思路监听当前视口的变化：当视口大小发生改变时，判断变化后的视口高度是否小于初始的窗口高度，是则隐藏相关元素；反之，显示相关元素主要代码const WIN_HEIGHT = window.innerHeightwindow
2020-12-10 18:30:53
1928
2
原创 canvas绘图模糊处理（高分屏下的canvas绘制）
场景在移动端通过 H5 的 canvas 标签绘制图表的时候，不经过任何处理的图表相比较其他元素看起来会有些模糊。序先看下面一组高分屏下的圆，上面是普通 div 元素“绘制”的圆，下面是通过 canvas 绘制的圆。可以看出，下面的圆相比较是模糊的。为什么会这样？一台普通屏幕上的像素（逻辑像素），可以当做是正常的像素（css中设置的像素），当画一个100px的元素，他就是一个100px的元素。但是，在出现了一些高分辨率的屏幕之后，就发生了一些变化。随之也出现了一个属性 devicePixelR
2020-11-03 16:52:36
1910
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
14173
1
原创 什么是 `async/await` 及其如何工作，有什么优缺点
什么是 async/await 及其如何工作，有什么优缺点？介绍async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法，被普遍认为是 JS异步操作的最终且最优雅的解决方案。相对于 Promise 和回调，它的可读性和简洁度都更高。async 是异步的意思，而 await 是 async wait的简写，即异步等待。所以从语义上就很好理解 async 用于声明一个 function 是异步的，而await 用于等待一个异步方法执行完成。一个函数如果加上 async ，那
2020-07-31 10:04:24
1920
原创 Nodejs写接口时配置静态文件路径
Nodejs写接口时配置静态文件路径需要使用 express关键代码const express = require('express');const app = express();app.use(express.static(__dirname + '/public'));现在就可以加载public目录下的静态文件了：http://127.0.0.1:8100/images/someimg.jpgExpress 会在静态资源目录下查找文件，所以不需要把静态目录作为URL的一部分。
2020-07-13 13:33:32
1823
原创 vue过滤器filter全局创建及使用
vue过滤器filter全局创建及使用在项目中经常用到的过滤器，优先考虑注册为全局的过滤器。创建在src目录下新建filters文件夹新建 filters/index.js// 超过n个字符显示...const formatStr = function(str, num) { if (str.length > num) { return str.substr(0, num) + '...' } return str}export { formatStr
2020-07-13 10:18:04
600
原创 由React构造函数中bind引起的this指向理解（React组件的方法为什么要用bind绑定this）
由React构造函数中bind引起的this指向理解（React组件的方法为什么要用bind绑定this）React文档源码class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.
2020-05-29 14:29:36
1233
原创 js中监听事件addEventListener第三个参数的理解（事件的冒泡与捕获）
js中，可以给一个dom对象添加监听事件，像下面这样：domElement.addEventListener("click", function(){}, true);第一个参数是事件类型，比如点击(click)、双击(dbclick)第二个参数就是函数，触发事件后，需要执行的函数。而第三个参数就是事件的捕获与冒泡， 为true时捕获，false时冒泡。三个参数介绍完了，那么第三个...
2020-03-20 14:20:56
4145
原创 利用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
1450
原创 前端axios+webpack解决跨域问题（不依靠后端，独立解决跨域）
前端axios+webpack解决开发环境跨域问题（不依靠后端，独立解决跨域问题）以 vue 项目举例：// ...axios.get('https://xxx.com/api/getinfo').then(res => { console.log(res);}).catch(err => { console.log(err)})直接这么写，会出现 跨域问题，接下来通...
2020-01-02 15:32:52
775
原创 vue-cli3项目打包优化
原始包大小以下主要操作都在文件 vue.config.js 下进行，如没有此文件，就在项目根目录下新建。1.去掉 .map 文件.map 文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了 .map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。操作：module.exports = { // ... ...
2020-01-02 14:59:13
1771
原创 【vue项目实战】Vue工程化项目--猫眼电影移动端（四）
第四节底部导航vuex --参考：vuex 使用总结（详解）登陆验证、用户注册 --这里是使用vuex模拟数据库里的读存操作（结合真实数据库请参考【全栈初体验】Vue+Node+MySQL实现前后端分离开发）demo地址 ：第四节请 结合代码 看以下文字，建议 从第一节看起底部导航菜单样式为图标和字体的组合，布局使用弹性盒子即可。图标用到了iconfont...
2019-11-29 22:03:37
5404
4
原创 移动端h5监听键盘弹出和收起
在ios中软键盘弹起时，仅会引起 $('body').scrollTop 值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案，因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦；在android中软键盘弹起或收起时，会改变window的高度，因此监听window的 onresize 事件；一、Android端监听...
2019-11-01 17:18:55
2450
原创 判断移动端设备是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
535
原创 移动端h5页面禁止长按选择复制
注意 ：增加之后需要对input做另外设置，不然输入框无法输入ios手机默认可以长按选择复制，如不想长按选择，可以用以下代码取消：*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/...
2019-11-01 16:25:25
4467
3
原创 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
6830
2
原创 前端js/vue下载后台传过来的流文件（如excel）并设置下载文件名
这里介绍两种方法，使用 Blob对象 和 使用 js-file-download但是 不管使用哪种方法，发送请求时都要设置 responseType如果不打算了解直接使用，请通过目录进入 四、主要完整代码方法一：使用Blob对象Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功...
2019-09-30 13:41:59
16030
7
原创 vue项目中点击非刷新按钮，页面刷新并且路由多了个问号解决方案
问题描述在vue项目开发过程中，点击查询或重置按钮，结果页面刷新了一遍后来发现路径变成了 localhost:8080/?#/login原因这是因为在 form 表单里，点击了button 按钮，触发了表单的默认事件，也就是触发了提交行为。解决方案使用 @click.prevent 阻止默认事件即可<button @click.prevent="handleChec...
2019-09-29 17:41:25
739
原创 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
4850
原创 火狐浏览器图形验证码刷新不生效的问题（图片src重新赋值不生效的问题）
场景之一图形验证码刷新刷新方式：点击一次图片，就重新给src赋值一次，从而进行刷新。// 这种方式，谷歌浏览器正常刷新，火狐浏览器不会刷新ImageCodeSrc = BASE_URL + "/login/captcha.jpg"这样写在谷歌浏览器中是正常显示的，没有问题。但是火狐就会出现不刷新的问题。原因【由于指定的src与原来图片的src相同，所以在ie7、火狐浏览器下验证码不...
2019-08-31 16:38:43
2095
1
原创 前端获取response响应头的所有数据/信息
前端默认只能获取以下响应头信息Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma如果想获取到响应头其他数据，需要在服务器端设置 Access-Control-Expose-Headers : 'Authorization' 这样前端就可以获取响应头的其他信息了（包括自定义的响应头）。举个栗子：...
2019-08-31 16:16:42
30008
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
579
原创 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
2397
原创 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
7392
原创 网页实现中英文切换方式对比与实现
一、使用谷歌/微软的翻译API优点：只须调用接口，即可轻松完成整站翻译，翻译准确度还好。缺点：谷歌被墙了，使用意义不大；微软的收费。参考：http://code.google.com/apis/language/translate/overview.html注： 网上很多的使用微软API的方法，现在已经无法实现。二、借助i18n插件，自己编写中英文对照表，用js控制...
2019-08-16 15:06:38
10632
原创 使用vue-i18n实现中英文切换
源码地址安装 vue-i18nnpm install vue-i18n --save-dev新建中英文对照文件// zh.jsmodule.exports = { language: { name: "中文", current: "当前语言" }, navbar: { home: "首页", about: "关于我们", ...
2019-08-16 14:39:59
2874
原创 vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）
区别ECB： 是一种基础的加密方式，密文被分割成分组长度相等的块（不足补齐），然后单独一个个加密，一个个输出组成密文。CBC： 是一种循环模式，前一个分组的密文和当前分组的明文异或或操作后再加密，这样做的目的是增强破解难度。（不容易主动攻击，安全性好于ECB，是SSL、IPSec的标准）代码实现先安装 crypto-jsnpm install crypto-js --save...
2019-08-12 14:56:09
3353
原创 vue中使用v-for时为什么不能用index作为key？
结论：更新DOM的时候会出现性能问题（复用）会发生一些状态bug为什么要用key？key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。总...
2019-08-02 18:44:11
10970
原创 css设置文本单行或多行溢出时显示省略号
单行文本溢出思路：使用overflow: hidden把超出的内容进行隐藏；然后使用white-space: nowrap设置内容不换行；最后使用text-overflow: ellipsis设置超出内容为省略号{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}注意： 需要...
2019-07-04 20:08:19
408
原创 常用正则表达式公式总结
一、校验数字的表达式数字：^[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
354
原创 【全栈初体验】Vue+Node+MySQL实现前后端分离开发
前言这个 demo 是MVVM开发模式，我也写过一个前后端结合开发的完整系统 demoVue项目使用vue-cil3创建的。使用vue-cil2创建的项目也可以实现，只是配置代理服务器的时候有一点差别。后面分别针对这两个版本进行区分。数据库操作使用Navicat。数据库配置新建MySQL连接（参数可以自己配置，后面会用到）新建数据库新建数据表Node...
2019-05-29 17:13:32
8758
31
原创 上传文件显示进度条，监控读取进度
我们在使用异步事件处理时还能顺便获得一项优势，那就是能够监控文件的读取进度；这对于读取大文件、查找错误和预测读取完成时间非常实用。onloadstart 和 onprogress 事件可用于监控读取进度。以下示例演示了如何通过显示进度条来监控读取状态。要查看进度指示器的实际效果，请尝试读取大文件或远程驱动器中的文件。<style> #progress_bar { ma...
2019-05-27 17:48:54
8139
1
原创 选择图片后显示缩略图（自动生成缩略图）
下面是完整代码，看注释：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>显示选择图片的缩略图</title> <style> #dropbox { width: 400px; height: 70px;...
2019-05-27 15:59:53
2808
原创 使用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
1956
原创 图片转base64编码
主要代码：// 创建FileReadervar reader = new FileReader();// 读取内容，读取完整则返回base64编码文件reader.readAsDataURL(file);//---------以上已完成图片到base64编码的转换------// 读取操作完成后的方法reader.onload = function () { // this....
2019-05-27 10:37:07
945
原创 vue中手动封装iconfont组件（三种引用方式的封装和使用）
在线使用 有时候会因网络问题影响用户体验；直接放在 本地使用 ，如果过多使用也会显得繁琐，所以就可以将其封装成一个组件，也方便维护。封装基于阿里巴巴图标库的项目图标。初次使用iconfont项目参考： 点我查看使用前的准备和三种引用方式介绍准备将项目内的图标下载至本地在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件解...
2019-05-07 14:15:38
2610
原创 在vue项目中(本地)使用iconfont字体图标的三种方式
使用前的准备和三种使用方式介绍，参考这里开始使用：点击下载到本地在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件解压下载到本地的字体图标文件，放到 iconfont 文件夹下如过项目中没有下载 css-loader 依赖包，就进行下载，否则会报错npm install css-loader -D然后在 main.js...
2019-05-06 19:14:01
8436
原创 【vue项目实战】Vue工程化项目--猫眼电影移动端（三）
vue工程化第三节组件化开发，标题部分多处用到的代码就在全局进行注册优化用户体验：当网速过慢时，显示加载动画。播放宣传片保留组件状态，避免重新渲染 keep-alive图片懒加载本节完整demo组件化开发（标题）思想：不同种类的组件，划分不同模块从首页进入详情页，标题文字会改变，也会多出一个返回按钮，但样式还是不变的，所以这里也可以拆分为一个组件（我不会告诉你们，是我在...
2019-05-06 15:10:23
7945
18
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人