- 博客(74)
- 收藏
- 关注
RSS订阅原创 模仿Parallax写一个简单的视差效果
前言之前写项目的时候一个需求效果是两个元素需要有一个视差特效，使用的是Jquery的Parallax插件，只是为了学习一下，主要原理就是通过监听鼠标移动事件，来修改指定元素的left,top值。样例如下：代码DOM结构// 希望哪个元素有视差效果，就设置clss类为parallax_item，设置data-deep值越大，移动的幅度越小<div id="div1" class="...
2019-12-20 16:35:04
360
原创 ios手机中input框失去焦点之后不能再次输入
问题描述一个弹出层中有input输入框，第一次输入内容后ios键盘收起，再次点击input框输入内容时获取不到焦点原因在弹出层点击input时调起键盘，页面会被顶上去document.body.scrollOffset大于0，收起键盘时scrollOffset不变，造成焦点错位。安卓手机点击时调起键盘不会把页面顶上去，会改变窗口高度变化，收起时不会造成影响。解决办法$('input,s...
2019-12-10 20:08:36
745
原创 vue-awesome-swiper踩坑记录
一、使用vue-awesome-swiper的正确方法vue-awesome-swiper是基于swiper的，安装vue-awesome-swiper时swiper会自动安装1、查看本地是否安装vue-awesome-swiper包npm ls vue-awesome-swiper //查询本项目中是否安装此包npm ls vue-awesome-swiper -g //查询全局中是...
2019-12-03 17:14:49
1250
原创 原生JS实现vue中data值的修改与渲染
前言砖搬多了就得想想怎么造砖，Vue使用多了，也得想想Vue是咋实现，Vue用着确实舒服，仔细了解一下，背后做的操作也太多了吧，但是再多的操作也是一个一个积累起来的吧！先记录一下怎么实现data中值的渲染与修改class Wvue extends EventTarget { constructor(option) { super() console.log(option)...
2019-11-22 00:24:13
4129
4
原创 解决pc端鼠标浮上二态闪烁问题
问题描述最近遇到一个pc端的小bug,一个按钮的hover二态是一个序列帧动画，页面刷新后鼠标浮到按钮上二态的动画有一个明显的闪烁，这让我的体验就很不好了，更别说用户了。之前也遇到过二态闪烁的情况，但是那个二态是一张静态图，直接用雪碧图合并一下就OK了，但是这次是一个序列帧动画呀，没办法合并，怎么办呢？找闪烁的根本原因呗根本原因hover的时候图片要加载显示到页面上，在加载的时候就会闪烁一下...
2019-11-21 21:47:19
261
原创 Vue插件loading插件
前言在写vue项目的时候，比组件更灵活更方便的是用插件，下面先写一个简单的loading插件，之后会将以前写的弹出大图，视频的插件依次记录下来loading.vue<template> <div class="loading-wrap" v-if="isShow" > <div class="loa...
2019-11-18 22:15:56
477
原创 Webpack搭建（一）:使用webpack编译es6代码
初始化准备提前要全局安装node.jsmkdir <项目名称>cd <项目名称>npm init //初始化一个package.json文件npm i -D webpack webpack-cli //在项目中安装webpack和webpack-cliwebpack -V //检查webpack的版本webpack-cli -V // 检查webpack...
2019-11-15 16:43:56
385
原创 Webpack了解
什么是WebpackWebpack是一个模块打包器，根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。前端模块加载前端模块要在客户端中运行，需要加载到浏览器中。模块加载和传输有两种极端的方法：1、每个模块文件都请求一次，2、把所有模块都打包成一个文件，然后只请求一次。但是这两个都不是好的解决方法，第一个每个模块都单独请求造成请求次数太多，应用启动速度会变慢，第...
2019-11-14 21:55:36
166
原创 初探React(一)
React是什么？React是用于构建用户界面的Javascript库命令式编程和声明式编程命令式编程：详细的命令机器怎么（How）去处理一件事情以达到你想要的结果，重在How声明式编程：只告诉你想要的结果（What），机器自己摸索过程（How）,重在What命令式编程：js声明式编程:SQL数据库，React框架如何使用React基于浏览器模式React.js提供React....
2019-11-12 14:44:58
142
原创 JS中数组扁平化方法
要求将多维数组转化为一维数组let arr =[1,[2,[3,[4,5]]],6]let str = JSON.stringify(arr)1、调用ES6中的flat方法let ary = arr.flat(Infinity)console.log(ary) //[1,2,3,4,5,6]2、replace+splitlet ary = str.replace(/(\[|\...
2019-11-08 09:58:54
232
原创 vue项目中监听鼠标滚轮事件
描述通过鼠标向下滚动或者向上滚动做相应的事件代码<div class="container-box" @wheel="handleWheel"></div> //节流函数 throttle (fn, gapTime) { let _this = this return function () { let _nowTime...
2019-11-02 21:05:27
3988
原创 解决伪元素设置图片鼠标浮上会闪烁问题
问题描述：4个导航按钮，都有hover二态，在某些情况下我需要把按钮图片放在伪类里，在谷歌浏览器上刷新后鼠标浮上图片会闪一下，下面是css代码 &:nth-of-type(1) { top: 33px; &:after { width: 20px; height: 86px; pos...
2019-11-02 19:50:33
564
原创 用CSS实现类似信纸一样的虚线
先提需求吧设计稿文案中每行文字下面都有一行虚线作为分隔，找了一张图，大致就如下一时间我咋搞，没想法呀，文案要是有规律，一句话就一行那还好办一句话一个p标签，给p标签设置border-bottom,关键是这有的文案一句话要占好几行，有的一句话一行，总不能编辑改完我再一个个修吧，是电视剧不好看还是公司不care效率呀，这且不说，代码写成这，自己能跟自己过的去吗？只能想办法了。。。（双端pc+移动...
2019-11-02 18:16:58
2633
原创 使用pointer-events禁止某个元素的hover状态
一、前提：一个列表的切换按钮，在鼠标浮上的时候有二态显示，点击按钮直到列表的尽头时，按钮会被禁止点击，但是这个时候鼠标浮上还会有二态显示，怎么办呢？这个时候我需要在鼠标浮上的时候:hover不起作用二、解决办法：pointer-events在这个按钮被禁止的时候设置pointer-events:nonepointer-events取值：对于浏览器来说，只有auto和none两个值可用，其...
2019-10-23 20:47:34
2692
原创 将dev分支中的内容合并到master分支中
1直接将线上的master分支中的代码拉下来，2.查看本地分支git branch3.新建分支并且切换 到devgit checkout -b dev执行完这个命令，现在就是位于dev分支下，修改代码提交。。。。。最后如果分支上的代码没有问题，接下来就是合并到主分支上4.先切换到master分支上git checkout master5.把远程的master分支上的代码先p...
2019-10-21 21:50:19
1566
原创 canvas圆形进度球html5水波动画特效
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>canvas圆形进度球html5水波动画特效</title> <style type="text/css"> #c { ...
2019-09-14 18:50:23
1115
原创 JS获取嵌套数组对象中的某个key对应的值
前端面试的时候遇到一道需要现场写代码的题，如下比如一个数组arr = [{hr: [ "System Architect", "$3,120", "2011/04/25" ], office: "Edinburgh", "extn": "5421"}，{name:'hongyi'}，[1,2,3]]就先按照这个样例来吧，如果我要获取name的值改怎么写一个函数呢本人能力有限，写的...
2019-07-27 15:03:20
19091
3
原创 Windows下安装【nginx】
介绍ngnix是高性能的web服务器，开源免费 一般用于做静态服务器，负载均衡反向代理在用node.js做个人博客开发时，只用到nginx反向代理如果请求直接是根目录形式，nginx直接html,如果有/api形式的，就通过nginx代理到node.js上访问接口nginx的安装与启动下载nginx http://nginx.org/download/nginx-1.12....
2019-07-10 16:12:32
129
原创 Node.js连接不上MySQL数据库
报错Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client at Handshake.Sequence._packetToError (E:\代码练习\node\blog-1...
2019-07-06 10:00:01
3389
3
原创 cmd用管理员身份打开
有时候操作一些文件时需要用管理员身份打开cmd,我自己的电脑比较坑，每次只能打开cmd文件所在位置然后右键用管理员身份打开。怎么让它快点打开，不用耽误我那么长时间，第一种方法1、在C:\Windows\System32这个目录下找到cmd.exe程序，2、右键选择【创建快捷方式】，3、下次在桌面上直接打开就是用管理员身份第二种方法1、在C:\Windows\System32这个目录下找...
2019-07-06 08:54:28
6547
1
原创 【剑指offer】【JavaScript】栈的压入，弹出序列
题目描述输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈的压入顺序，序列4,5,3,2,1是该压栈序列对应的一个弹出序列，但4,3,5,1,2就不可能是该压栈序列的弹出序列。（注意：这两个序列的长度是相等的）解析这道题用的是栈的思想，之前在leetcode上做过几道这样的题，由于没有经常复习...
2019-06-28 10:29:31
166
原创 【剑指offer】【JavaScript】链表中倒数第k个结点
描述输入一个链表，输出该链表中倒数第k个结点。思路创建两个指针，都指向头节点，让第一个指针先走k-1步，到达第k个结点，然后让第二个指针从头节点开始走（这时第一个指针和第二个指针相差k-1个节点），第一个节点继续走，当第一个节点到达末尾时（这时第一个指针和第二个指针相差k-1个节点），所以此时第二个节点所在的位置就是倒数第k个节点代码/*function ListNode(x){ ...
2019-06-13 19:51:01
547
原创 【剑指offer】【JavaScript】调整数组顺序使奇数位于偶数前面
描述输入一个整数数组，实现一个函数来调整该数组中数字的顺序，使得所有的奇数位于数组的前半部分，所有的偶数位于数组的后半部分，并保证奇数和奇数，偶数和偶数之间的相对位置不变。举个列子吧2 3 4 1 6 9 7输出之后就是3 1 9 7 2 4 6我的思路就是创建两个空数组分别放奇数和偶数，for循环原数组，将分辨出的奇数和偶数放在两个数组中，最后用concat 拼接一下代码fu...
2019-06-12 20:27:09
185
原创 【剑指offer】【javascript】变态跳台阶
描述一只青蛙一次可以跳上1级台阶，也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳法。一级：1种二级：2种（1 1， 2）三级：4种（1 2， 1 1 1， 2 1， 3）四级：8种（1 1 2， 2 2, 1 2 1， 1 1 1 1， 2 1 1， 3 1 ， 1 3， 4）五级：16种（1 2 2， 1 1 1 2， 2 1 2， 3 2, 2 3...
2019-06-12 16:43:54
228
原创 【剑指offer】【javascript】跳台阶
描述一只青蛙一次可以跳上1级台阶，也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法（先后次序不同算不同的结果）。一级台阶：1种二级台阶：2种（跳1级或跳2级）三级台阶：3种（1 1 1, 1 2, 2 1）四级台阶：4种（1 1 2， 2 2，1 1 1 1， 1 2 1， 2 1 1）…根据上面几个举例可以得出f(n）= f(n-1)+f(n-2)代码实现functi...
2019-06-12 16:01:09
213
原创 【剑指offer】【JavaScript版】 斐波那契数列
描述大家都知道斐波那契数列，现在要求输入一个整数n，请你输出斐波那契数列的第n项（从0开始，第0项为0）。n<=390 1 1 2 3 5 8 13…解题把f(n-1)和f(n-2)的数保存起来，然后根据f(n-1)和f(n-2)计算出f(n)代码如下function Fibonacci(n){ if(n<2){return n} var preone ...
2019-06-12 15:23:17
269
原创 将master上的分支同步到其他分支上
问题场景描述在一个项目中除了主分支，我有创建了两个分支index-header 和 index-content在index-header上写完头部内容后提交，合并到master分支上，但是切换到index-content分支上时，index-header上的内容不存在，于是问题来了，怎么把master上的内容弄到index-content上？解决办法：1.切换到master分支上 git...
2019-06-01 16:41:18
7242
原创 DNS解析过程
DNS解析过程1、在浏览器中输入www . qq .com 域名，操作系统会先检查自己本地的hosts文 件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。 2、如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TC...
2019-05-30 08:50:44
202
原创 回流和重绘
在学习前端如何优化网站性能时将减少重排（reflow）也就是回流（下面都写为回流）作为一种方法，于是想把回流和重绘的区别记录下来回流：render树中元素的规模尺寸，布局，隐藏改变需重新构建，称为回流，每个页面至少一次回流，就是在页面第一次加载的时候。重绘：回流时，浏览器会使渲染树中受影响的部分失效，重新构造这部分渲染树，完成回流，浏览器会重新绘制受影响的部分到屏幕上，改过程为重绘。注意：...
2019-05-29 10:58:18
390
原创 页面自动添加font标签
问题描述：使用vue的ref来获得dom节点中的内容，代码如下<div id="app"> <div ref='hello' @click="handleClick"> hell0 WORLD </div> </div> <script> v...
2019-05-27 16:56:37
2406
3
原创 【剑指offer】【js】用两个栈实现一个队列
题目用两个栈来实现一个队列，完成队列的Push和Pop操作。 队列中的元素为int类型。就相当于这里的push是队列中的入列，pop是队列中的出列，那么主要的操作就是在pop中实现了，因为队列中的入列和入栈是一样的1、先构造一个Stack的构造函数；2、创建两个栈stack1, stack2 ,把stack2看作一个过渡的栈举例：将1，2，3，4，5，6依次入栈，存入stack1中即s...
2019-05-24 17:34:56
448
原创 【剑指offer】【js】重建二叉树
输入某二叉树的前序遍历和中序遍历的结果，请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6}，则重建二叉树并返回。
2019-05-24 14:57:43
215
原创 【剑指offer】【js版】从尾到头打印链表
题目输入一个链表，按链表值从尾到头的顺序返回一个ArrayList。思路1、利用栈来解决，先把链表的每一个节点都push在数组中，那么栈顶的元素即为第一个要输出的/*function ListNode(x){ this.val = x; this.next = null;}*/function printListFromTailToHead(head){ va...
2019-05-23 15:56:58
130
原创 【剑指offer】替换空格【JavaScript】
题目描述：请实现一个函数，将一个字符串中的每个空格替换成“%20”。例如，当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。第一种解法：用正则表达式，function replaceSpace(str){ return str.replace(/\s/g,"%20")}刚开始写return str.replace(/\s...
2019-05-23 14:20:36
118
原创 小程序返回上一页并对上一页数据刷新
写小程序时需要实现从首页进入答题页面，答完题后，首页中这套题的状态需要发生改变。并且这个答题页面也许是从更多中进去的第一次的解决办法：在答题页面的页面卸载周期进行操作onUnload:function(){ let pages = getCurrentPages(); //页面栈 let beforePage = pages[pages.length - 2...
2019-05-22 18:29:09
9485
1
原创 【剑指offer】二维数组中的查找【JavaScript】
题目描述：在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。首先想到的第一个办法就是for循环function Find(target, array){ for(var i=0;i<array.length;i++){ ...
2019-05-22 16:52:36
154
原创 小程序中es6的this
在小程序中想用es6实现，以便练习ES6的使用，但是通过点击事件获取data中的数据就开始报错，想通过点击onLike事件获取data中的classicData,如下图所示，我的解决办法：一，改为使用ES5，但是我的最初目的是想练习ES6的使用，那就只能使用第二种方法了二，先定义一个let that在onLoad中that = this...
2019-05-16 15:30:55
224
转载 ES6---Promise
复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？别猜了，直接打印出来看看吧，console.dir(Promise)，就这么简单粗暴。这么一看就明白了，Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很...
2019-05-04 09:27:49
151
原创 数据结构---图【JavaScript】
数据结构--图一、图的概念及实现1、概念：图是一种计算机中使用广泛的结构图分为有向图和无向图2、表示方法1）用邻接矩阵表示无向图，邻接矩阵缺点：a.非常浪费计算机内存。b.添加和删除点很麻烦2)邻接表表示无向图3、邻接表的实现方式var Graph = function(){ //存储顶点用数组表示 ...
2019-04-29 10:41:13
183
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人