- 博客(68)
- 收藏
- 关注
RSS订阅原创 利用html2covans 截图，绘圈
功能展示如图所示代码实现原理：1.利用html2-cavans 对当前元素截图生成base64的图片格式2.利用cavans在img图片绘制圆圈并定位图形位置3.将绘制后的img图片再次利用html2-cavans生成新的img图片具体代码见：GITHUB...
2020-11-24 13:53:14
355
原创 获取本周本年本月时间
function getCurrentdate() { var startStop = new Array(); var currentDate = new Date(); var currentMonth = currentDate.getMonth(); var currentYear = currentDate.getFullYear(); .
2020-07-08 13:57:35
344
原创 从0开始搭建react项目实践
1.全局安装create-react-appnpm install -g create-react-app2.创建项目，安装依赖create-react-app my-react-app3.进入项目，启动项目cd my-react-app npm start4.创建src项目结构路由状态管理redux工具类图片管理组件路由组件routerst...
2020-01-14 14:55:43
421
原创 解决IOS的h5唤起键盘导致页面元素错位
在input绑定blur事件： blur(event) { let result; if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS result = 'ios'; } else if (/(Andro...
2019-10-11 16:19:36
848
原创 html2canvas 实现dom转png
首先：npm install vue-html2canvas在需要的页面 ： import html2canvas from “html2canvas”;使用中： this.$nextTick(() => { let dom = this.$refs.imageWrapper.$refs.inviteInfo; html2canvas(dom, ...
2019-08-07 18:57:15
558
原创 vue-cli3 快速配置多环境变量
vue-cli3 搭建的项目其实看起来比 cli2 简单明了很多，官方也有相关文档对多环境变量配置的描述。https://cli.vuejs.org/zh/guide/mode-and-env.html1.首先：通过为 .env 文件增加后缀来设置某个模式下特有的环境变量通过传递 --mode 选项参数为命令行覆写默认的模式在项目的根目录新建3个文件夹，分别对应开发（dev），测试（te...
2019-06-17 15:52:35
12056
6
原创 vue配置开发、测试、生产环境（不同环境，不同命令）
1.我们借助 cross-env 插件跨平台地设置及使用环境变量npm安装方式：npm i --save-dev cross-env2.我们对config文件夹做配置，新建一个test.env.js（test:测试环境） 文件来配置我们的测试环境，代码如下：（NODE_ENV与ENV_CONFIG的参数都是双引号包单引号，否则会报错）3.同理配置prod.env.js（prod:生产...
2019-06-13 16:41:45
14204
5
原创 一个数组多个对象，根据对象相同属性重新组件新数组
json结构如下：var stu_list = [ {name:'lili',uid:123,exam_id:234,score:12}, {name:'lili2',uid:321,exam_id:234,score:12}, {name:'lili',uid:123,exam_id:231,score:120}, {name:'lili2',uid:321,...
2019-04-20 12:37:21
1541
原创 聊一聊js闭包以及常见的运用场景
1.首先我们有个需求是，有一段ul，循环给里面的li绑定事件；页面布局这样子的，现在我们需要用到闭包来实现这样一个需求：方法一：绑定事件放在立即执行函数中function callback(text){ document.getElementById(text.id).innerHTML = 'hello world'}function setListMsg(text){ ...
2019-04-12 10:37:17
1034
原创 对js原型和原型链的理解
原文来自：https://juejin.im/post/5c64d15d6fb9a049d37f9c20每次面试必问题，其实概念很抽象，不过我们先看一张图来理一下思路：概念：原型（prototype）：一个简单的对象，用于实现对象的属性继承（即对象的爹）；每一个对象都有一个__proto__的属性指向该对象的原型。构造函数：通过 new 来创建一个对象的函数实例：通过...
2019-04-11 17:25:21
682
原创 CSS盒模型的理解
在面试中，我们常被问到CSS的盒模型，那么今天我们就来聊聊这个东东。概念：页面渲染是，DOM元素所采用的布局模型，可以通过 box-sizing 来进行设置。分类：标准盒模型IE盒模型width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。width 和 height 指的是内容区域+bord...
2019-04-11 16:11:05
225
原创 记录一段关于js速度运动的代码
描述：我们想要达到的效果是，当鼠标移入 ‘提示’ 框的时候，左侧的 div显示到固定位置，移出回到原始位置。1.首先我们需要了解的是 js的鼠标移入事件： （不论鼠标指针穿过被选元素或其子元素，都会触发）onmouseover ： 移入onmouseout ： 移出了解一下：mouseenter ：只有在鼠标指针穿过被选元素时，才会触发mouseleave ： 只有在鼠标指针离开被选...
2019-04-10 12:04:55
389
原创 聊一聊 本地存储那些事儿
前端本地存储用得最多3种方式：cookie , sessionStorage , localStorage1.关于cookie ：服务器与浏览器之间来回传递，储存大小不能超过4K，同时每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识，cookie只在设置的cookie过期时间之前一直有效，在所有同源窗口中都是共享的。document.cookie=…...
2019-03-26 10:42:24
235
原创 记录一段table的js逻辑判断（详情见下图）
后台返回的数据机构是这样的：let list= [ {school_name: "世纪阳天体验学校", school_id: 1, score_level: 1, count: 0, proportion: 0}, {school_name: "世纪阳天体验学校", school_id: 1, score_level: 2, count: 0, ...
2019-03-08 11:37:02
404
原创 前端对图片加载失败做默认图片处理
类似于下面图片展示这样：1.JQ的写法：获取该图片的class，采用jq的one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。 $('.top_mg').one("error", function(e){ //加入相应的图片类名 $(this).attr("src", &a
2019-03-07 10:42:19
5619
原创 根据后台返回的字符来绘制验证码图形
开始之前还是看一下我们想要的效果1，首先像图片当中这样的验证码图形，我们采用的canvas来绘制的2，用户的输入是自主无控制的，所以我们在提交表单之前需要对用的验证码输入进行大小写的转换//这里的code就是用户的输入 if( /[a-z]/.test(model_code) ){ code = code.tolocaleLowerCase(); ...
2019-03-06 16:02:41
1099
原创 关于table升序，降序，上移，搜索，分页那些事儿
开始之前先看看闲着没事儿，写的一个页面：简单描述一下，思路和实现的步骤：1.搜索： 采用vue的computed 计算属性在不改变原数组的情况下，过滤出用户搜索的信息2.升序，降序： 采用js 的 sort() 方法，升序 a-b, 降序 b-a3.上移： 利用 Vue.set() 响应式新增与修改数据4.分页：自主封装了一个组件，子组件触发父组件的方法采用 this.$emit() ...
2019-01-26 14:30:38
572
原创 记录一段Js:用url取值
function request(paramName) { var paramValue = ""; var params = window.location.href.split('?')[1]; if (params == null || params == "") return paramValue; var arr = params.spl...
2019-01-18 10:56:39
320
1
原创 记录一段js:判断数组元素连续或者不连续
如果我们拿到一个数组的解构是这样的：[‘2’,‘3’,‘5.5’,‘6’,‘7’,‘8’,‘12’,‘12.1’,‘13’,‘16’,‘17’]我们需要把它变成这样：2-3，5.6，6-8，12，12.1，13，16-17思路：1，先将数组连续的数字push进一个新的数组2，再通过 map 遍历这个数组function sort(arr) { var result = [];...
2019-01-11 12:03:04
5472
原创 Vue封装 分页组件
思路：1.父子组件通过 props 传递相关参数2.子组件改变父组件的参数通过 $emit 方法来触发代码：<div class="Pagination"> <div class="page-bar"> <ul> <li><a v-on:click=&quo
2019-01-03 16:20:47
1156
1
原创 关于vue中input双向数据绑定
我们要实现的原理是，当用户输入一个值，不正确时，程序主动更改这个内容。首先，我们的input框是type=number 类型的；通过v-on:input事件监听用户的输入；min和max控制参数的大小。 <input type="number" min="0" max="300" step="10" v-model.number="s.score" placeholder="总
2018-12-20 16:56:28
8668
原创 React -- 搭建项目
React是当前前端比较火的框架之一，主要用于搭建响应式的前端页面。第一步：安装node: node.js官网我们用npm创建新的项目，首先用npm 安装 create-react-app脚手架，其可以自动地在本地目录中创建react项目。（PS:UI框架推荐：ant design与ant design pro）在cmd命令行中输入： npm install -g create-rea...
2018-12-06 16:33:54
353
原创 H5离线存储 Manifest
理解：离线存储可以将站点的文件储存在本地，在没有网络的情况下还是可以访问到存储的对应的站点的页面，这些文件可以包括html，js，css，img等等文件。但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件。什么是Manifest：Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。Manifes...
2018-12-05 14:16:38
893
原创 如何实现图片懒加载
原文来自微信公众号：web前端学习圈什么是懒加载？懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。懒加载原理img标签有一个属性是 src，用来表示图像的URL，当这个属性的值不为空时，浏览器就会根据这个值发送请求。如果没有 src属性，就不会发送请求。...
2018-12-04 16:19:00
1019
原创 JS进度条
<span class="data"></span> <div class="main"> <div class="line"></div> <div class="inner"></div>
2018-11-22 14:11:20
433
原创 js对数组做处理(数组去重 + 数组对象去重)
1 . 利用双层循环，对数组去重function unique(arr) { var ret = []; var len = arr.length; for (var i = 0; i &lt; len; i++) { for (var j = i + 1; j &lt; len; j++) { if (arr[i] === a...
2018-11-21 16:18:54
3284
原创 js 相关语法（json数据处理）
1 . 将数组里面的对象的每一项的值 转换成 字符串 类型PS:比较String() 和 toString() 两种方法；都是将其它类型的变量转换为字符串的方法,BUT,toString():无法转换null和undefined故：String() 比 toString() 在我们日常工作中的应用更为广泛...
2018-11-20 15:01:39
168
原创 自定义 Table 搜索功能 + 降序 +升序
如上图，实现表格简单的搜索和排序功能，搜索： 利用 vue 的 computed 计算属性来实现；代码如下：export default { data() { return { headList:['序号','姓名','性别','年龄','得分'], tableData:[ {'num':1,'name':'lilo','sex':...
2018-11-20 10:00:40
534
原创 对js深拷贝和浅拷贝的理解
1.数据的基本数据类型：Number, null ,undefined , String , boolean基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。其值存储在栈内存中。2.数据的复杂（引用）数据类型：Array , Object , Function , Data引用数据类型的值储存在堆内存中，所以，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用...
2018-10-22 14:35:45
409
原创 VUE的图片预览插件 vue-photo-preview
1.安装：npm install vue-photo-preview --save2.在main.js 入口文件中配置：import vuePicturePreview from 'vue-picture-preview'Vue.use(vuePicturePreview)3.页面渲染：情况一： 页面本身就存在img标签，且是独立的一个：src 对应后台返回的图片路径pr...
2018-10-18 14:06:22
9700
5
原创 移动端开发（时间验证）和（金额验证）和（重复提交）
如下，在下面这样一个页面当中，如果用户在网络不好的情况下，重复提交需要做得验证：效果图如下：思路如下：1.我们定义一个全局变量 fleg = false; 来控制在提交时的一些操作；如果 fleg = false 正常提交，否则提示‘请勿重复提交’2.在提交的过程中 因为 ajax 是一个异步的操作，在这个同时更改 fleg 的值 为 true, 如果提交成功了，更改 fleg 的值变为...
2018-10-18 11:37:23
504
原创 正则验证数字、小数和字符
changeNum:function(s){ if (s.score_rate == null || s.score_rate == '') { return; } var reg = /\d{0,3}\.\d{1}/;//验证小数 var regint = /\d{0,1}/; //验证数字 var regzero = /^0*$/; //验证字符 ...
2018-09-21 11:20:12
1906
原创 vue封装可复用组件confirm，并绑定在vue原型上
首先我们需要创建 confirm.vue ， confirm.js这两个文件，一个实现dom结构，一个实现相关逻辑confirm.vue&lt;template&gt; &lt;div class="confirm" v-if="isShow"&gt; &lt;div class="con_box&a
2018-09-18 16:32:01
6179
原创 axios请求之前带上全局参数
// 测试地址const API = { local:'XXXXX', online:'XXXXX', };var login_key,uid;function getQueryVariable(val) { if( val == 'exam_subject_id'){ var query = window.location.hash...
2018-09-13 11:29:24
4029
原创 如何将一个数组的数组项作为删除另外一个数组的索引值
var a = [1,2,3,4,5,6,7,8]var b = [2,3];function c(arr, arr2) { return arr.reduce((prev, cur, index)=&gt;{ let [idx, list] = prev; idx.indexOf(index) == -1 &amp;&amp; list.push(cur); r...
2018-09-05 16:25:55
682
转载 CSS3中的content字符编码，content小的icon地址
.myCheck + label{ display: inline-block; background-color: white; border-radius: 2px; border:1px solid #d3d3d3; width:20px; height:20px; line-height: 20px; margin-right: 10px; text-a...
2018-09-03 10:15:11
1372
原创 关于 rem在移动端横屏竖屏的适配问题
function setRem(){ var is_horizontal = 1, remNum = 13.34, c_width; if(request('is_horizontal')){ is_horizontal = request('is_horizontal'); } if(is_horizontal == 0){ rem...
2018-08-27 11:33:02
2130
原创 vue基于webpack配置多文件入口
先查看一下搭建好的文件结构： 根据 vue-cli 搭建的基于webpack 的项目，如图所示，更改build 文件夹里面的相关文件。1.第一步： 更改 build - utils.js 文件，配置多文件入口， 在文件最后加入以下代码：var glob = require('glob')// 页面模板var HtmlWebpackPlugin = require('h...
2018-08-16 13:53:23
3104
2
原创 CSS3实现div滑入滑出效果（从下往上）
1，首先需要用的是 CSS3的 target 选择器，配合a标签指定id选择器切换目标元素，用于选取当前活动的目标元素。 2，CSS3 的 transition 动画，这里不做详细介绍看一下效果图： 点击滑出按钮，元素从底部匀速滑入到页面一定高度；再点击滑入，元素从当前位置匀速滑入期初位置。 直接上代码：<h1>CSS3滑入/滑出效果</h1>&...
2018-08-13 17:54:52
67495
1
原创 关于在 vue项目中对echarts图表的一些控制（及数组对象去重）
1.利用replace对后台返回的json数据做替换处理 (不管是多么复杂的数据结构，都可以利用这样的方法去全部匹配)var json = [{'real-name':'lolo'},{'real-name':'abc'},{'real-name':'LILI'}]var list = JSON.parse( JSON.stringify(json).replace(/real_name/...
2018-08-07 14:16:34
5612
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人