银贝斯的专栏

原创 手把手从底层搭建react应用（如何自己实现react脚手架）（webpack环境搭建）

React如果脱离我们所熟悉的环境，可能就不会很好的工作了。原因是React中有很多的关键字以及语法是node目前支持不了的（作者写这篇文章的时候是9.3.0版本）。要想很好的运行React,需要进行一系列相当麻烦的设置。对此呢，Facebook已经提供了一套配置选项来快速启动React应用，那么老铁为啥还要写这篇文章呢？我是这么认为的，create-react-app虽好，但是它让你对Rea...

原创 前端工程师王者之路

前端工程师王者之路战争背景等级设置等级解读战争背景随着IT行业就业人数的不断增加，前端岗位竞争力明显加大，各路大侠开始围绕不多的高薪职位展开厮杀。索性我们在这里给大家提供一份通关秘籍，帮助大家披荆斩棘，速上荣耀王者。【我们的口号是：拒绝当小兵！！】等级设置我们这里共设有八个阶段：1、【倔强青铜】（JavaScript基础阶段）2、【秩序白银】（JavaScript语言进阶）3、【荣耀...

原创 jquery-ui sortable详解

该插件的用途：使用鼠标重新排列列表或网格中的元素。helper  这个小伙子总结的不错Note: In order to sort table rows, the tbody must be made sortable, not the table.//毕竟tbody是父级嘛1、appendTo   说实话这个属性不是甚了解，大致是appendTo父级容器//拖拽的父级节点

原创 【特效库】svg进度条/过渡条

var i = 0; var flag = 1; setInterval(function(){ console.log(document.querySelector("#colorful").setAttribute("x2",i+"%")); if(flag==1){ if(i==100){ flag = 0; } i++;

原创 js插件怎么写？

教你如何写js插件

原创 JS DOM.style.height 取不到的情况 为空的情况

#hell{ display: inline-block; background:red; width:100px; height:100px; border:1px solid yellow; } var a = document.getElementById("hell").style.width; conso

原创 jquery以及原生js 如何实现div倒序

--> 01 02 03 04 05 06 /*jquery*/ /*$(".container>div").each(function(){ $(this).prependTo(".container"); })*/ /*vanilla*/ var bigContainer = document.

原创 javascript时间处理

var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1970-????)myDate.getMonth();       //获取当前月份(0-11,0代表1月)myDate.getDate();        //获取当前日(1-31)

原创 children与childNodes的区别

乍一看  感觉一样  平时用的时候也没怎么留意其实区别还是有点儿大   传言啊  这个 childNodes是正统属性   亲生的   而这个children是野孩子   这个野孩子比较随意   所以用它返回来的就只有DOM元素了  其他的文字啥的   都不返回   而 childNodes比较讲究   事无巨细  都要返回来   但

原创 input与span之间莫名的空隙

对于行元素span或者input来说 很多人会用inline-block来显示他们但是往往发现  中间会留一段小空隙  图片就不贴了  可以自己试一试  就会发现  怎么都去不了其实这个问题是由于换行引起的我们通常都是一个标签写一行如果我们把上一行标签的尾巴移到下一行  自然可解决这个问题如下>

原创 获取浏览器可见高度

就一句话 top.innerheight之所以在此记录一下  是因为网上别的信息很是不准确下面是在别处复制的内容   供参考   JS获取屏幕高度var s = "";s += " 网页可见区域宽："+ document.body.clientWidth;s += " 网页可见区域高："+ document.body.clientHeight;s

原创 CSS如何实现文字隐藏 超出文字隐藏 鼠标移入显示

span{ display: inline-block; width:60px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; } span:hover{ overflow: visible; } 欢迎光临本寒舍啊

原创 CSS层叠关系

我们最熟悉的css层叠关系要数z-index了，曾几何时，我也觉得层叠也就不过如此知道看了张鑫旭大神的博客   但是看归看   自己下来还是得把他说的例子实践一下  而且我们在实际开发过程中会遇到很多实际的特例 上面这张图是来自其网站的一张图  不想重新P图    在此借用一下 下面我就我们通常用的情况实践了一下

原创 DNS WEB URL HTTP总结

原创 select下的option如何调缩进

今遇到一问题，select框使用了text-indent缩进了20px结果option框无论如何都无法缩进后来才发现   如果在select框用padding-left:20px;子元素的option即可完美继承缩进

原创 css3 clip-path

section{ position:absolute; width:800px; height:400px; border:1px solid grey;}.x{ position: absolute; top:0; right:0; bottom:0; left:0; background:#f4a034; -webkit-transition: all .3s;

原创 css3-clip-path-imitate

1

原创 UI系列之常见配色

上干货

原创 CSS3 Transform详解

CSS3 Transform简介：Css3 transform 允许元素在2维以及3维空间进行变换。具体包括三大块，2D transform、3Dtransform、以及SVG transform。这种变化是基于像素操作的，操作包括移动，旋转，大小变换等。Transform origin：例如，如果bottom就是底边的中点，left就是左边的中点。Center就是

原创 CSS3 transition详解

D3 Transitions简介：Css 的transition属性可以使CSS的值在一段时间内平滑的变化。Transition：一般情况下，当CSS值发生变化时，其渲染结果会立刻发生变化。而这个transition新属性可以将这一变化在一段时间内缓慢过渡。#transition01{position: absolute;left:0px;width:200px;

原创 【Vanilla Js 02】事件绑定与去除

将以上的代码JS最后一句除去，就可以调用点击事件。将最后一句加上就相当于卸载了当前事件值得补充一句的是，为什么推荐用这种方法呢？有两点原因1、可以绑定多个事件，如果只是用onclick的话，就只能绑定一个事件而已。如果你之前用了onclick，没关系，和onclick不冲突2、可以卸载事件，这个是他的优点

原创 如何理解JS多维数组

var yiwei = []; yiwei[0]=[1,2,3,4] yiwei[1]=[1,2,3,4,5,6,7] yiwei[2]=[1,2] /*yiwei[3] = [1,2];*/ yiwei[3][3]=1; console.log("yiwei[0][3]:"+yiwei[0][3]); console.log("

原创 IE9下面图片黑框问题

都已经21世纪了  今天在IE9下面发现我的图片莫名有了黑色框框谷歌火狐正常自己也没有加任何的border呀情况如下要多扯淡多扯淡  这个问题很好解决：只需要将img的border设置为none就可以了类似的兼容性问题可能还有很多  比如如果不给指定position的话 ，不同的浏览器的默认position是不一样的，也就会出现谷歌与火狐效果

原创 svg性能低？能展现的点比较少？真的是这样吗？

很多人会说用d3画svg有局限，d3本来就不适合大数据可视化说出这些话的人，首先要说的就是 他不懂大数据  因为大数据的精髓不在于数据量，而在于数据分析也就是说可视化的目的是为了便于对数据的分析那么问题来了   首先我们看一下这幅图95之前的朋友  肯定记得  老电视机分辨率低，如果距离很近的话  就会看到这个景象   我们所说的像素也是这样现如

翻译 老外如何看待WEB前端与后端？ ---来自QUORA

老外如何看待WEB前端与后端？ ---来自QUORA如下是针对这一问题的不同的高质量的回答Marc Grabanski,Creator of Frontend Masters  3.4k Views 软件开发本身就很难，不论你搞的是前端还是后端 用为一名UI开发者，我爱WEB前端因为大家触碰到的像素都是由我们创造的，但是我们开发构建所依赖的合理、并且是可扩展的API也是相当重要的。 Stripe(一家支付公司

翻译 无处不在的蓝牙—真的很危险吗？

无处不在的蓝牙—真的很危险吗？前些天我收到了我的读者Craig写给我的信，他很担心蓝牙辐射：（内容如下）hi Lloyd,  我有个非常简短的问题，或许这并不是一个简单的问题  接听电话的时候，降低辐射最好的方法是什么？  --头戴式蓝牙耳机？  --相比我直接将手机贴近耳边而言，使用蓝牙设备可以大幅度的降低辐射吗？  --一个有线耳机？  --辐射会通

原创 如何设置滚动条样式

/*滚动条设置*//* 设置滚动条区域*/::-webkit-scrollbar { width: 14px;}/* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; bor

原创 js数字金额格式转换函数

/*数字与金额转换,四位隔开*/function fmoney(s, n) //s:传入的float数字 ，n:希望返回小数点几位 { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; var l = s.split(".

原创 Web前端最得力的网站

1、Preloader一个在线gif生成器，从此进度条，小动画什么的都不是问题

原创 【web前端攻城狮】string转换成json对象

很多时候，可能需要我们自己去拼接json对象就像我这样给定的数据是这样的var data = {贾嫒: -45494.848, 巩嫒: 16720.788, 余嫒: 26449.724, 梁安: 21023.016, 彭安: 3729.6};而我们想要的格式是这样的var jsongirl = { 'name': 'flare', 'children

原创 【web前端攻城狮】表单验证之电话验证

我们这里要用到的是淘宝电话验证接口，先给个图片url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+$("#rg-inputphone").val()用这种方式，在用户注册的时候会让产品形象更好，更有依赖感 $("#rg-inputphone").on("blur", function() { ...