- 博客(52)
- 收藏
- 关注
RSS订阅原创 React生命周期总结
生命周期可能会经历如下三个过程： 装载过程：把组件第一次在DOM树中渲染的过程 更新过程：当组件被重新渲染的过程 卸载过程：组件从DOM中删除的过程装载过程： 当组件第一次被渲染的时候，依次调用的函数如下： constructor 一个React组件需要构造函数，往往是为了如下目的： 初始化state 绑定成员函数的this环境getIniteState ...
2018-09-13 20:24:00
898
原创 css3loading状态2
Document .demo{width:100px; height: 100px; margin:30px auto; position: relative;} .demo i{ display: block; border-radius: 50%; border: 2px solid #333; border-color:transparent #333; position: absol
2016-06-22 15:12:34
395
原创 css3loading状态1
不知道为啥 编辑器总是把html中的i标签 解析成em标签 Document .demo i{display: block; width: 100px; height: 100px; position: absolute; top:50%; left:50%; margin:-50px 0 0 -50px; background: #333; border-radius:50%; o
2016-06-22 11:55:20
464
原创 左右布局页面 窗口缩小 页面自适应
额 这两天特别的尴尬 遇到这么一个页面 开始以为还蛮简单的 后来做的时候发现 我想的太简单了大概要求是这样的：图片纵向全屏 窗口缩小的时候 也是高度填充整个屏幕 右侧区域的距离自适应 达到一定的临界点的时候 就变小一定的尺寸 图片如附件所示这个页面 我的解决方法不是很好我的方法是：左边的图片： 绝对定位 ，top:0, left:0 bottom:0;这样图片就
2015-10-22 18:42:49
5033
原创 pagex，screenx，clientx的区别
screenX：参照物为电脑的屏幕左上角，距离电脑屏幕的水平距离clientX：参照物是内容区域左上角，距离内容区域左上角的水平距离，会随着滚动条的移动而移动pageX：参照物也是内容区域的左上角，距离内容区域左上角的水平距离，但是不会随着滚动条的移动而移动
2015-07-09 11:34:36
1407
原创 欢迎使用优快云-markdown编辑器
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0} #main{width:300px; height: 300px; margin:50px
2015-06-04 16:57:00
440
原创 ie7下面不支持块级元素使用display:inline-block的问题
在ie8以及以上的浏览器中，对块级元素使用了display:inline-block后，会将块级元素转换为行内块元素，但是在ie7和以下的浏览器不支持在ie7和以下的浏览器中 使用了display：inline-block会触发ie的layout解决方法：div{display:inline-block; *zoom:1; *display:inline}
2015-05-29 16:12:23
879
原创 jq中选择器的效率问题
$('.class') $('div .class') $('div.class') 三个的执行效率$('.class')>$('div .class')>$('div.class')原因：$('.class')相当于调用了原生js里面的doucmen.getElementsByClassName()方法，在低版本的ie中会比较慢，但是在高版本浏览器中的速度是很快的$('d
2015-02-10 11:23:17
761
原创 逗号表达式
今天在qq群里看到了这么一题目长见识了if(12,0,3,5){alert(1)}else{alert(2)}结果弹出的是1if括号里面的，是个逗号表达式，逗号表达式，只看最后面的
2015-02-03 18:49:42
682
原创 事件委托
先来解释一下啥是事件委托：事件委托就是：子元素的事件，委托给他的父级先来个例子看看：无标题文档*{margin:0; padding:0}ul,li{ list-style:none;}#ul{ overflow:hidden;}li{width:100px; height:100px; background:red; margin:20px; fl
2014-08-19 16:17:40
865
原创 js中的子类继承父类的方法和属性
上次讲了个简单的继承，这次 咱们讲个稍微复杂点的，那就是让子类继承父类的属性和方法，假设人 (Person)是父类，工人(Worker)是子类，让worker继承person的属性和方法：父类：function Person(name,age){ this.name=name; this.age=age;}Person.prototype
2014-08-15 13:59:24
9530
2
原创 js的继承问题
今天我们来说说继承的问题吧，以前js的继承总是弄的我头疼死了，现在总算是弄明白了啥是继承，先来个简单的例子：方式一：function createPerson(name,age){this.name=name;this.age=age; this.showName=function() {alert(this.name); }}va
2014-08-13 10:26:16
682
原创 爱心
无标题文档body{ background:#000;}.love{ font-size:800px; text-align:center; text-shadow:0 0 10px red; color: hsla(0, 0%, 0%, 0); }❤
2014-07-22 17:11:52
769
原创 去掉空格
无标题文档window.onload=function(){ var aInput=document.getElementsByTagName("input"); var oT=aInput[0]; //去掉左空格： function trimL(str) { var reg=/^\s+/; return str.replace(reg,'')
2014-07-09 16:44:15
750
原创 正则表达式验证邮箱，qq，座机，手机，网址
手机：var reg=/^1[34578]\d{9}$/;if(reg.test("你输入的手机号码") ){alert("手机号码输入正确")} else{alert("手机号码输入有误")}QQ:var reg=/^[1-9]\d{4,11}$/;邮箱：var reg=/^\w+@[0-9a-zA-Z\-]+[a-zA
2014-07-09 10:38:06
2647
原创 事件绑定和阻止默认事件
一般 为了阻止默认事件，我们都用return false，但是 如果你用了事件绑定，return false在高版本浏览其中就会失效，但是低版本浏览器中还是可以的，我们可以使用事件对象里面preventDefault()方法来去解决高版本浏览器中事件绑定了无法用return false阻止默认事件的问题。例如：取消鼠标右击后出现的默认菜单document.oncontextmenu=fun
2014-06-07 11:55:46
1531
原创 ie下面，没有背景色的bug
鼠标经过下面的二级菜单的时候，在ie下面，收缩上去了，给这个二级菜单加了背景后，就是正常的,这个是ie下面的一个bug，解决方法：background-img：url（123.jpg）；url里面的图片不用存在
2014-02-20 15:38:34
790
原创 倒计时
无标题文档 function Time(){ var endTime=new Date("Jan 3,2015 14:50").getTime(); var startTime=new Date().getTime(); var dTime=endTime-startTime; var s=d
2014-01-03 14:52:55
693
原创 缓冲运动框架
主要是将物体的速度由大变小，到达目标位置的时候，停止。缓冲运动框架：1.关闭定时器2.开启定时器3.速度的计算：速度=（目标位置-物体的位置）/系数4.速度取整：5.判断function startmove(iTarget){clearInterval(timer);timer=setInterval(function(){var speed=(iTarge
2013-11-28 17:30:46
825
原创 传说中的闭包
定义：在函数体中定义另外的函数作为目标对象的方法函数，而目标对象的方法函数，调用外层函数中的临时变量：例如：function Person(firstName, lastName, age){this.age = age;this.getName = function(){return(firstName + " " + lastName);};th
2013-11-08 11:20:29
817
原创 js的继承性问题
通过new+func名创建的对象，这个对象可以直接调用或访问func.prototype创建的属性或方法，这就是所谓的继承举例说明：function a(age){this.age=age;}var anobj=new a("22");a.prototype.old=function(){alert("Hello,I am"+this.age+"years old");
2013-11-08 10:32:24
561
原创 js返回和前进
返回和前进用到的是BOM中的history对象：返回：返回 //相当于调用history对象的back()方法；前进：前进 //相当于调用history对象的forword()方法；
2013-10-30 10:38:37
771
原创 编写选项卡插件
html: one two three 11111111111111111111 22222222222222222222 33333333333333333333
2013-10-18 10:35:04
874
原创 css3制作的3d效果
html:图片自己找个替换上去HOTHOTHOTcss:#content_quiz section{ position:relative; -webkit-perspective:2; float:left; width:25%; margin-right:5%;}#content_quiz section .film {-webkit
2013-10-15 16:45:28
878
原创 window.onload和$(function(){})的区别
window.onload=function{}表示页面加载完了后（包括dom和js），再执行函数里面的内容；$(function(){})表示页面（dom）加载完了后，再执行函数里面的内容
2013-09-23 16:52:38
1251
原创 css3的transition效果和transfor效果
css3的transition效果body{ background:#000;}*{margin:0; padding:0; list-style:none; outline:none;}div{ width:960px; margin:50px auto;}li{ width:130px; height:450px; background:#fff; float:left; text-a
2013-09-18 15:43:04
909
原创 有趣的css3效果
链接地址：http://demo.marcofolio.net/3d_animation_css3/http://www.panic.com/blog/http://ie.microsoft.com/testdrive/html5/borderradius/default.htmlhttp://designlovr.com/examples/dynamic_stack_
2013-09-18 10:36:43
838
原创 手机和电话的验证
$(".btn input[type='submit']").click(function(){ var company=$("#company").val().replace("/\s+/g",""); var contact=$("#contact").val().replace("/\s+/g",""); var tel=$("#tel").val().replace("/\s
2013-09-05 14:50:24
788
原创 substring的用法
substring 用来截取字符串，包括start的位置，但是不包括end的位置substring（start，end）start 必须要，表示截取的字符串的开始位置，从0开始end可选，表示截取字符串的结束位置，1.end>start:开始位置为start，结束位置为end；var content="abcdefg";alert(content.substring(4，6
2013-09-05 10:00:14
5061
3
原创 css3进行截取
在css3出现之前，一般采用substring来进行截取，现在 不用js，纯css3也能进行截取了：text-overflow：clip | ellipsis1.clip: 要在一定的高度内，配合overflow：hidden才有效，若没有overflow：hidden；将 不会有任何效果；2.ellipsis：将超出的部分用省略号表示，需要配合overflow：hidden和whit
2013-09-02 17:01:36
1083
原创 3种不同方式的焦点图轮播
1.自动轮播+经过圆点滚动+鼠标停留在圆点上 时候暂停+离开圆点自动轮播：焦点图*{margin:0; padding:0; list-style:none;}.clear-fix{*zoom:1;}.clear-fix:after{ content:"\0020"; clear:both; height:0; display:block;}h1{ text-align:cen
2013-07-24 16:25:18
1484
1
转载 div垂直居中的方法
2、让层垂直居中.className{ width:270px; height:150px; position:absolute; left:50%; top:50%; margin:-75px 0 0 -135px;}将层设置为绝对定位，left和top为50%，这时候使用负外边距，负外边距的大小为宽高的一半。3、在重置窗体的时候
2013-07-17 15:36:44
521
原创 滚动条
滚动条*{margin:0; padding:0;}.wrapper{ width:500px; height:500px; border:1px solid #000; margin:0 auto; }.content{ width:445px; height:400px; overflow:hidden; text-indent:2em;margin:50px 0 0 20px; fl
2013-07-17 13:44:51
5175
原创 css中换行的几种方式
1.white-space:normal; 这个只针对中文有效2.word-break:break-all; 强制换行，针对中文，数字，英文等都有效；3.word-wrap:break-word; 英文单词碰到换行的时候，整个单词换行：
2013-07-09 12:03:43
1496
原创 回到顶部
回到顶部$("a").click(function(){$("body,html").animate({scrollTop:0},300);})这里写成$("body,html")是为了兼容火狐和ie
2013-07-04 10:39:58
489
转载 javascript 回调函数
function main(son){alert("i am main function");son();}function a(){alert("i am function a");}function b(){alert("i am function b");}function test(){main(a);main(b);}test();
2013-07-04 10:18:12
491
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人