- 博客(31)
- 资源 (3)
- 收藏
- 关注
原创 手把手从底层搭建react应用(如何自己实现react脚手架)(webpack环境搭建)
React如果脱离我们所熟悉的环境,可能就不会很好的工作了。原因是React中有很多的关键字以及语法是node目前支持不了的(作者写这篇文章的时候是9.3.0版本)。要想很好的运行React,需要进行一系列相当麻烦的设置。对此呢,Facebook已经提供了一套配置选项来快速启动React应用,那么老铁为啥还要写这篇文章呢?我是这么认为的,create-react-app虽好,但是它让你对Rea...
2019-07-30 14:56:54
4405
1
原创 前端工程师王者之路
前端工程师王者之路战争背景等级设置等级解读战争背景随着IT行业就业人数的不断增加,前端岗位竞争力明显加大,各路大侠开始围绕不多的高薪职位展开厮杀。索性我们在这里给大家提供一份通关秘籍,帮助大家披荆斩棘,速上荣耀王者。【我们的口号是:拒绝当小兵!!】等级设置我们这里共设有八个阶段:1、【倔强青铜】(JavaScript基础阶段)2、【秩序白银】(JavaScript语言进阶)3、【荣耀...
2019-07-02 20:31:14
467
原创 jquery-ui sortable详解
该插件的用途:使用鼠标重新排列列表或网格中的元素。helper 这个小伙子总结的不错Note: In order to sort table rows, the tbody must be made sortable, not the table.//毕竟tbody是父级嘛1、appendTo 说实话这个属性不是甚了解,大致是appendTo父级容器//拖拽的父级节点
2017-11-29 15:40:23
6447
原创 【特效库】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++;
2017-05-31 11:00:01
1652
原创 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
2016-10-10 09:52:34
9455
1
原创 jquery以及原生js 如何实现div倒序
--> 01 02 03 04 05 06 /*jquery*/ /*$(".container>div").each(function(){ $(this).prependTo(".container"); })*/ /*vanilla*/ var bigContainer = document.
2016-09-21 17:43:01
3808
原创 javascript时间处理
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)
2016-09-13 17:20:52
558
原创 children与childNodes的区别
乍一看 感觉一样 平时用的时候也没怎么留意其实区别还是有点儿大 传言啊 这个 childNodes是正统属性 亲生的 而这个children是野孩子 这个野孩子比较随意 所以用它返回来的就只有DOM元素了 其他的文字啥的 都不返回 而 childNodes比较讲究 事无巨细 都要返回来 但
2016-09-07 17:23:25
10807
3
原创 input与span之间莫名的空隙
对于行元素span或者input来说 很多人会用inline-block来显示他们但是往往发现 中间会留一段小空隙 图片就不贴了 可以自己试一试 就会发现 怎么都去不了其实这个问题是由于换行引起的我们通常都是一个标签写一行如果我们把上一行标签的尾巴移到下一行 自然可解决这个问题如下>
2016-09-06 11:06:30
5031
4
原创 获取浏览器可见高度
就一句话 top.innerheight之所以在此记录一下 是因为网上别的信息很是不准确下面是在别处复制的内容 供参考 JS获取屏幕高度var s = "";s += " 网页可见区域宽:"+ document.body.clientWidth;s += " 网页可见区域高:"+ document.body.clientHeight;s
2016-09-06 10:25:55
3975
原创 CSS如何实现文字隐藏 超出文字隐藏 鼠标移入显示
span{ display: inline-block; width:60px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; } span:hover{ overflow: visible; } 欢迎光临本寒舍啊
2016-09-05 14:47:40
25447
1
原创 CSS层叠关系
我们最熟悉的css层叠关系要数z-index了,曾几何时,我也觉得层叠也就不过如此知道看了张鑫旭大神的博客 但是看归看 自己下来还是得把他说的例子实践一下 而且我们在实际开发过程中会遇到很多实际的特例 上面这张图是来自其网站的一张图 不想重新P图 在此借用一下 下面我就我们通常用的情况实践了一下
2016-08-24 16:16:36
907
原创 select下的option如何调缩进
今遇到一问题,select框使用了text-indent缩进了20px结果option框无论如何都无法缩进后来才发现 如果在select框用padding-left:20px;子元素的option即可完美继承缩进
2016-08-12 16:17:13
7974
原创 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;
2016-08-08 10:10:00
404
原创 CSS3 Transform详解
CSS3 Transform简介:Css3 transform 允许元素在2维以及3维空间进行变换。具体包括三大块,2D transform、3Dtransform、以及SVG transform。这种变化是基于像素操作的,操作包括移动,旋转,大小变换等。Transform origin:例如,如果bottom就是底边的中点,left就是左边的中点。Center就是
2016-07-26 11:33:08
712
原创 CSS3 transition详解
D3 Transitions简介:Css 的transition属性可以使CSS的值在一段时间内平滑的变化。Transition:一般情况下,当CSS值发生变化时,其渲染结果会立刻发生变化。而这个transition新属性可以将这一变化在一段时间内缓慢过渡。#transition01{position: absolute;left:0px;width:200px;
2016-07-25 16:17:44
2216
原创 【Vanilla Js 02】事件绑定与去除
将以上的代码JS最后一句除去,就可以调用点击事件。将最后一句加上就相当于卸载了当前事件值得补充一句的是,为什么推荐用这种方法呢?有两点原因1、可以绑定多个事件,如果只是用onclick的话,就只能绑定一个事件而已。如果你之前用了onclick,没关系,和onclick不冲突2、可以卸载事件,这个是他的优点
2016-07-20 10:21:28
581
原创 如何理解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("
2016-06-15 17:47:39
1339
原创 IE9下面图片黑框问题
都已经21世纪了 今天在IE9下面发现我的图片莫名有了黑色框框谷歌火狐正常自己也没有加任何的border呀情况如下要多扯淡多扯淡 这个问题很好解决:只需要将img的border设置为none就可以了类似的兼容性问题可能还有很多 比如如果不给指定position的话 ,不同的浏览器的默认position是不一样的,也就会出现谷歌与火狐效果
2016-04-15 16:52:45
1399
原创 svg性能低?能展现的点比较少?真的是这样吗?
很多人会说用d3画svg有局限,d3本来就不适合大数据可视化说出这些话的人,首先要说的就是 他不懂大数据 因为大数据的精髓不在于数据量,而在于数据分析也就是说可视化的目的是为了便于对数据的分析那么问题来了 首先我们看一下这幅图95之前的朋友 肯定记得 老电视机分辨率低,如果距离很近的话 就会看到这个景象 我们所说的像素也是这样现如
2016-03-15 15:52:28
3996
翻译 老外如何看待WEB前端与后端? ---来自QUORA
老外如何看待WEB前端与后端? ---来自QUORA如下是针对这一问题的不同的高质量的回答Marc Grabanski,Creator of Frontend Masters 3.4k Views 软件开发本身就很难,不论你搞的是前端还是后端 用为一名UI开发者,我爱WEB前端因为大家触碰到的像素都是由我们创造的,但是我们开发构建所依赖的合理、并且是可扩展的API也是相当重要的。 Stripe(一家支付公司
2016-01-27 22:06:03
5938
翻译 无处不在的蓝牙—真的很危险吗?
无处不在的蓝牙—真的很危险吗?前些天我收到了我的读者Craig写给我的信,他很担心蓝牙辐射:(内容如下)hi Lloyd, 我有个非常简短的问题,或许这并不是一个简单的问题 接听电话的时候,降低辐射最好的方法是什么? --头戴式蓝牙耳机? --相比我直接将手机贴近耳边而言,使用蓝牙设备可以大幅度的降低辐射吗? --一个有线耳机? --辐射会通
2016-01-26 21:34:41
8355
2
原创 如何设置滚动条样式
/*滚动条设置*//* 设置滚动条区域*/::-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
2016-01-25 22:29:14
1823
原创 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(".
2016-01-25 10:12:16
1690
1
原创 【web前端攻城狮】string转换成json对象
很多时候,可能需要我们自己去拼接json对象就像我这样给定的数据是这样的var data = {贾嫒: -45494.848, 巩嫒: 16720.788, 余嫒: 26449.724, 梁安: 21023.016, 彭安: 3729.6};而我们想要的格式是这样的var jsongirl = { 'name': 'flare', 'children
2016-01-04 17:51:56
3649
原创 【web前端攻城狮】表单验证之电话验证
我们这里要用到的是淘宝电话验证接口,先给个图片url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+$("#rg-inputphone").val()用这种方式,在用户注册的时候会让产品形象更好,更有依赖感 $("#rg-inputphone").on("blur", function() { ...
2015-12-14 14:17:49
781
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人