利用文档碎片来添加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()方法

新手学做Javascript原生版焦点轮播图补充

在上一个轮播图教程里(新手学做Javascript原生版焦点轮播图)我们只是实现了最简单的图片轮播,而一个完整的焦点轮播图还应该包括说明文字、指示数字与图片的同步轮播。当然,我们就在上一篇创建的代码基础上添加修改。因为是新手教程,便于理解,我尽可能地简单化,在此不考虑性能问题。

实现效果:三张图片轮流播放,指示数字、说明文字与图片同步轮播,当鼠标处于轮播图上时使其停止轮播,离开图片区再度实现轮播。并且当鼠标位于数字上时立即切换到相对应的图片、文字。 继续阅读新手学做Javascript原生版焦点轮播图补充

javascript常用正则表达式

转载自网络上,方便查询、学习。

整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$
只能输入数字:”^[0-9]*$”。
只能输入n位的数字:”^\d{n}$”。
只能输入至少n位的数字:”^\d{n,}$”。
只能输入m~n位的数字:。”^\d{m,n}$”
只能输入零和非零开头的数字:”^(0|[1-9][0-9]*)$”。 继续阅读javascript常用正则表达式

新手学做Javascript原生版焦点轮播图

焦点图算是javascript的一个常用特效,很多人面试时都会被问到焦点图的实现方法,而对于入门新手来说,并不容易,起码我是这样的。今天就教新手们做一个最简单的焦点轮播图,也让自己巩固一下。

实现效果:三张图片轮流播放,当鼠标处于轮播图上时使其停止轮播,离开图片区再度实现轮播。

实现方法:html中只放置一个img标签,js里创建一个含有三张图片路径的数组,使用setInterval()方法按照指定周期调用数组里的图片路径替换到img标签的src属性里。当然还需要一个鼠标的onmouseover与onmouseout事件来切换是否轮播。
继续阅读新手学做Javascript原生版焦点轮播图