dai_yanxia-优快云博客

原创 background-attachment：fixed实现酷炫效果

最近发现一个css的背景图片的属性，可以实现一个很酷璇的效果，根据效果，我给它命名为王者换肤，下面我们来看一下它的实现方式。css3参考手册的背景与边框目录里面，有一个介绍background-attachment属性的，它的值有3个，分别是fixed,scroll,local,他们分别代表的意义如下：首先测试一下scroll属性的效果,页面结构如下： <div class="wrap item1">

2021-09-27 19:25:56 2904 1

翻译 call、apply、bind使用对比

call()、apply()、bind()都是用来干嘛的？我们先来看2个例子例1的运行结果：例2的运行结果：比较一下这两者的this的差别，第一个打印里面的this指向obj;第二个全局声明的shows()函数，this是window。而 call()、apply()、bind()方法就是用来重新定义this这个对象的！如：以上返回的结果都是一致的，this指向了db对象，只是bind方法后面多了一个(),由此也得出结论，bind返回的是一个新的函数，你必须重新调用它才会被执行。

2021-09-27 19:17:48 122

原创瀑布流的3种实现方式

瀑布流的3实现方式1:js 两列布局实现，思路：左右分为两个容器，根据容器的高度（相对低的那一个）决定下一个元素应该放在哪个容器内，这样视觉就实现了瀑布流的效果，代码如下：瀑布流容器<div id="box"></div>js代码//接口获取数据，循环展示 function forList(list){ var HTML = ""; for(var i=0;i<list.leng

2021-09-27 18:57:57 2983

原创 valueOf()和toString()的机制

今天发现一个神奇的现象，效果如下：Date返回的是一串字符串，但是当我们把这个字符串和一个数字相减的时候，结果却变成了一串数字，也就是Date在和数字相减的时候，数据类型发生了转换，转换成了数字，js语言本身在运算符进行加减乘除的时候，也是会做预处理的，会根据运算符的不同，把数据类型转成想要的类型，比如true+1的结果是2,针对如上的现象，我做了深入的研究，发现Date转换成数字是因为它在和数字进行相减之前，默认调用了valueOf函数，我们可以来测试Array，Date,Object,Functi

2020-05-21 15:18:43 338

原创 label 的机制-如何跳出双重循环

项目中我们有时候要进行多重循环遍历，那考虑到性能的问题，如何在循环找到我们想要的结果时，及时终止循环，是一个值得考虑的问题，通常都是我们声明一个变量，用来作为判断循环是否终止的标识，代码如下： var arrObj = [ [0,1,2], [3,4,5], [6,7,8], [9,10,11], ]; for(var

2020-05-21 10:10:53 259

原创 js无法获取伪类详解

js无法获取伪类的详解今天在修改别人的项目的时候，有个逻辑是：点击某个元素进行其他样式的切换，然后我习惯性的用jQuery来进行元素的选取，但是失败了，因为需要点击的元素是个伪类after，但是我不知道为什么会选取失败，之前页面没有遇到过类似的问题，于是查了相关文档，再根据自己以前对浏览器渲染原理的理解，我首先猜测可能js操作DOM而这些伪类虽然可以设置样式，但是不一定存在DOM树上，所以无法...

2020-05-06 14:53:48 291

原创 apache提示Forbidden

apache启动一个服务，总是提示forbidden

2020-04-30 14:36:58 2030

原创 git分支规范对比

现在普遍流行的git规范是GitFlow，但是最近又看到一个新的Git规范，感觉这个新的规范，设计更加合理，并且可以解决GitFlow在项目运用中存在的问题，本文罗列了这两种规范的主要内容，并做了对比。Git并行规范分支流转规范发布分支：该分支从预发布分支合并而来；如果没有预发布分支，则从测试分支合并而来；在将分支（如：预发布分支或测试分支）合并到发布分支前，需要确保 ...

2020-04-30 14:33:14 227

原创 vue的深入理解

1. 一个页面是否可以创建多个Vue实例2. 当el匹配多个元素时，Vue实例会不会分别在每个元素上渲染3. 多个Vue实例挂载到同一个元素上，最终会显示哪一个4. Vue可以用来实例化，那组件可不可以实例化5. 一个组件是否可以注册为多个组件名6. 多个Vue实例是否可以共用一个Vue Router实例7. 多个Vue实例是否可以共用一个Store实例近期项目需要用到Vu...

2020-04-29 10:41:03 799

原创 webstrom常用快捷键整理

拷贝当前打开的文件路径Ctr + Shrit + C(E:\project\a20180410elesport\css\style.css)拷贝当前光标所在位置的索引Ctr + Alt + Shrit + C(css/style.css:61)粘贴历史记录(可以从拷贝的记录中选择要粘贴的代码，不用多次复制)效果如下图:Ctr + Shrit + V删除光标后...

2020-04-21 17:07:00 283

原创 node搭建服务器

如何用node搭建一个简单的本地服务器，方便在接口还没有开发完成之前，模拟数据请求，今天就来简单讲解一下，1.安装node启动服务依赖的包expresscnpm install express --saveExpress 框架核心特性：可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。...

2020-04-16 10:49:07 334

原创 call&apply&bind对比

call()、apply()、bind()都是用来干嘛的？我们先来看2个例子例1的运行结果：例2的运行结果：比较一下这两者的this的差别，第一个打印里面的this指向obj;第二个全局声明的shows()函数，this是window。而 call()、apply()、bind()方法就是用来重新定义this这个对象的！如：以上返回的结果都是一致的，this指向了db对象，只是bind方法后面多了一个(),由此也得出结论，bind返回的是一个函数，你必须重新调用它才会被执行。那这

2021-12-27 22:34:58 333

原创可拉伸背景的3种实现方式

复杂弹框的3种实现方式页面经常会有弹框的需求，有的弹框设计比较复杂，必须用背景图才可以实现，有的弹框的高度需要根据内容来自适应。这个时候，如何做到图片无拉伸及变形，是我们要考虑的问题。本文汇总了针对如上需求的3种实现方案：第一种方案：把背景图片切成3份，其中：头部和底部背景图应用到弹框最外层元素上、中间背景图应用到弹框内容元素上，假如有如下弹框需要实现：可以看到，这个背景图周围有边框，并且背景图带有图案。首先把这个背景图切成3份：实现代码如下：<!-- DOM结构 --&gt

2021-10-26 18:21:29 1558

原创构造函数和继承

属性继承的几种方式1.原型继承：让子类的原型等于父类的实例，代码如下：function Parent1() { this.x = 100;}Parent1.prototype.getx = function getx() { return this.x}function Child1() { this.y = 200}Child1.prototype = new Parent1var c1 = new Child1()console.log(c1.x)console.lo

2021-10-18 10:53:40 197

原创基本数据的包装对象的理解

最近思考2个问题：1:基本数据类型比如 number ,string,boolean,nul,undefined 是没有对象和方法的，那为什么，我们又可以在一个 number string 调用 lenght,slice(),substring()... 等方法；2:既然基本数据类型可以调用一些方法，那我们给一个基本数据类型增加方法和属性的时候，为什么又总是失败？失败的原因是我们添加失败，还是添加成功，只是无法访问。今天我们就来测试一下。第一个问题:基本数据类型为什么可以调用属性和方法这就牵涉到

2021-10-18 10:51:27 123

原创行内元素缩放是否会导致两边的元素向中间靠近

最近发现了css3的transform 属性的一些特殊现象，并做了一些研究，在此和大家分享一下，希望可以加深我们对css3的深刻理解。1 .行内样式是否可以设置transform属性我们来简单测试一下，代码如下：  <div class="box"> <span class="left">左边内容</span> <span class="center">缩放元素</span> &

2021-10-18 10:48:21 221

翻译重排和重绘理解

最近考虑到页面性能优化的问题，想简单总结一下重排和重绘，以帮助我们更好的理解浏览器是如何做到页面及时更新变化的。当DOM的变化影响了元素的几何属性，浏览器需要重新计算元素的集合属性，同样其他元素的集合属性和位置会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程成为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程成为重绘。重排,目前有以下几个原因会导致页面重排：1.添加或者删除可见的DOM元素；2.元素位置改变；3.元素尺寸改变；4.元素内容改变；

2021-10-18 10:43:46 486

原创 js拼接html

项目中我们经常需要用js来拼接html,于此同时我们也会经常拼写错误，今天就来给大家总结一下，怎么拼写才不容易出错。1.把我们需要拼接的html先在页面里面写好 <li class="listIteam" onclick='changeId("标题")'>标题</li>2.观察这个html内容用的是单引号（’ '）多，还是双引号(" ")多，如果用的单引号多，我们就用双引号把这段html内容括起来，同时对html里面的双引号进行转义。同理，如果用的双引号多，我们就用单引号把这

2021-10-09 12:01:15 5662

原创创建对象的几种方式

1.工厂模式function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name); } return o; }使用方式 var gby

2021-10-09 10:34:33 156

原创弹框出来以后禁止页面滚动

项目中的一些公告内容，总是通过弹框的形式来实现，当弹框的内容太多，需要滚动提示，但此时我们滚动弹框，整个页面也会跟着滚动，用户体验不是太好，如何解决这个问题，很简单，我们可以在弹框显示以后，禁止页面滚动，等弹框消失以后再让页面滚动，代码如下，可以分别在弹框显示和隐藏的时候调用实现效果。//禁止弹框后的页面跟随滚动function fixed(){ var scrollTop = $("body").scrollTop;//设置背景元素的位置 $('#body').attr('data-t

2021-10-09 10:30:06 1777 2

原创 git忽略本地修改，强制拉取远程项目

git fetch --allgit reset --hard origin/master

2021-10-09 10:27:45 1611

原创弹出输入框，点击穿透的问题

最近项目遇到一个问题，弹框里面包含输入框，我们输入内容以后，点击确定按钮，此时弹框也会跟着消失，而这不是我们想要的效果，因为我们可能需要在判定用户是否输入正确才决定是否让弹框消失，如果用户输入错误，我们只是提示输入内容错误，用户会继续输入，如果此时我们弹框消失了，用户就需要再走之前的操作，可能需要先点击某个按钮，让弹框显示出来。这样肯定是不合常理的。那首先我们需要知道这个问题是如何造成的，才可以解决这个问题，刚开始以为穿透的问题，是用户在点击确定按钮的时候，穿透到了下面的弹框，触发了弹框的点击事件，但是有

2021-10-09 10:24:27 558

原创 -webkit-overflow-scrolling: touch兼容问题

为了项目在移动端体验起来更加流畅，我们通常给元素设置 -webkit-overflow-scrolling: touch; 属性来实现，具体原因,CSS参考手册给了详细的解释也就是说：这个属性是通过设置滚动的回弹效果，让页面在滑动的时候看起来流畅。但当我在项目里面给 body 设置这个属性，同时给某个元素设置 overflow:scroll，并且这个元素里面存在 fiexd 定位的子元素，此时发现，固定定位元素无法显示，即使我给固定定位的元素设置 z-index:980 来提高他的层级，问题依然存

2020-05-28 17:03:29 2176

原创 js快速更换项目主题色

项目刚开始都有一个主题色，当需求变化，需要更换主题色的时候，我们往往需要修改很多地方的代码才能达到效果，如何快速，批量替换主题色，是我最近思考的一个问题，因为最近多次使用别人封装的组件，但组件主题色和项目主题色又不符合，需更改部分样式。我的做法是：复用之前的样式文件，修改一下对应项目的主题色。用的次数多了，也觉得这种修改主题色的方式不够简洁，快速。于是萌生了封装一个可以快速更换主题色的工具的想法，首先想到的最简单的就是动态插入样式代码，主题色用字符串拼接的方式去修改，这样可以批量替换，初步实现快速更换的效果

2020-05-21 11:23:41 1517

空空如也

空空如也