- 博客(56)
- 收藏
- 关注
RSS订阅
原创 es6数组深度去重、数组与对象之间的相互转化以及阿里面试题
// 1、数组去重 const arr = [{a:1,b:2},{a:1},{b:2},{c:2},{a:1,c:2},{a:'1',b:2},{a:'1',b:2},{b:2}] const isEqual = (a, b) => { const aProps = Object.getOwnPropertyNames(a) const bProps = Object.getOwnPropertyNames(b) if (aProps.lengt.
2021-06-25 11:12:46
384
原创 openlayers实现动态静态的测距和测面以及删除测距测面和坐标点的功能
Hello，小可爱们，激动人心的双休就要到来，离下班还有三个小时，跟大家分享一下这两天研究出来的一个东西吧，先上效果图：这是基于openlayers实现的动态测距，静态测距，静态测面以及他们的删除功能，话不多说，直接上代码，首先新建一个measure.jsimport Draw from 'ol/interaction/Draw'import VectorSource from 'ol/source/Vector'import VectorLayer from 'ol/layer/Vec
2021-03-05 15:31:30
3528
21
原创 大屏项目开发中遇到的问题以及解决方案
最近公司在做大屏可视化开发，在开发过程中，用到了各种各样的插件，从一开始的不熟练到现在项目即将开发完毕的熟练运用，在这其中遇到了很多的问题，灵光一现的那一刻还是十分激动的，下面就来详细的说一下这些问题以及解决方案。1、Datav轮播表的插件复用以及代码优化及修改在Datav插件中整页轮播是下图所示的样式而且其配置也只有下图这些属性，只能设置奇偶行的背景色 ，但在实际项目中我们却需要根据实际情况设置不同类型的背景色或者颜色，又或者我们在项目中的个性化定制中会有点击某一行出现向两边延伸的动画，又
2020-08-30 11:39:49
1806
1
原创 怎么记录鼠标按下时的坐标，紧接着移动的坐标，最后鼠标弹起的坐标
jQuery的话可以参照这段代码（这段是zepto 其实跟jQuery一样）：//设置 手指拖拽进度滑块 的事件 function moveUp() { //开始按下手指事件 $(".runing_circle").on("touchstart", function (event) { move = true; ...
2020-03-09 10:26:21
1011
原创 jQuery技巧篇（一）：jQuery用addClass方法同时增加多个class属性
一句话代码$("#obj").addClass("className1 className2");
2020-03-09 10:18:38
2857
原创 canvas遇到的问题（一）：ctx.drawImage图层问题
html canvas ctx.drawImage图层问题这个可能是加载的问题, img1图片比较大, 加载比较大, 所以加载完成后再drawImage, 就覆盖了img2和img3, 可以等所有图片都下载完成后, 再一块儿绘制, 代码如下：img1.onload = drawImage;img2.onload = drawImage;img3.onload = drawImage;fu...
2020-03-09 09:59:51
3629
1
原创 $route.push跳转很慢--已解决
同样是$route.push，有的跳转很快，有的却需要2秒延迟才能跳转，搜集了很多资料，都没有解决办法。this.$router.push({ path: '/theme/search', query: { queryNo: row.queryNo, },})所以就试了一下resolve，结果yyds，问题解决。let routerData = this.$router.resolve({ path: '/theme/search', qu
2022-03-31 18:01:55
3446
原创 openlayers地图没有撑满容器--layers图层与地图分离，不随地图放大缩小正确展示图层位置的解决办法
这两天遇到了一个怪异的事情，Openlayers地图宽度没有撑满容器，是这样展示的于是，我顺其自然的在样式中加了一个canvas:{width:100%;}这下好了，白条没了，但更怪异的事情出现了，研发部电脑显示的地图没有任何问题，提交到了业务部门，就出现了很可笑的现象图层偏移了，偏的还不是一星半点儿，但是技术研发部的电脑都没有这种情况，于是我去检查了业务部门的浏览器，区别就是他们的电脑是32位的，我们的电脑都是64位的，那么猜想就是canvas宽度不能这样设置，于是删掉canvas的.
2021-03-18 14:18:23
1578
原创 openLayer在地图上选择线段或者多边形
watch: { drawData: { handler (val) { this.isAirport ? this.showPolygon(this.drawData) : this.showPolyline(this.drawData) }, deep: true }}drawInteraction () { this.map = new Map({ target: this.$refs.map, layer
2021-01-07 11:06:38
352
原创 vue中详情页改变状态使列表页保存页码的基础上刷新状态
最近在项目中遇到了一个需求，在详情页改变列表页也存在的状态时，列表页需要在保持页码的状态下刷新状态，但是这个需求是在路由中不携带页码而且没有把页码存在storage的基础上实现的，于是小仙女查阅 各大资料均没有头绪，最终经过反复试验测试，终于有了思路！
2021-01-07 10:35:13
1163
原创 使用Webpack搭建项目
我们先来看一下，目录结构是这样的：然后详细说一下搭建项目的过程：1.我们需要下载的依赖有：//1.初始化项目，生成package.json文件npm init //2.引入 webpack4 npm install webpack webpack-cli --save-devnpm install clean-webpack-plugin --save-dev//3.引入 webpack4npm i html-webpack-plugin html-lo
2020-05-12 14:33:30
180
原创 打包vue项目
把router文件夹中的index.js中的history改为hashconst router = new VueRouter({ mode: 'history',//改为hash base: process.env.BASE_URL, routes})把vue.config.js中的publicPath和assetsDir路径都改为“./”module.export...
2020-04-19 16:12:59
204
原创 vuex的安装及使用
在我们安装vue项目的时候，我们可以选择自动安装或者不安装vuex，如果忘记安装，可以采用以下方法来手动安装安装npminstallvuex--save在vue项目中的src文件夹中创建store文件夹在store文件夹中创建index.js文件在js文件中引入vue和vuex...
2020-04-19 11:33:28
266
原创 vue常见问题汇总（二）：Vue监听路由变化
本仙女亲测有效：只需要在App.vue文件的router-view标签中加上:key="$route.fullPath"即可
2020-04-18 14:51:32
182
原创 Vue常见问题汇总（一）：Cannot set property $http of #<Vue> which has only a getter
// import VueResource from 'vue-resource'// Vue.use(VueResource);把这两个注释了就可以了
2020-04-18 13:44:43
19015
1
原创 一段代码解决Vue双击路由出现的报错:Uncaught (in promise)
很多小伙伴最近在使用vue-router时出现了以上的报错，那么如何去解决这个问题呢？将代码复制到main.js中 importRouterfrom'vue-router'constoriginalPush=Router.prototype.pushRouter.prototype.push=functionpush(location)...
2020-04-17 14:27:07
1100
原创 Node基础之Gulp----合并文件 复制图片 压缩图片 压缩JS并转译babel sass转换成css css的浏览器前缀 压缩文件成zip browserSync
一、模块的分类及引入方法原生模块 （nodejs中的模块） varxxx=require("模块名")第三方模块 （npm中发布的模块）npminstall模块名（或者npminstall--save模块名）varxxx=require("模块名")自定义模块本地自己去用的，...
2020-04-03 18:04:45
373
原创 Sass安装
1.sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）2.安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。如下图：安装完成后需测试安装有没有成功,运行CMD输入以下命令：...
2020-04-03 11:28:11
184
原创 Javascript模块化编程
一、Javascript各种模块化规范前端发展到今天，已经有不少模块化的方案，比如CommonJS（常用在服务器端，同步的，如nodejs） AMD（常用在浏览器端，异步的，如requirejs）（Asynchronous Module Definition） CMD（常用在浏览器端，异步的，如seajs） UMD（AMD&& CommonJS）这些模块...
2020-04-02 16:05:59
267
原创 淘宝banner移动端案例--结合swiper使用
这个案例实现的功能包括：下拉刷新，轮播图滑动距离未超过一半回到当前图片，超过一半则进入下一张图片，轮播过程中不能下拉刷新，下拉刷新过程中不能轮播。实现的效果图：实现的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...
2020-03-25 20:32:38
441
原创 移动端事件应用之targetTouches
一、移动端块的移动二、移动端方向锁定一、移动端块的移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
2020-03-25 16:15:46
973
原创 移动端事件使用中遇到的问题（click延迟，点透）
一、click在手机上的延迟问题（300ms左右）1.加上视口width=device-width解决苹果user-scalable=no解决安卓<meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable = no">2.使用fastcli...
2020-03-25 16:09:48
233
原创 jsonp的封装及使用
function jsonp(url,data,callback){ // 1. 生成一个随机的函数名 // 如果调用过快 还是会生成一样的函数名 为了降低函数名字重复的概率 后面可以在跟上一个随机数 var fnName = "fn_"+Date.now() + Math.floor(Math.random()*1000...
2020-03-24 15:14:16
110
原创 fileReader之自定义显示图片的盒子以及drawImage实现的案例
一、fileReader二、图片的预览案例三、截取视频中的某一帧四、图片压缩一、我们可以使用fileReader属性来把用户通过input的file类型选择的图片展示在自己写的盒子里html部分：<input type="file" name="" id=""><div class="box"></div>js部分： ...
2020-03-24 14:53:37
187
原创 HTML5之canvas基础及应用 面向对象封装多个小球运动实例
一、canvas基础canvas一般应用于HTML5游戏和数据可视化。canvas默认大小是300*150 ，可以通过在canvas标签内使用width和height这两个属性设置画布的大小，canvas画的图是位图，操作canvas需要借助js。var canvas = document.querySelector("canvas")var ctx = canvas.getCon...
2020-03-24 12:32:59
478
原创 HTML5之audio自定义控件案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2020-03-24 10:34:45
1805
原创 HTML5之地理定位
若要判断浏览器是否支持地理定位，请看下面的代码：if(navigator.geolocation){//第一个参数是成功的回调，第二个是失败的回调，第三个是一些配置navigator.geolocation.getCurrentPosition(function(position){position.coords.latitude//纬度...
2020-03-24 10:19:24
273
原创 离线存储之Application Cache
1、什么是应用缓存（Application Cache） HTML5引入了应用程序缓存（又叫离线缓存），这意味着web应用可进行缓存，并可在没有网络连接时进行访问。2、应用缓存的优势 1）离线浏览-用户可以在离线状态下浏览网站内容 2）速度-因为数据被存储在本地，所以速度会更快 3）减少服务器负载-浏览器只会下载在服务器上发生改...
2020-03-22 16:35:06
376
原创 自己封装的rem
;(function(){ /*以750px的宽度的设计图为标准动态的设置html 的fontSize 达到缩放的效果*/var doc = document.documentElement, // 获取到html元素 resize = function(){ var WIDTH = doc.clientWidth, fontS...
2020-03-22 14:39:40
340
原创 CSS3实现的案例
一、街头霸王<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
2020-03-22 13:16:33
210
原创 根据设备方向不同加载不同样式
一、CSS3所提供的新功能，操作起来方便快捷，唯一的不足就在于其兼容性不是很好，毕竟古老的浏览器都不兼容。二、使用window中的orientation属性以及方法，进行设备是否旋转的控制。相比之下，第二种方法比第一种的兼容要好一些，但是有限。三、兼容性比较好，但是，性能却不是很好——利用计时器配合功能的实现，每隔一段时间检测一下当前屏幕的宽度和高度，并进行比较。第一种：CSS3媒体查询&l...
2020-03-22 11:44:37
260
原创 VScode自动补全CSS3前缀插件以及配置无效的解决办法
1.在vscode中搜索Autoprofixer2.在安装完成之后要配置在需要添加前缀的css文件上，右键点击命令面板，输入Autoprefixer CSS就好啦ps: 如果想要兼容性最好的话，需要在设置配置文件setting.json里加上(打开设置->搜索autoprefixer->点击在setting.json里编辑)//这是比较完整的兼容配置，可以根据自己的情况有...
2020-03-22 11:10:20
3251
原创 不使用trim自己封装兼容IE的去空格方法
/** *@method trim 去除字符串两端空格以兼容IE6,7 *@param{string} str 要去除空格的字符串 *@return {string} 处理完成的字符串 */ function trim(str) { for (var i = 0; i < str...
2020-03-21 17:00:41
126
原创 js对象的深拷贝和浅拷贝
1.深拷贝function deepCopy(obj) { var result = Array.isArray(obj) ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object' &&...
2020-03-21 15:25:06
68
原创 面向对象的四种模式及面向对象与浅拷贝结合的应用实例
1. 工厂模式缺点：1.没有new 2.浪费内存 function createPerson(name,age){ //原料 var obj = new Object(); //加工 obj.name = name; obj.age = age; ...
2020-03-21 14:57:50
168
原创 不同情况下this的指向以及改变this指向的方法
1.改变this的指向1.call() 有多个参数，第一个参数是改变的this指向，剩余的参数是实参 fn.call(fn2,12,5,8) 在fn中 this代表的是fn2 12,5,8 代表是fn的实参2.apply() 有两个参数，第一个参数是改变的this的指向，第二个参数，形式是数组的形式，放的是函数的实参 fn.apply(fn2,[12,5,8])...
2020-03-21 14:38:22
538
原创 jQuery的validate插件中的errorPlacement属性还可以这样修改
html部分代码如下<form action="" method="post" id="login"> <input type="text" class="account_ipt" name="email" placeholder="邮箱" id="email"> <div class="login_list_email"></d...
2020-03-20 18:18:35
1978
1
原创 使用Cookie以及遇到的问题
首先分享一下我自己封装的设置cookie，获取cookie以及删除cookie的三个函数：1.获取cookiefunction getCookie(name) { //获取到cookie var cookies = document.cookie; // 给name拼接上= name += "="; var arr = cookies.split("; ...
2020-03-20 17:44:20
413
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人