利用文档碎片来添加DOM节点

众所周知,改变DOM结构会导致屏幕重绘,这是非常消耗性能的行为,但我们有时候必须要删减或者更新现有的DOM结构。以增加子节点为例,我们来看下文档碎片的用法。

举个例子先,我们准备利用Javascript把两个段落动态地添加至<body>里,也就是为<body>添加子节点。通常我们会这么写:

?View Code JAVASCRIPT
var p, text;
p = document.createElement('p'); //创建P节点
text = document.createTextNode('这是第一段内容哗哗哗'); //创建文本节点
p.appendChild(text); //将文本添加至P节点
document.body.appendChild(p); //将含有文本的P节点追加至网页里
 
p = document.createElement('p');
text = document.createTextNode('这是第二段内容啦啦啦');
p.appendChild(text);
document.body.appendChild(p);

继续阅读利用文档碎片来添加DOM节点

Javascript计算日期差

今天别人说起某人跟某人相识了多少天,一下子就想到了日期差,用javasript实现起来就非常容易了。

解决问题的方法很简单:假设给定一个日期,我们可以通过getTime()方法获取到毫秒数(该日期距离1970年1月1日之间的毫秒数),然后我们再获取当前时间的毫秒数(同上)。两者相减得到的毫秒数除以1000得到秒数再除以60得到分钟数再除以60得到小时数,最后除以24即可得到两个日期相差的天数。

知道方法后,js代码写起来也就很简单了。
继续阅读Javascript计算日期差

JavaScript数组的indexOf()方法

最近写个小demo的时候需要求数组中某一元素的下标,首先就想到了Array的indexOf()方法,但是要注意的是indexOf()方法在IE里有不支持的情况,仅有IE9以上的版本(含IE9)支持。为照顾那些顽固不化的老东西,那就自己写个扩展呗。想着用遍历比较方便,就这么写了。

?View Code JAVASCRIPT
 
if(!Array.prototype.indexOf) {
	Array.prototype.indexOf = function(elt) {
		for(var i = 0,j = this.length; i < j; i++) {
			if(this[i] === elt) {
				return i;
			}
		}
		return -1;	
	}
}

继续阅读JavaScript数组的indexOf()方法

纯CSS3打造焦点轮播图(无js)

今天给大家带来一个不借助js,只用纯css3实现的焦点轮播图教程,包括轮播间隔时间我们也可以自定义。这里我们用到的是css3的@keyframe规则和animation属性。注意,此规则与属性仅IE10以及Chrome、Safari、Opera、Firefox支持。具体用法可以参照这篇文章:http://www.w3cplus.com/content/css3-animation或者网络相关资料。

首先我们先构建主框架,很简单,就不详述了。

<div id = "container">  
  <ul id="slide">
    <li id="first"><a href=""><img src="1.jpg" alt="图片1"/></a></li>
    <li id="second"><a href=""><img src="2.jpg" alt="图片2"/></a></li>
    <li id="third"><a href=""><img src="3.jpg" alt="图片3"/></a></li>
    <li id="fourth"><a href=""><img src="4.jpg" alt="图片4"/></a></li>
  </ul>
</div>

继续阅读纯CSS3打造焦点轮播图(无js)

CSS3做个爱心送给你的爱人

之前有在网上看到过别人做的一个爱心图形,非常好看,今天尝试着自己做了一个,虽然看起来有点别扭,但也分享一下吧。

做这个爱心主要是牵扯到css3的border-radius属性以及transform属性。爱心看起来用css制作有点困难,但当你学会能够庖丁解牛的时候就觉得其实不过尔尔。将爱心拆分成若干个我们已经学会制作的几个图形然后再组合起来就可以了。

爱心可以拆分成两个矩形,且上边的两个角为圆角,接着将两个图形一个左旋转,一个右旋转,然后调整两个图形距离,部分重合后便有了爱心的模样。 继续阅读CSS3做个爱心送给你的爱人

炒冷饭系列之IE Bug(7) —— overflow:auto时的溢出

这个Bug出现在IE6、7中,当一个设置了相对定位的元素包裹在设置了overflow:auto 的容器中时,相对定位的元素在现代浏览器中会被裁剪,通过下拉滚动条可看到全部,而在IE6、7中则会出现里容器的元素超过容器的部分会溢出来,滚动条并未发生任何作用。

html代码:

 
<div id="container">
	<div id="box"></div>
</div>

继续阅读炒冷饭系列之IE Bug(7) —— overflow:auto时的溢出

炒冷饭系列之IE Bug(6) —— IE躲猫猫Bug

偏头痛差点要了我的命,不过这依然不能拖慢我炒冷饭的步伐。今天带来一个非常经典的IE Bug —— 躲猫猫(Peekaboo Bug)。这个Bug主要出现在IE6和IE7里。在看一个国外文档时看到一个作者说IE7自从06年就修复了这个Bug,具体不得知,但在我的例子中IE7还是会出现的。

先讲下出现Bug的环境:一个拥有背景色或者背景图片的容器中,有一个浮动元素以及一个不浮动的元素,最后有一个清除双边浮动的元素,三个元素均不设置宽高,当底部清除浮动的那个元素更靠近上面的浮动元素时,则触发这一Bug。具体表现在:IE6、7中没有浮动的那个元素内容显示不出来,但当你重新刷新一下或者点开另外一个窗口然后再回到原来这个窗口时,内容就会重新显示出来。就我本人测试来看,在不显示内容的区域用鼠标拖选也可以把内容显示出来,或者直接CTRL+A全选一样可以达到效果。
继续阅读炒冷饭系列之IE Bug(6) —— IE躲猫猫Bug

炒冷饭系列之IE Bug(5) —— 怪异模式下的盒子居中问题

当一个html页面头部没有声明DTD的时候,在IE浏览器中就会进入怪异模式,怪异模式下页面渲染标准会遵循IE6以下的低版本渲染标准,从而在IE浏览器中会出现很多异常情况。我们在让一个盒子居中在一个容器时,常常会使用设置margin的左右间距值为auto来实现,然而IE的怪异模式会不认识这个auto值,导致页面无法实现我们想要的效果。在本例中我们删掉页面头部的DTD声明,从而使IE进入怪异模式,来达到我们的演示目的。

html代码:

<div id="container">
	<div id="box">
	</div>
</div>

继续阅读炒冷饭系列之IE Bug(5) —— 怪异模式下的盒子居中问题

炒冷饭系列之IE Bug(4) —— 列表项之间的空白间隙

这个Bug依然出现在可恶的IE6上,当我们做一个垂直列表的时候,希望列表项之间没有空隙,但是在IE6上却会莫名其妙出现空隙。

html代码:

<ul>
	<li><a href="">首页</a></li>
	<li><a href="">产品</a></li>
	<li><a href="">服务</a></li>
	<li><a href="">关于</a></li>
</ul>

继续阅读炒冷饭系列之IE Bug(4) —— 列表项之间的空白间隙

炒冷饭系列之IE Bug(3) —— 极小高度

其实名字是我自己起的,暂且叫它“极小高度”吧。将一个盒子的高度设为很小的值,比如1px、2px的时候,为了展示得明显一点,我们为其添加一个实线的border,在IE6里会出现高度并不是自己所设置的那样小,跟现代浏览器有明显的差异。
html代码,很简单,就一个div

<div id="box"></div>

继续阅读炒冷饭系列之IE Bug(3) —— 极小高度