leon前端进阶之路
关注
分享
扫一扫
文章平均质量分 56
分享前端技术，js，css或者框架之类的
牛长犇
享受写东西的过程，记录技术上的成长
展开
-
一个比tree命令结果更加优美的目录结构小工具treer
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言本文前提是在win系统下，macos系统请绕过；先看treetree命令是cmd自带的功能，用于生成文件目录结构，请看下面例子，我这里使用的是cmder替代cmd 再看treertreer的具体安装和用法1、安装treer//安装npm install tree...原创 2018-04-11 11:48:10 · 6709 阅读 · 1 评论 -
Prettier的三种使用场景和使用方法
欢迎访问我的个人博客：http://www.xiaolongwu.cnPrettier是最近很火的一个代码美化工具，其中文意思是“漂亮的、机灵的”，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。他的整个圈子很强大，有基于各种编辑器的插件（vs code，atom），有脚本类的，有插件类的（eslint的插件eslint-plugin-prettier）。更多有关pretti...原创 2018-09-26 19:17:29 · 24481 阅读 · 0 评论 -
适用于web开发者和设计者的28款必备chrome浏览器插件
摘要 对于许多Web设计者和开发者来说，Firefox浏览器是无法超越的，对于其他人Chrome正在蚕食Firefox的浏览器市场。 在过去的两年，谷歌Chrome浏览器的发布以来，引起了人们激烈争论究竟哪个浏览器更加优秀。Mozilla的开源产品经受了时间的考验和Firefox已经快速成为继微软IE浏览器后的第二大最流行的浏览器。转载 2016-10-28 10:24:07 · 1244 阅读 · 0 评论 -
chrome视频无法播放的解决方法（Solve the problem of Google player cannot be played normally）
chrome视频无法播放的解决方法很多新用户在安装了Chrome浏览器或者更新过的的时候，经常提示 adobe flash player 已过期的问题，反复提示，从网上也找了很多办法都没有解决。这里给大家提供一个最完美的解决方案。经亲自测试，完美解决adobe flash player插件过期遇到阻止的问题.原创 2017-02-19 19:29:28 · 17137 阅读 · 0 评论 -
--save-dev 与 --save的区别
欢迎访问我的个人博客 http://xiaolongwu.cn/-save-dev是指将包信息添加到devDependencies，表示你开发时依赖的包裹。-save是指将包信息添加到dependencies，表示你发布时依赖的包裹...原创 2018-02-08 00:52:24 · 1359 阅读 · 1 评论 -
nodejs -- Node Sass does not yet support your current environment解决办法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言在github上clone了一个项目，npm install之后，启动项目时报了如题目的错误导致项目启动失败；产生问题的原因执行npm install命令时，其实是npm按照项目里的package.json文件来下载项目所有的依赖；由于每个人的电脑环境等不同的问题，有些依赖会不支持当前的环境；...原创 2018-09-15 18:12:22 · 10800 阅读 · 3 评论 -
nodejs -- node-sass安装失败的解决方案
欢迎访问我的个人博客：http://www.xiaolongwu.cnnode-sass安装失败的原因是被墙了；解决办法是翻墙或者使用淘宝镜像cnpm下载；cnpm install node-sass -Dcnpm的安装和使用方法链接：cnpm淘宝镜像的安装和使用方法我的github资源地址：nodejs – node-sass安装失败的解决方案我的个人博客地址：h...原创 2018-09-15 18:16:12 · 2927 阅读 · 0 评论 -
如果文字多了，想让超出元素外面的文字以省略号显示的css样式
请看下面的demo 省略号显示 .box{ width: 200px; height: 20px; line-height: 20px; background: blue; } 一步一步走到天亮的博客，写的简单明了，易懂，当然我有点自恋。页面上的结果是这样的文字超出了元素，并且自动换行如果想让元素外面的文字以省略号显示原创 2016-10-01 01:39:54 · 5830 阅读 · 0 评论 -
浅谈html引入css的几种方式
html引入css的几种方式原创 2016-09-28 18:47:53 · 804 阅读 · 0 评论 -
hr换行符的颜色设置
项目需求有一个2px的换行符，颜色是淡灰色的，这里面可能有一些不一样的设置，需要明白。说到颜色变化，大家首先想到的都是color,但是color一般都是针对字体颜色的，线条需要用background-color,但是单纯的将背景色设为灰色是不够的，线条还是黑色的，我们需要给线条一个高度，也就是我们需要的2px这样设置完后，在浏览器中可以看到线条变粗了，而且原来的黑色好像还是原创 2016-11-24 14:39:09 · 2382 阅读 · 0 评论 -
css基础--:before和::before的区别
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言日常工作中我们可能会经常遇到类似这样的问题，今天我们就彻底的搞明白他们之间的区别与联系:after与::after原理相同相同之处两者都是css的伪元素，都可以在元素内容的前面添加内容两者的写法是等价的，也就是 :before ==::before不同之处:befor是css2的...原创 2018-04-09 17:08:45 · 7144 阅读 · 0 评论 -
js基础 -- window.btoa和window.atob使用详解.md
欢迎访问我的个人博客：http://www.xiaolongwu.cn定义atob()解码一个Base64字符串。btoa()从一个字符串或者二进制数据编码一个Base64字符串。用法只有字符串才能被转换默认转换 ASCII字母和数字，不支持中文// 转base64var aa = btoa("dddddddd");// 转码结果 "ZGRkZGRkZGQ="//...原创 2018-09-18 19:19:36 · 4012 阅读 · 0 评论 -
微信小程序错误：WAService.js 3 navigateTo fail url
欢迎访问我的个人博客 http://xiaolongwu.cn/刚开始接触小程序，在做项目时会出现各种奇葩的问题，这里每天记录一点错误： WAService.js:3 navigateTo:fail url “pages/location/location”微信小程序页面跳转时，要跳转的目标页面需要在项目根目录下的app.json里注册，如果未注册就会报上面的错误如图，在pag...原创 2018-02-08 00:50:41 · 8150 阅读 · 0 评论 -
关于日历实现代码里0x04bd8, 0x04ae0, 0x0a570的解释
0x04bd8,0x04ae0,0x0a570,0x054d5转载 2017-08-15 18:01:06 · 951 阅读 · 0 评论 -
vs code 常用插件list
欢迎访问我的个人博客 http://xiaolongwu.cn/vs code的常用插件 名称 功能 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript 自动import提示 Auto Rename Tag 修改HTML标签时，自动修改匹配的标签 Beautify css/sass/sc...转载 2018-02-08 00:50:22 · 8975 阅读 · 2 评论 -
csdn如何快速转载别人的文章
前言 对于喜欢逛优快云的人来说，看别人的博客确实能够对自己有不小的提高，有时候看到特别好的博客想转载下载，但是不能一个字一个字的敲了，这时候我们就想快速转载别人的博客，把别人的博客移到自己的空间里面，当然有人会说我们可以收藏博客啊，就不需要转载，(⊙o⊙)… 也对。。实现 因为我自己当初想转载的时候却不知道该怎么转载，所以学会了之后就把方法写出来，帮助那些想转载却不知道该怎么转载...转载 2018-04-18 11:27:27 · 1050 阅读 · 0 评论 -
史上最全的VsCode快捷键列表
按 Press 功能 Function Ctrl + Shift + P，F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick Open Ctrl + Shift + N 新窗口/实例 New window/i...转载 2018-05-21 12:02:17 · 13277 阅读 · 0 评论 -
URL详解 window.location的一系列方法
一、URL是什么 有哪些组成首先URL是通过window.location获取的 统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成： scheme://host:port/path?query#fragment scheme:通信协议原创 2016-10-06 00:23:04 · 7823 阅读 · 0 评论 -
关于重绘（repaint）和回流（reflow）以及如何优化
欢迎访问我的个人网站 xiaolongwu.cn什么是页面的重绘与回流当页面中的部分或者全部元素改变宽度和高度、或者位置发生变化、删除或者增加某个或者某些元素时、某个元素影藏或者显示时，这时页面就需要重新加载了，这就叫做回流。当页面的中的可见性发上变化时，比如：背景颜色吗，文字颜色等，这样就形成了重绘。注：从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。怎么...原创 2018-03-04 23:10:43 · 1609 阅读 · 0 评论 -
jquery中hover()的用法。简单粗暴
jQuery接口： .hover(over,out);具体方法：$("#id").hover(function(){ //当鼠标放上去的时候,程序处理},function(){ //当鼠标离开的时候,程序处理});原创 2016-11-04 14:57:55 · 4036 阅读 · 0 评论 -
$.trim()，$.each()方法详解
$.trim()函数会移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。var str = " lots of spaces before and after ";console.log($.trim(str)); //结果为lots of spaces before a原创 2016-12-26 22:08:17 · 553 阅读 · 0 评论 -
jquery选择表格的一部分，jquery中的$(":gt(index)")用法
如果想要在集合选择器中在选出某一部分集合改如何做呢？在jQuery中有一个选择器：$(“:gt(index)”) 。index从0开始表示选择大于index之后的元素例如：$(“tr:gt(2)”)，表示从第4个tr元素开始选择下面我举一个例子： <!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2017-03-02 18:26:23 · 1375 阅读 · 0 评论 -
jQuery如何增加、修改、删除一个jQuery对象的class类
欢迎访问我的个人博客 http://xiaolongwu.cn/首先需要说明，一个HTML标签的class属性可以有多个class类名，并用空格隔开，这些class类名会同时起作用。如果出现两个以上的class类设置了相同的css样式，则会根据这些class类在css文件和style标签中加载的先后顺序，后面的覆盖前面的，和HTML标签中class属性的类名前后没有关系。以下方法中，被操作...原创 2018-02-08 00:51:22 · 31762 阅读 · 0 评论 -
图片上传裁剪插件cropper.js的API详解
jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。 cropper提供了大量的参数、方法和事件供图片的剪裁操作。安装 可以通过Bower或NPM来安装该插件。bower install croppernpm install cropper使用方法 使用该图片剪裁插...转载 2018-03-22 10:17:46 · 13612 阅读 · 1 评论 -
ie11 Object doesn't support property or method 'attachEvent'
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言大概的情景是这样的，jquery版本为1.10.1版本；浏览器为ie11；报错info为–Object doesn’t support property or method ‘attachEvent’分析原因其主要原因为ie的监听事件问题，ie11以下的为attachEvent，而ie11为addEv...原创 2018-04-18 19:14:09 · 12474 阅读 · 0 评论 -
当margin用百分号（%）时，数值是以谁为基准？
今天做了一个demo，自己用原生的js写了一个轮播图，那么问题来了，当你用百分号表示margin-left的时候，他取得百分号的数值是以谁做为基准而取得值呢？子元素和父元素的width都是百分号表示，比如一个很简单的额例子了，当一个div里面有一个div时，下面我就通过2个简单的demo来解释这个问题1、如果父元素div大于里面的子元素div，图代码如下：box为父元素 ，bo原创 2016-10-01 01:05:23 · 5851 阅读 · 0 评论 -
css基础--深入理解opacity和rgba的区别
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言首先这两个都与透明度有关，那么他们之间有什么具体的区别呢？在实际工作中我们需要注意什么呢？请您接着往下看语法1. rgba首先它是一个属性值，语法为rgba（r,g,b,a） - r为红色值， 正整数 | 百分数 - g为绿色值，正整数 | 百分数 - b为蓝色值，正整数 | 百分数 ...原创 2018-03-30 20:53:25 · 6751 阅读 · 0 评论 -
javascript设计模式——发布订阅模式
前面的话 发布—订阅模式又叫观察者模式，它定义对象间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在javascript开发中，一般用事件模型来替代传统的发布—订阅模式。本文将详细介绍发布订阅模式&nbsp;现实事例 不论是在程序世界里还是现实生活中，发布—订阅模式的应用都非常广泛 比如，小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子...转载 2018-06-21 09:48:13 · 301 阅读 · 1 评论 -
【javascript】 的严格模式 详解
一、概述除了正常运行模式，ECMAscript 5添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立”严格模式”的目的，主要有以下几个：- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;- 消除代码运行的一些不安全之处，保证代码运行的安全；- 提高编转载 2016-09-30 00:48:34 · 471 阅读 · 0 评论 -
px em rem 的区别
PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；4.px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em特点 1.em的值并不是固定的；2.em会继承父级元素的字体大小。3.em是相对长度单位。相对于当前对象内文本的字体尺寸。原创 2016-10-04 11:08:08 · 3701 阅读 · 0 评论 -
JavaScript string 的replace
在使用JavaScript对字符串进行处理的时候我们经常会用到replace方法，很简单的一个方法，以前一直不以为意，直到今天看JavaScript语言精粹的时候读到了一个有趣的小例子的时候，并不是十分理解，了解了一下replace的用法才明白，原来replace不像想象中的那么简单。replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。语法：s转载 2016-10-22 23:10:12 · 346 阅读 · 0 评论 -
css的hover事件，如果点击之后通过js操作样式，hover事件就会失效的处理方法，外部css样式与js的DOM样式谁的权重高？
我的思维大概是这样的-----有一个导航栏，用css写了hover事件，鼠标放上去会变成蓝色；下面就有一个需求，点击导航某一项页面不会跳转，还在本页面，点击哪一个让哪一个变成蓝色，其余的为灰色的，但是当我点击完成之后，hover事件就会失效，不起作用了，我的css代码是这样的.content-top1>p:hover{ color: #19b1e8;}我的js代码 $(".原创 2016-11-04 17:58:50 · 8726 阅读 · 6 评论 -
document.body、document.documentElement和window获取视窗大小的区别
在w3school关于window对象的介绍中，介绍了获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight – 浏览器窗口的内部高度window.innerWidth – 浏览器窗口的内部宽度对于 Internet Explore转载 2016-11-08 10:01:03 · 1730 阅读 · 0 评论 -
用百分比布局时，子元素那些属性值取决于父元素的高那些属性取决于宽
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言我们先想个问题，带着问题看这篇文章可能会理解的更好一点：百分比布局时，子元素竖向的属性值都是取决于父元素的高吗？慢慢向下看取决于父元素高度的：[max/min-]height、top、bottom 等；后两者是在有position属性的前提下取决于父元素宽度的： [max/min-]width、l...原创 2018-02-09 16:13:09 · 1122 阅读 · 0 评论 -
CSS中两种放大zoom和scale的区别
欢迎访问我的个人博客 http://xiaolongwu.cn/先说原理zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。我们看个例子这是几行伪代码 ...原创 2018-02-08 00:53:44 · 38902 阅读 · 0 评论 -
js中的几种随机排序方案
欢迎访问我的个人博客：http://www.xiaolongwu.cn今天我们来看看实现随即排序的几种做法方法一思路为：遍历数组，每次循环都随机一个在数组长度范围内的数，并交换本次循环的位置和随机数位置上的元素function randomSort1(arr){ for (let i = 0, l = arr.length; i < l; i++) { ...原创 2018-04-03 16:15:20 · 8058 阅读 · 0 评论 -
js统计一个字符串中出现次数最多的字母
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言如题代码 function num (str){ var a = {}; var b = str.split(""); // key为元素 值为个数 for (let i = 0; i...原创 2018-04-20 14:40:18 · 10795 阅读 · 1 评论 -
js中的setTimeout详解，和关于它的setTimeout(function(){}，0)问题
欢迎访问我的个人博客 http://xiaolongwu.cn/先热身看看下面的额代码会打印出什么？for (var i = 0; i &amp;lt; 5; i++) { setTimeout(function () { console.log(i); }, 100); } 上面的结...原创 2018-02-08 00:51:48 · 12704 阅读 · 2 评论 -
js基础--深入理解call、apply、bind
一、函数的三种角色首先要先了解在函数本身会有一些自己的属性，比如：length：形参的个数；name：函数名；prototype：类的原型，在原型上定义的方法都是当前这个类的实例的公有方法；__proto__：把函数当做一个普通对象，指向Function这个类的原型函数在整个JavaScript中是最复杂也是最重要的知识，对...转载 2018-05-15 18:28:16 · 964 阅读 · 0 评论 -
js基础进阶--函数柯里化carrying
欢迎访问我的个人博客：http://www.xiaolongwu.cn定义函数柯里化就是创建已经设置单个参数或者多个参数的函数，函数变为接受一个参数，返回一个值来个例子 function add(){ // 将传进来的实参转换为数组arr var arr = Array.prototype.slice.call(arguments...原创 2018-05-17 00:26:10 · 338 阅读 · 0 评论