abc589721的博客

复习Array的一些方法的时候的灵感

abc589721 — Wed, 06 Mar 2019 09:39:00 +0800

在红宝书上面复习数组的一些方法，比如slice,splice这些方法的讲解的时候，通过把书上的讲解，如传一个参是什么情况，传两个参是什么情况，如果什么都没传是什么情况，已此就可以写一段伪代码逻辑出来了，这会帮助日常自己写函数的时候考虑更加周到。转载于:https://www.cnblogs.com/coconutGirl/p/10481354.html...

问题：鼠标放在卡片最下端发生不停闪动

abc589721 — Tue, 05 Mar 2019 14:58:00 +0800

背景：鼠标浮在卡片上，实现卡片向上位移的效果

　　一些子元素

.product_card { 　　margin-top: 20px; } .product_card:hover { 　　margin-top: 14px; // 看起来比其他的卡片向上位移了6px 　　marg...

引用类型 —— Array类型

abc589721 — Tue, 05 Mar 2019 14:41:00 +0800

壹、创建数组一、使用Array构造函数 var colors = new Array(); var colors = Array(); 给构造函数传递值： 1、传递一个值如果传递的是数值，则会按照该值创建包含指定项数的数组； var colors = new Array(3); // [ undefined, undefined, undefined ] 如果传...

引用类型 —— Object类型

abc589721 — Mon, 04 Mar 2019 16:35:00 +0800

壹、创建Object实例：一： var person = new Object(); person.name = " 小明 " ; person.age = 23; 二：对象字面量表示法：在通过对象字面量定义对象时，实际上不会调用Object构造函数 var person = { 　　name: " 小明 ", 　　age: 23, 　　// 注意：在使用对象字面...

getComputedStyle, getPropertyValue, getBoundingClientRect

abc589721 — Thu, 28 Feb 2019 10:19:00 +0800

获取元素最终的样式值： getComputedStyle 转载于:https://www.cnblogs.com/coconutGirl/p/10448644.html

hover卡片向上移动6px

abc589721 — Wed, 20 Feb 2019 16:37:00 +0800

hover到卡片上的时候，卡片位移，向上移动6px: 1、现在原本布局就是卡片向上有个20的margin，所以hover的时候，直接改变margin-top值为14px,因为父元素的高度是用子元素撑开的，所以导致父元素的兄弟元素的位置也向上跑了，其实改起来很简单，既然向上减少了6，向下的margin加6就好了，保持总距离是20，就没问题。 2、用transform转换实现...

随机生成颜色和透明度

abc589721 — Wed, 20 Feb 2019 16:19:00 +0800

随机生成颜色：想到的比较简单的是： rgba颜色值范围是0-255, 所以单个值为：Math.ceil(Math.random() * 255),生成三个值以后，可以拼起来 eg: rgb(Math.ceil(Math.random() * 255), Math.ceil(Math.random() * 255), Math.ceil(Math.random() * 255))...

css预处理器的实际优点：

abc589721 — Sat, 16 Feb 2019 15:31:00 +0800

页面总布局是最小宽度原为1280，后为1200，自己写的滚动条是宽度随时变化的，所以里面内容的元素的宽度写width：100%是滚动条包裹元素的宽度，所以都要设置min-width为：1200，这个时候css预处理器就派上用场了，用变量保存相对稳定的的最小宽度值，不需要一个一个元素去改值。 2、在用rem处理字体自适应的时候，就可以用预处理器来帮忙了。转载于:https://www...

margin-top的值为%,是相对于谁的百分比

abc589721 — Tue, 22 Jan 2019 14:51:00 +0800

以前一直用margin-top:50%,transform:translateY(-50%)来实现垂直居中，但是今天在自己做banner的上下切换按钮的垂直居中的时候才发现，margin-top的%值是相对于父元素的宽度的。也可以改变布局：writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。用top：50%，配合transform:tr...

vue动态改变对象的值

abc589721 — Sat, 12 Jan 2019 15:29:00 +0800

this.dataBox[index].showDeleteModal = mark this.$set(this.dataBox, index, this.dataBox[index]) 数组里面对象的动态属性发生变化，直接改变属性，值是不刷新的 closeDeleteModal(item) { item.showDeleteModal...

reflow & repaint

abc589721 — Sat, 12 Jan 2019 15:26:00 +0800

回流改变元素位置等重绘改变元素颜色，是否显示回流必然导致重绘重绘不一定会出现回流转载于:https://www.cnblogs.com/coconutGirl/p/10259867.html

关于子元素全部浮动导致父元素没有具体高

abc589721 — Mon, 07 Jan 2019 14:39:00 +0800

父元素添加float overflow:hidden 在最后添加一个块级子元素或者伪类：clear：both 最后一个子元素clear:both，即不把前面的兄弟元素当成脱离文档流的浮动元素，然后最后一个子元素为快级元素的话，横向占满父元素，再有前面兄弟元素的高度，就使得父元素有了具体的高 https://www.cnblogs.com/waisonlon...

转换成数值的三种方法

abc589721 — Fri, 14 Dec 2018 14:18:00 +0800

把参数转换成数值的三种方法：Number(),ParseInt(),ParseFloat() Number(): 　　　入参　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　出参　　　true/false　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　1/0 　　　数值，如1　　　　　　　　　　　　　...

添加事件与移除事件

abc589721 — Thu, 08 Nov 2018 22:02:00 +0800

第一种：通过addEventListener添加事件，必须通过removeEventListener移除事件，并且回调与参数都必须一致，所以如下情况使用匿名回调函数是无法移除事件的。不起效： document.addEventListener('mousedown', function() { 　　console.log('添加文档的鼠标按下事件'); }); docum...

元素的content属性

abc589721 — Wed, 29 Aug 2018 15:33:00 +0800

content这个css属性被用于before和after这两个伪元素去产生放在元素内的内容。而所有元素都可以用content这个属性的url()值和其他的图片值用于替换元素本身的内容。用content属性被插入的对象是匿名的替换对象。 content有如下几种值： 1、content: normal; 2、content: none; 以上这两种值不能和其他的值一起用。其他的值...

vue兄弟组件通信

abc589721 — Thu, 09 Aug 2018 11:40:00 +0800

所有需要通信的组件共用一个事件对象。new Vue()，新new一个vue对象，然后所有组件都访问这个对象，通过这个对象$emit事件，也通过这个对象$on监听事件。实现一：直接在单文件里面实例化根Vue的时候，在data里return一个属性，值为new Vue()，例如bus: new Vue() 在具体的组件页面上，直接用this.$root.bus.$emit('event...

判断文档中某个元素是否获取了焦点

abc589721 — Thu, 09 Aug 2018 09:50:00 +0800

document.hasFocus()返回一个Boolean值，只能用来判断文档中的活动元素是否获得了焦点。但是无法知道是哪个元素获取了焦点。 document.activeElement属性返回当前页面中获得焦点的元素。很多时候，该属性会返回一个或者