利用文档碎片来添加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计算日期差

wordpress后台不显示主题且无法编辑主题文件

这个情况很多人都会遇到,我也遇到过很长时间,一直觉得不会更改主题也就不了了之。今天闲来无事就来解决这个问题。

问题描述:wordpress后台-外观-主题,右边内容区理应列出所有你所安装的主题,在这种问题下你只能看到正在使用的那个主题。其他的都看不到,如图1:

wordpress主题不显示 继续阅读wordpress后台不显示主题且无法编辑主题文件

记无锡行

因为快到我生日的缘故,女朋友决定进行一次生日旅行,考虑到时间、精力、路程,最重要的还是经济因素,我们决定去较近的城市——无锡。

根本谈不上计划的计划,只是临时订了家酒店,买了车票,顺便联系了下无锡的杨同学,根本没想过到了无锡要去哪里玩儿。其实无锡有很多不错的景点,比如三国城水浒城,还有惠山大佛等等。不过鉴于门票比较贵,我们并未考虑去那些地方。

周六早上一大早就起床,带上必要的东西便去赶火车,特快2小时,11点多到达锡城。杨同学撇下老公女儿,开车带我们去她家附近的饭店吃了顿午餐。 继续阅读记无锡行

终于给IPad配上了蓝牙键盘

又是一个月多没更新博客了,最近忙着看世界杯,似乎学习工作的干劲儿都受到了极大的影响。加上电脑被老妈霸占,我也不忍心浇灭她炸金花的热情,就天天在手机、pad上随便玩玩什么,当然偶尔也看看书。

早就想为我的IPad配一个蓝牙键盘,但又因为价格的问题而不忍入手,前两天终于在媳妇儿的怂恿之下含泪下手。今天早上拿到后迫不及待地拆包试用。外观上,不大也不小,如果完全按照指法标准来使用的话,可能会略显挤了些,但是对于我这种一指弹用户来说,足够了。重量上的话就比较轻了,很担心用点力就会将其按断,不过轻便也算是一个优点了。至于性能上来说的话,反应还是很灵敏的。整体来说的话就是物美价合理。
继续阅读终于给IPad配上了蓝牙键盘

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()方法

祝贺皇马折桂欧冠

其实这篇文章在欧冠决赛结束后那天就写了,不过当时没写完便搁置了,闲着没事还是发出来吧,好歹也写了那么多字,不能浪费。

昨晚被李sir拖到所里看欧冠决赛,作为一名皇马伪球迷,当然希望皇马能够最终夺冠,也希望BBC组合能够均有建树。在9分钟迭戈科斯塔因伤下场后我一度认为机会来了。但卡西的失误以及长时间的落后也让我心急火燎。整场比赛其实都很无聊,双方的发挥都不属于正常水平。不过伤停补时阶段拉莫斯的头球扳平,瞬间点燃了我们的激情。其实在最后阶段我一直告诉李sir皇马可以扳平了,虽说只是个这么个愿望,但没想到真被我猜中了。

继续阅读祝贺皇马折桂欧冠

纯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做个爱心送给你的爱人

冷饭还要炒下去吗?

冷饭越炒越不是个滋味,一是实在浅显,只能给新手小众看,二是最近都是关于IE6的Bug问题,更觉得越写越不敢继续下去。原因在于现在HTML5大行其道,并且微软宣布停止更新XP,使得IE的份额,尤其是IE6,大幅下滑。IE6本就是个前端祸害,而新技术的推广真的很需要前端人员的努力!越来越多搞前端的人不再让自己设计的页面兼容IE6,甚至IE7、8,所以针对IE的这些漏洞或许真的用处很少。
继续阅读冷饭还要炒下去吗?