- 博客(51)
- 收藏
- 关注
RSS订阅转载 复习Array的一些方法的时候的灵感
在红宝书上面复习数组的一些方法，比如slice,splice这些方法的讲解的时候，通过把书上的讲解，如传一个参是什么情况，传两个参是什么情况，如果什么都没传是什么情况，已此就可以写一段伪代码逻辑出来了，这会帮助日常自己写函数的时候考虑更加周到。转载于:https://www.cnblogs.com/coconutGirl/p/10481354.html...
2019-03-06 09:39:00
168
转载 问题：鼠标放在卡片最下端发生不停闪动
背景：鼠标浮在卡片上，实现卡片向上位移的效果<div class="product_card"> 一些子元素</div>.product_card { margin-top: 20px;}.product_card:hover { margin-top: 14px; // 看起来比其他的卡片向上位移了6px marg...
2019-03-05 14:58:00
187
转载 引用类型 —— Array类型
壹、创建数组一、使用Array构造函数var colors = new Array();var colors = Array();给构造函数传递值：1、传递一个值如果传递的是数值，则会按照该值创建包含指定项数的数组；var colors = new Array(3); // [ undefined, undefined, undefined ]如果传...
2019-03-05 14:41:00
221
转载 引用类型 —— Object类型
壹、创建Object实例：一：var person = new Object();person.name = " 小明 " ;person.age = 23;二：对象字面量表示法：在通过对象字面量定义对象时，实际上不会调用Object构造函数var person = { name: " 小明 ", age: 23, // 注意：在使用对象字面...
2019-03-04 16:35:00
123
转载 getComputedStyle, getPropertyValue, getBoundingClientRect
获取元素最终的样式值： getComputedStyle转载于:https://www.cnblogs.com/coconutGirl/p/10448644.html
2019-02-28 10:19:00
168
转载 hover卡片向上移动6px
hover到卡片上的时候，卡片位移，向上移动6px:1、现在原本布局就是卡片向上有个20的margin，所以hover的时候，直接改变margin-top值为14px,因为父元素的高度是用子元素撑开的，所以导致父元素的兄弟元素的位置也向上跑了，其实改起来很简单，既然向上减少了6，向下的margin加6就好了，保持总距离是20，就没问题。2、用transform转换实现...
2019-02-20 16:37:00
1728
转载 随机生成颜色和透明度
随机生成颜色：想到的比较简单的是：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))...
2019-02-20 16:19:00
346
转载 css预处理器的实际优点：
页面总布局是最小宽度原为1280，后为1200，自己写的滚动条是宽度随时变化的，所以里面内容的元素的宽度写width：100%是滚动条包裹元素的宽度，所以都要设置min-width为：1200，这个时候css预处理器就派上用场了，用变量保存相对稳定的的最小宽度值，不需要一个一个元素去改值。2、在用rem处理字体自适应的时候，就可以用预处理器来帮忙了。转载于:https://www...
2019-02-16 15:31:00
1066
转载 margin-top的值为%,是相对于谁的百分比
以前一直用margin-top:50%,transform:translateY(-50%)来实现垂直居中，但是今天在自己做banner的上下切换按钮的垂直居中的时候才发现，margin-top的%值是相对于父元素的宽度的。也可以改变布局：writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。用top：50%，配合transform:tr...
2019-01-22 14:51:00
2166
转载 vue动态改变对象的值
this.dataBox[index].showDeleteModal = mark this.$set(this.dataBox, index, this.dataBox[index])数组里面对象的动态属性发生变化，直接改变属性，值是不刷新的closeDeleteModal(item) { item.showDeleteModal...
2019-01-12 15:29:00
1187
转载 reflow & repaint
回流改变元素位置等重绘改变元素颜色，是否显示回流必然导致重绘重绘不一定会出现回流转载于:https://www.cnblogs.com/coconutGirl/p/10259867.html
2019-01-12 15:26:00
101
转载 关于子元素全部浮动导致父元素没有具体高
父元素添加floatoverflow:hidden在最后添加一个块级子元素或者伪类：clear：both最后一个子元素clear:both，即不把前面的兄弟元素当成脱离文档流的浮动元素，然后最后一个子元素为快级元素的话，横向占满父元素，再有前面兄弟元素的高度，就使得父元素有了具体的高https://www.cnblogs.com/waisonlon...
2019-01-07 14:39:00
161
转载 转换成数值的三种方法
把参数转换成数值的三种方法：Number(),ParseInt(),ParseFloat()Number(): 入参 出参 true/false 1/0 数值，如1 ...
2018-12-14 14:18:00
1292
转载 添加事件与移除事件
第一种：通过addEventListener添加事件，必须通过removeEventListener移除事件，并且回调与参数都必须一致，所以如下情况使用匿名回调函数是无法移除事件的。不起效：document.addEventListener('mousedown', function() { console.log('添加文档的鼠标按下事件');});docum...
2018-11-08 22:02:00
476
转载 元素的content属性
content这个css属性被用于before和after这两个伪元素去产生放在元素内的内容。而所有元素都可以用content这个属性的url()值和其他的图片值用于替换元素本身的内容。用content属性被插入的对象是匿名的替换对象。content有如下几种值：1、content: normal;2、content: none;以上这两种值不能和其他的值一起用。其他的值...
2018-08-29 15:33:00
918
转载 vue兄弟组件通信
所有需要通信的组件共用一个事件对象。new Vue()，新new一个vue对象，然后所有组件都访问这个对象，通过这个对象$emit事件，也通过这个对象$on监听事件。实现一：直接在单文件里面实例化根Vue的时候，在data里return一个属性，值为new Vue()，例如bus: new Vue()在具体的组件页面上，直接用this.$root.bus.$emit('event...
2018-08-09 11:40:00
107
转载 判断文档中某个元素是否获取了焦点
document.hasFocus()返回一个Boolean值，只能用来判断文档中的活动元素是否获得了焦点。但是无法知道是哪个元素获取了焦点。document.activeElement属性返回当前页面中获得焦点的元素。很多时候，该属性会返回一个<input>或者<textarea>元素，与此同时，如果用户在文本框中选中了一些文本，还可以使用该元素的sel...
2018-08-09 09:50:00
440
转载 安装weback后,运行webpack -v报错：‘webpack’不是内部或者外部命令
最近，后端同事安装webpack后，发现命令跑不起来。原因：这位同事安装Webpack的时候设置了全局存放路径和缓存路径为D盘，不在C盘的默认目录下。我想可能是因为这时系统接收到Webpack命令后会去C盘找Webpack的文件解析命令，但是C盘里面没有文件，又没有告诉系统说把webpack安装文件换了位置，系统不知道，没有找到，就会跑不起来。解决办法：设置path环境变量，...
2018-08-09 09:35:00
311
转载 实现表格tbody内滚动
在一开始实现tbody内滚动时，最先想到的是利用两个表格拼起来。最近，有接触到一个只用一个表格的简单实现，记录一下。thead设为display:table;tbody设为display: block;overflow-y: scroll;转载于:https://www.cnblogs.com/coconutGirl/p/9446962.html...
2018-08-09 09:28:00
667
转载 看文档
发现无论要用到什么，看文档永远是上手最快的方式。跟着tutorial走一遍。具体API慢慢看。而且下下来了的依赖模块在node_modules里面都会有xxx.md文件，也有guide。github上面一般也会有对应的文档。非常适合不能上外网的环境下用。转载于:https://www.cnblogs.com/coconutGirl/p/9446935.html...
2018-08-09 09:24:00
100
转载 react-router中hashHistory等history无法引用
react-router4中不支持直接从react-router中引用hashHistory等history对象。解决：1、降级npm install react-router@3 --save2、查阅react-router4的文档npm install react-router-dom --saveimport { hashHistory } from "re...
2018-08-09 09:20:00
2095
转载 mouseout和mouseleave的区别
mouseleave事件是各元素各自触发，不是由子元素冒泡而来，而mouseout是由子元素冒泡而来。也就是：mouseleave是当鼠标指针离开了目标元素以及目标元素的所有子元素以后才会触发。如下例就是如果第二个div的高度比第三个有文本内容的div高，离开文本后鼠标还在第二个div范围内，只会触发有文本内容的div的mouseleave事件。而mouseout是只要鼠标指针离...
2018-08-07 10:04:00
1205
转载 JS实现拖拽
简单的实现随意拖拽一个元素移动。最开始想到的是H5的拖放API，只拖不放，非常好用。然鹅，拖放就会有元素的影子跟着鼠标移动，所以 最后改成了用JS实现元素的拖拽。第一步：监听目标元素的mousedown事件第二步：在mousedown的处理事件内注册整个文档的mousemove事件和mouseup事件。（是整个文档的，而不是目标元素的，这样才有按下鼠标就可以随意在页面空白处内拖动...
2018-08-06 17:33:00
103
转载 去除微信小程序的button组件的边框
在微信开发者工具里面的调试器上看不到元素的伪类，所以不容易找到那个边框。实际上微信的button的边框是用伪类实现的，所以用伪类样式去掉。button:after { border: none;}转载于:https://www.cnblogs.com/coconutGirl/p/8557005.html...
2018-03-13 15:12:00
257
转载 安装两个显示屏
1、显卡是否支持双显2、信号连接线是否正确3、连接线插上的接口是否正确转载于:https://www.cnblogs.com/coconutGirl/p/8462701.html
2018-02-23 16:50:00
110
转载 svg图片无法完全铺满
今天设计给了一张svg的图片做背景，但是经过两个小时的纠结，发现就是无法铺满元素，然后经过高人指点，发现是svg图片的原因，百度后果然能解决问题。解决：在webstorm里面打开svg图片，然后在svg标签上面加上属性：preserveAspectRatio="none meet";<svg width="1264px" height="722px" v...
2018-02-05 20:03:00
2986
转载 滚动条的出现导致居中的元素会晃动
在做FAQ的时候，问题列表是多个tab,相对于整个页面居中，然后当时表现在由于切换tab的和时候，问题列表数量动态变化，有些多的要滚动条，有些少的不需要滚动条，我最开始设置的自动，需要滚动条就出现，不需要就不出现。然后，问题就来了，切换Tab的时候，从没有滚动条的切换到有滚动条的，居中的内容区域会位移，咋一感觉就是页面晃动了一下。下图可以看出内容区域被滚动条往左边挤了一部分。...
2018-01-24 13:48:00
337
转载 相对地址与绝对地址
之前用axios发请求，直接写接口路径，然后突然说要加前缀，虽然不知道为什么一定要加，但是说了也就加了，然后做新模块的时候是重新搭的架子，自己想好好捋捋项目结构，就没想直接copy之前的文件，自己按照理解写，就把这一点忘了，因为自己也很犹豫要不要加，然后各种事杂在一起，就把这个细节给忘了，然后因为只有上线部署是这样的，所以测试的时候也没有问题。但是上线就出问题了，那感觉，感觉全世界都认为...
2018-01-21 14:14:00
228
转载 前端请求导出数据，带参，报400错误
400是后端没有接收到请求，原因是后端高版本的tomcat不会自动对字符串进行转义。所以，前端把参数值进行转义即可。encodeURI(string);eg:window.location.href = hostAndPort.HOST+hostAndPort.PORT + baseUrl+'/eventTrack/exportLoginData?fromDate=...
2018-01-17 10:19:00
495
转载 记录的重要性
昨天一同事姐姐问我，我以前是不是遇到过什么问题，是怎么解决的，然而时间有点久远了，我一脸蒙圈的说，我好像忘了。。所以，这才意识到遇到问题后总结和记录的重要性。正所谓好记性不如烂笔头，再忙也得养成总结和记录的习惯。对于前端，有着你影响我，我继承你的CSS，有着弱类型语言的JS,很多东西对于新手都是一脸蒙圈，不知道为什么的问题，虽然说官方文档可以一定程度的解决，但是工作的时候，尤其是遇到...
2018-01-16 08:55:00
484
转载 打包时内容过多，node 报错：内存溢出 javascript heap out of memory
公司项目有点大的时候，把所有内容都打包输出，就经常会发生这种情况。解决：在package.json里面的script对应的dev的值在node后面加上--max_old_space_size=2048注意node后面空一格转载于:https://www.cnblogs.com/coconutGirl/p/8294858.html...
2018-01-16 08:49:00
595
转载 css样式-旋转rotate
一般前端经常用到例如‘<’这样的箭头，然后自己通过旋转变换方向，可以让箭头向上、向下，然后有一天我是用的span，背景是ui提供的箭头图片，死活旋转不了，我就蒙圈了。。。解决：把span元素直接换成块状元素，或者给span设置inline-block或者block。让span成为块状元素就可以了。下图是中国w3.org网上面的解释，中文版没有这些详细解释，点击右上角的...
2018-01-08 11:31:00
321
转载 移动端相关事件
1、触摸事件：touchstart、touchend、touch2、检测横竖屏：orientationchangewindow.addEventListener('orientationchange', function(event){ if ( window.orientation == 180 || window.orientation==0 ) { al...
2017-12-07 15:06:00
70
转载 input文本框的事件
1、IE在初次聚焦时即触发了input事件2、compositionend在中文输入法输入完成以后才会触发，所以在中间的输拼音过程不会被触发。3、change事件只有在内容改变并且失焦以后才会触发，所以不适合做及时搜索。4、propertychange事件只有ie11以下浏览器支持。同input一样，会在内容改变后立即触发，但这个事件在JS内改变的value内容也会触发此事件...
2017-12-07 14:16:00
505
转载 vue项目在IE11下报错Promise未定义
原因：es6垫片需要在入口文件中引用进来。去babel官网可以找到polyfill的安装方法1、npm install --save babel-polyfill2、在项目的入口js文件内: import "babel-polyfill"然后又看到另一篇文章的分析，大家可以参考：http://www.php.cn/js-tutorial-380204.html转载...
2017-12-04 16:59:00
496
转载 解疑常用
1、插件对应的git仓库上的issues里面找是否有相同问题2、插件官网3、stackoverflow.com上面search4、segmentfault.com上面search5、百度一下转载于:https://www.cnblogs.com/coconutGirl/p/7904178.html...
2017-11-27 15:02:00
60
转载 table-layout
对于表格布局的规则：auto和fixed简言之，auto布局就是表格的列宽是随内容变化的。而fixed布局是根据第一行的列宽定所有列的列宽，第一行后所有列的内容即使很多，列宽也不会变化，自己决定怎样对待溢出的内容。https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout转载于:https://www.cnblo...
2017-11-27 11:35:00
114
转载 Safari的表格用col预定义宽度，配合table-layout:fixed.但是单元格仍会被撑开
解决办法：给每一个td单元格都设了一个固定的值。然后就不会被撑开了，但是不知道为什么会被撑开。而且只在初次进来会这样，很多个Tab对应很多个表格，切换tab再回到撑开的页面，就没有撑开了。感觉是table-layout:fixed没有起效。转载于:https://www.cnblogs.com/coconutGirl/p/7903109.html...
2017-11-27 10:53:00
397
转载 了解git
http://www.bootcss.com/p/git-guide/转载于:https://www.cnblogs.com/coconutGirl/p/7902744.html
2017-11-27 09:45:00
58
转载 统计对象的length
想要直接统计对象的长度，但是又不想循环得到，有js的原生方法：Object.keys(obj);eg: let obj = { 'name' : 'Tom', 'age' : '22' }; let arr = Object.keys(obj); ----> arr的值为 [ 'name', 'age' ] let length ...
2017-11-24 13:48:00
172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人