2016年10月_吃瓜群众欢乐多

原创缓动动画原理--封装基本函数

动画速度由快到慢 div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; opac

2016-10-31 11:12:29 1258

原创点击空白处隐藏：判断当前对象event.target.id||event.srcElement.id

一个盒子，点击除了自己之外的任何一个地方，就会隐藏。原理：点击自己不算 ( 怎么证明我是我点击的这个对象id 正好和自己一样 ) 点击空白处就是点击 document 涉及知识点：判断当前对象火狐谷歌等 event.target.id ie 678 event.srcElement.id

2016-10-29 20:07:34 3535

原创事件冒泡:

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。顺序E 6.0: div -> body-> html -> document其他浏览器: div -> body-> html -> document -> window不是所有的事件都能冒泡。

2016-10-29 19:18:20 185

原创页面响应式网络布局原理

window.onresize=function(){}：改变窗口事件,即窗口或框架被调整大小时发生；新建一个空白css链接<link rel="stylesheet" type="text/css" href="" id="styleCss">当页面宽度>960时，调用css/1.css当页面宽度>480时，调用css/2.css……&lt...

2016-10-29 19:12:58 566

原创页面滚动时的位置：为了兼容浏览器，封装自己的scrollTop和scrollLeft(内含“怪异模式”）

三种兼容表现形式： /*document.body.scrollTop//360 谷歌 document.documentElement.scrollTop//火狐,IE浏览器 window.pageYOffset//最新的浏览器都支持 ie9+*/未封装的写法：window.onscroll=function(){

2016-10-29 10:22:50 1121

http://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649084286&idx=1&sn=7ff931938ef52cae3617c4cf7928033e&chksm=be5bf6d3892c7fc53ba04ea8203c27ab676f60560448cb6c3249aafceddcf907874e1a7c8f5d&mpshare=1&s

2016-10-27 14:17:52 228

原创面试经典题用JS函数写出，输出两个字符串最长的公共部分

用JS函数写出，输出两个字符串最长的公共部分，如string 和interesting ，输出他们共同的最长的ingfunction find(str1,str2){ if(str1.length>str2.length){ shorter = str2; longer = str1

2016-10-27 13:29:30 2986

原创用JS仿照$的符号封装

兼容IE678 div { width: 100px; height: 100px; background-color: pink; margin: 10px; }

2016-10-25 16:00:16 1353

原创再进一步优化—获取某id下的ClassName—IE8以下浏览器的兼容语句，同上一篇文章的原理

详述：封装Class类 div{background-color: pink;margin-top: 20px;width: 300px; height: 100px;} window.onload=function(){ //获取ID下面的className function fn(id,classname){ //支持getEl

2016-10-23 18:16:36 678

原创进一步优化—IE8以下浏览器不支持document.getElementsByClassName() 访问节点；怎么解决？---封装自己的类名

当className有多个时，IE8以下不支持获取同时存在多个className的元素，怎么解决？？如123 封装Class类 div{background-color: pink;margin-top: 20px;width: 300px; height: 100px;} window.onload=function(){ function

2016-10-23 17:35:19 597

原创把字符串转换为数组 split()

1、split("")与split(" ")的区别：window.onload=function(){ var arr="abc"; console.log(arr);//abc var a=arr.split(" "); console.log(a);//["abc"]

2016-10-23 17:34:25 5272

转载 CSS左侧固定宽右侧自适应（兼容所有浏览器）

方法一、浮动布局HTML Left sidebarMain ContentCSS Code*{margin: 0;padding: 0;}#left {float: left;width: 220px;background-color: green;}#content {background-color: orange;margin-left: 220px;/*

2016-10-23 15:53:31 2705

原创 IE8以下浏览器不支持document.getElementsByClassName() 访问节点；怎么解决？---封装自己的类名

具体如下代码封装Class类 div{background-color: pink;margin-top: 20px;width: 300px; height: 100px;} window.onload=function(){ function fn(classname){ if(document.getElementsByClassName)

2016-10-23 12:06:30 2307

原创星座运势-选择下拉列表选项不同，内容的样式不同

下拉列表改变内容的样式下拉列表选择改变后，星座图片改变，星星个数改变实现代码如下： .box { width: 320px; height: 260px; padding-left: 30px; margin: 100px a

2016-10-23 10:54:02 916

原创模仿京东tab切换--自创

tab效果 *{margin:0; padding: 0;} .w { /*版心提取 */ width: 1210px;margin:0 auto; } .clearfix:before, .clearfix:after{ display: table; content: ""; } .clearfix:after{ clear: both; } .

2016-10-22 21:42:08 1784 2

原创鼠标经过选项，浅色边框变成红色边框，原来的浅色竖线被覆盖；尽量但是不改变原来选项的盒子的大小的方法；如图效果

1、直接hover替换颜色2、用margin-left::-1px;类似原理做浅色竖线的CSS设置：鼠标经过改变后的样式：

2016-10-22 21:40:46 2715

原创利用for循环遍历京东背景图片。

易错点：注意backgroundPosition中的表现形式：is[i].style.backgroundPosition="right "+(-25*i)+"px";right "+(-25*i)+"px是一个整体；"+(-25*i)+"是一个整体，表示插入的表达式

2016-10-21 21:43:41 1544 1

原创 js作业--自己写

1.编写一个程序，计算增加后的工资。要求工龄满5，增加20%工资；若2—4，则增加15%；若小于2，则增加10%工资。 Document 输入工作年份输入工资点击我计算结果 window.onload=function(){ function $(id){ return document.getElementById(id); }

2016-10-21 20:55:02 4510

原创 2016-10-21

最近这几天一直在复习以前所学的知识，感觉很有感悟，一个知识点，看第一遍时，觉得是个理论；第二遍时，啊，原来他是这样用的啊；看第三遍时，逐渐明白了他的原理。JavaScript是一个很神奇的语言！！PS：其实我一直不太喜欢在网上长篇大论，女生似乎比男生更加容易多愁善感，心血来潮时，容易激发我的写作欲望，心情好时，什么都写不出来。

2016-10-21 10:49:50 198 1

原创经典面试题

“~x”的结果为“-（x+1）”“~2018”的结果为“-2019”;“Math.abs(~2018)”的结果为“2019”为什么得到如此答案？与“隐式的全局变量 ”有关；在函数体内部，但是没有声明var 的变量也是全局变量2题为什么是undefined?变量声明提升1 function fun(){2 console.log(num);3 var num ...

2016-10-21 10:36:29 197 1

原创 CSS 层叠顺序

参考文章：一篇通俗易懂的 CSS 层叠顺序与上下文：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551373&idx=2&sn=f4308981b08c1e347ed021a5afc3bcce&chksm=8025a14cb752285a36ec0907058e30201b407adae49eacd965e02960210ab1

2016-10-21 09:47:37 531

转载左边竖条的实现方法-8种

法一：border法二：使用伪元素div::after{ content:""; width:5px; height:60px; position:absolute; top:0; left:0; background:deeppink;}法三：外 box-shadow法四：内 box-shado

2016-10-21 09:23:13 2259

转载 text-align:justify实现两端对齐

Document *{margin:0;padding:0;}/* 说明： 1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify 2.line-height:0 解决标准浏览器容器底部多余的空白*/.demo{ text-align

2016-10-21 09:14:06 1192

转载全兼容的多列均匀布局问题--来自微信公众号-“前端大全”

css实现两端对齐的3种方法：http://www.cnblogs.com/PeunZhang/p/3289493.html法一：display:flexCSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为。当然 flex 布局应用于移动端不错，PC 端...

2016-10-21 08:55:20 654

原创 src 和 href 的区别

学了这么久，今天居然把这个给搞混了，真是不好意思说出来了href 表示超文本引用，在 link 和 a 等元素上使用。引用CSSsrc 表示来源地址，在 img、script、iframe 等元素上使用。引入javascript <script type="text/javascript" src="js/jd.js">其实简化一个语法的意思是，sr

2016-10-20 20:16:26 580

原创 BFC模式

1、BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC，它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。BFC有一下特性：内部的Box会在垂直方向，从顶部开始一个接一个地放置。Box垂直方向的距离由margin决定。属于同

2016-10-20 16:53:28 1566

转载 PS切图

使用之前，要对PS基本信息进行设置，以方便我们切图1.视图/显示/智能参考线以及视图/字符，这两个都要选上；2.窗口/信息；窗口/字符，两个打开，其他的多余的可不需要，将前面的勾取消；3.点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定；4.编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】这样的做的好处：在

2016-10-19 15:22:19 294

转载 css中inline | block |inline-block|table|flex系统的整理和分析

参考链接：http://www.cnblogs.com/qingkong/p/4456213.htmlblock　　解释：指定对象为块元素（占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样）　　特点：1.处于常规流中时，如果width没有设置，会自动填充满父容器　　　　　 2.可以应用margin/padding　　　　　 3.在没有设

2016-10-19 10:31:04 678

转载 <a href="#">与<a href=javascript:void(0)> 的区别

#"> 点击链接后，页面会向上滚到页首，# 默认锚点为 #TOPJavaScript:void(0)" onClick="window.open()"> 点击链接后，页面不动，只打开链接作用同上，不同浏览器会有差异。如果点击链接后，不想使页面滚到页首，保持点击前的样式不变化，就用href="javascript:void(0)"，不要用href="#"，return fa

2016-10-19 10:14:04 416

原创清除浮动的4种方式

清除浮动：根据情况需要来清楚浮动。清除浮动的目的：就是为了解决父盒子高度为0 的问题。1.、额外标签法给浮动盒子的后面添加一个新的div2、overflow:hidden 触发了bfc模式，就不用清除浮动了 bfc模式：http://www.cnblogs.com/dojo-lzz/p/3999013.html3、伪元素.clearfix:after{

2016-10-18 18:47:11 2990

原创复习--JS基础

以下算是经典的入门算法吧，还记得第一次接触时，感觉难得要命，现在来看，也不过如此！！1、如果今天是星期六，那么1000天后是星期几？用一条语句计算出来。var a=(1000%7+6)%7; alert(a);2、用户输入一个三位数，用程序计算三位数字的和。比如：用户输入155，就弹出11用户输入316，就弹出10用户输入989，就弹出26用户...

2016-10-17 20:57:54 2902

原创 javascript基础1

数据类型 number string boolean null undefined返回类型 number string boolean object 未定义则返回undefined55十进制 055八进制 0x55十六进制 NaN：not a number"blue"字符串 ‘blue’字符转换为字符串：a.tos

2016-10-16 21:41:34 169

原创近两天感想

一计科院同学，计算机还不错，已经找到了工作，还参加了传智播客的javaee培训，这件事情让我很震惊……然后自己突然冒出了要去培训机构培训的想法，咨询了几家培训机构，也上网了解了下，培训机构真是黑啊，前端开发培训的课程相对于Java、安卓来说，其实课程设置很简单，但是价格一样贵，达内要18800元，当时觉得很不公平，问老师，老师说，那是因为你们工作的薪水和Java、安卓一样高。什么什么一大篇劝我

2016-10-16 20:52:19 311

原创一丁点感想

看书真的很重要，以前似懂非懂的知识，在书中全部有了答案！！！！果然，大神们的建议是不错的！！！计算机语言，不管何种语言，其实他们在原理上面有一定的相似之处，其实以前在学习Java时，就有许多模块基础不够扎实，因为那个时候比较偏理论，自己无法理解。在学习JavaScript后，再去看Java，咦，原来这儿就是这么个回事啊！！！所以，我相信，学好了js,相信对学习后台语言有一定的帮助！！！其实

2016-10-12 19:47:22 170

原创最近学习感想

最近这几天决定看书学习了，至于看书收获，买了本笔记本记下来，希望能够静下心来，把浮躁的心静下来！！！不要浪费时间管什么校招了。一心一意学习吧！！！我不想先就业再择业，我就想一条路死磕到底。走自己的路，让别人说去吧！！！

2016-10-12 19:31:45 265

原创 2016-10-11要想学得精，必须得多看书

大神说得很对，做任何事情，要想做得精，应该首先懂其原理，把基础的一定要掌握得牢牢的，这样才能让你提升得更快！！！前两天借了一本【JavaScript高级程序设计】，是时候拿出来看看了，许多大神都推荐的书，说明是真的好！！【CSS禅意花园】、【***权威指南】【语言精粹】【全能指南】——还有啥的记不太清了我前段时间关注了一个微信公众号，叫做“web前端开发”；在这个公众号上面推送了几篇前端图书的

2016-10-11 20:42:35 331

转载【全】深入理解JavaScript的闭包特性，解决闭包处理循环中的点击事件i为同一值的问题

深入理解闭包请看MDN解释初学者经常碰到的,即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。<div> &...

2016-10-11 10:35:27 348

转载 JavaScript事件绑定和普通事件区别

区别十分简单，直接看代码吧 Document button var btn=document.getElementById("btn"); btn.onclick=function () { alert('普通事件1');//不执行 } btn.onclick

2016-10-11 09:57:06 290

原创 IE6浏览器的bug问题及相关解决的方法

IE6浏览器的bug问题及相关解决的方法1、css浮动边距加倍错误（双倍边距BUG）的解决办法该错误只影响ie而不影响其他浏览器，我们可以考虑用hack来解决！！！解决方法：_display:inline; 2、扩展框问题原因：无法将内容放入固定宽度或固定高度的框中，则框会扩展以适应内容，而不是让内容溢出框外。解决方法：overflow: hidden3、png图片

2016-10-11 09:17:37 2909

转载 HTML5---canvas绘制七巧板

七巧板//该数组表示七巧板的七块 var tangram=[ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"yellow"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"pink"}, {p:[{x:800,y:0},{x:800,y:4

2016-10-10 18:05:03 815

react源码-简易的demo-通俗易懂

空空如也