注意本脚本需要结合jquery使用。如果你不是采用jquery的，只要把$调用都改成document.getElementById即可，没有应用jquery的其他api。

花了1个小时把网上一个现成的JS对联广告代码整理了下，格式会比较清楚，也更通用化，比较面向对象一点呵呵。使用方法很简单，

<script>
//对联广告
HXFloatPari.init('{S_URL}/flash/ad/2011/float_pari.swf',110,270);
</script>

第一个参数填flash地址，第二个参数宽度，第三个参数高度。

替换supesite的编辑器，主要存在几个问题：

1. Javascript代码的兼容性，引入ckeditor的js代码，是否会与网站原先的代码产生冲突？
2. 分页插入。supesite的分页机制较为特殊，与编辑器的结合比较紧密，它的各个分页都是存为一条数据库记录。引入新的编辑器对分页会有不小的影响。
3. 插入图片功能，supesite的图片上传组件是独立的，引入ckeditor的话需要跟ckeditor再进行融合。
4. 原有的编辑器的一些特殊功能，插入分页标志，远程下载图片，需要重写并融入ckeditor。

逐一解决。

引入ckeditor

下载ckeditor，将整个目录放在supesite的目录下面。包不算很大吧，不过我还是删除了很多无用的语言文件，代码洁癖…没办法…

修改 supesite/admin/tpl/header.htm，删除原有的editor的js的引入，引入ckeditor的代码。

<script language=”javascript” type=”text/javascript” src=”ckeditor/ckeditor.js”></script>

修改supesite/admin/tpl/spacenews.htm，去掉原先的editor的编辑器的初始化代码，改为ckeditor的模式。

原先是：

<div id="fulledit"><div id="message"></div></div>

<script type="text/javascript">

function init() {

<!--{if checkperm('allowpostattach')}-->

et = new word("message", "$thevalue[message]", 0, 1);

<!--{else}-->

et = new word("message", "$thevalue[message]", 0, 3);

<!--{/if}-->

}

if(window.Event) {

window.onload = init;

} else {

init();

}

</script>

改成：

<textarea cols="80" id="message" name="message" rows="10">$thevalue[message]</textarea>
 <script type="text/javascript">
 //<![CDATA[
 CKEDITOR.replace( 'message' );
 //]]>
 </script>

OK，刷新下页面。。你就可能看到界面已经变成ckeditor了。华丽丽的ckeditor！同时，我所担心的Javascript兼容问题没有出现，看了ckeditor这方面的确做得相当不错。

如果你需要的编辑功能很少，到这一步你基本上就可以结束了，基本的编辑功能都ok了。不过如果你是做资讯类的网站，需要大量使用编辑器的各项功能，那还是要做完整的替换修改方案。

插入图片功能

插入图片功能的实现，是在supesite/function/common.func.php中的getuploadinserthtml函数，因为编辑器的替换，原先的插入图片无法找到原来的编辑区域，所以，只需要将原有的插入代码改成插入到ckeditor的插入代码即可。这里涉及到了ckeditor的一些接口方法调用。

原先的代码：

$inserthtml .= ' | <a href="javascript:;" onClick="insertHtml(\''.shtmlspecialchars($thehtml).'\');return false;">'.($isimg?$lang['insert']:$lang['insert_attachments']).'</a>';
 if(!empty($thehtmlsmallpic)) {
 $inserthtml .= ' | <a href="javascript:;" onClick="insertHtml(\''.shtmlspecialchars($thehtmlsmallpic).'\');return false;">'.$lang['insertsmall'].'</a>';
 }

修改后的代码：

$inserthtml .= ' | <a href="javascript:;" onClick="CKEDITOR.instances.message.insertHtml(\''.shtmlspecialchars($thehtml).'\');return false;">'.($isimg?$lang['insert']:$lang['insert_attachments']).'</a>';
 if(!empty($thehtmlsmallpic)) {
 $inserthtml .= ' | <a href="javascript:;" onClick="CKEDITOR.instances.message.insertHtml(\''.shtmlspecialchars($thehtmlsmallpic).'\');return false;">'.$lang['insertsmall'].'</a>';
 }

OK,搞定插入图片功能。

插入分页标志与远程下载图片功能

这2个功能的实现，就需要做ckeditor的插件开发了。

未完待续。

具体涉及的代码较多，有需要的同学可以邮箱联系我了解。fangyuqiang@gmail.com

算是被这个bug吓出一身冷汗，还以为open flash chart在IE下不能用了。状况是：图表在首次打开IE6进去后可以正常看到，但是这个时候再点击其他的图表，就出错了，IE8，firefox等浏览器不会有此问题，想来想去不清楚问题所在。后来用httpwatch抓包分析了下，发现IE6第二次不会重新加载图表。shit，又是 IE6缓存问题造成的。要解决IE6的缓存问题，当然就是每次请求的时候请求地址后面附带一个随机数。这里我们就要对flash的加载地址后面附带随机数了。

这次我是用swfobject加载的flash，所以直接在加载的flash地址后面加上时间随机数：
swfobject.embedSWF(“{S_URL}/flash/hxchart.swf?t=”+new Date(), “totaldata”, “100%”, “100%”, “7.0.0″,”expressInstall.swf”,{“get-data”:”get_total_data”});

问题解决。

我一向用firefox，今天在挖淘宝一段js代码研究的时候，因为代码都被压缩过，要把它格式化回来，我把那js文件拷下来，放到apatana中格式化。。apatana卡住，然后装死，格式化格不动。

然后我又转向一个网络上的js格式化工具，地址：http://www.div-css.com/f/tool/js-format-color.html

然后把压缩过的js扔进去，格式化，格式到13%左右，firefox提示，脚本执行缓慢，是否终止。继续格式化，终于开始越来越卡。受不了。想起来chrome好像js效率一向不错，打开chrome，执行，我操，15秒！firefox执行到卡死的脚步格式，chrome 15秒内飞快的帮我格式化好了，我一看，格式化后的代码有3000多行。

这次真的见识到了。

但是在实际使用过程中，发现这个插件还是有些小bug要解决。第一个，IE6，7下会出现影响图片查看的虚线框。

不知道为何，这个bug比较难以重现，lightbox已经通过在css中设定：#lightbox-nav a { outline: none;}来当前激活的链接的虚线边缘，但是在某些情况下还是会出现。最后没办法，自己hack一下。其实去掉虚线框的js代码也很简单，就是让当前元素失去焦点，调用元素的blur事件即可。在lightbox的js代码的280行与300行左右，在其调用点击事件的地方，加入去掉焦点的方法

settings.activeImage = settings.activeImage - 1;
 _set_image_to_view();
 $(this)[0].blur();//让当前元素在点击后失去焦点
 return false;

第二个，第一个与最后一个元素的事件处理不当，会触发一些js错误，有些情况下会导致lightbox的半透明边不会消失一直浮动在上层。

激活firebug，到官方的example下面点击它的范例，在最后一个元素再点击下一个的话，就会触发一个js错误：settings.imageArray[settings.activeImage] is undefined。这个js错误有些情况下会导致那个浮动的半透明背景层不会消失，这应该是作者的一个疏忽吧，对于第一个元素跟最后一个元素的触发事件没有更改，导致数组下标越界。修正这个错误也不难，修改第一个与最后一个元素触发事件，改为关闭lightbox。

$('#lightbox-nav-btnNext').unbind()
					.bind('click',function() {
						_finish();
						return false;
					});

 HXMap.util =
{
    autoResize: function(){
        var MINHEIGHT = 450; //浏览器允许的最小高度
        var TOPHEIGHT = 100;
        var viewHeight = HXMap.util.getWindowHeight();
        if (viewHeight < MINHEIGHT) {
            viewHeight = MINHEIGHT;
        }
        var contentHeight = viewHeight - TOPHEIGHT;
        $('#map').height(contentHeight);
        $('#searchReasultList').height(contentHeight - 119);
    },
    getWindowHeight: function(){
        return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
}

说起来也很简单，就是先获得当前浏览器窗口的可视高度，兼容性考虑到大部分浏览器了，然后扣除掉顶部的高度，结合jquery 使用设置下所需要设置高度的div。

最后这样调用：

HXMap.util.autoResize();
 $(window).resize(function(){
 HXMap.util.autoResize();
 });

这样调用的效果就是在初始载入的时候调高度整一次，每次窗口大小改变的时候自动调整div高度。最后的效果如：

http://www.hxfang.com/action-channel-name-map.html

这个bug只存在于IE6。google搜索一番，目前对于此bug没有明确的定论，难以重现，但是经常的情况就是，有些脚本执行，IE6需要采用setTimeout延迟加载才可以正常的执行。我个人猜测的像类似iframe这些动态加载的项，可能会造成IE6出现这个问题，或者像不同的frame框架同时加载执行Javascript也可能导致。

解决的方法就是将你要执行的Javascript，放在setTimeout(”,0)里面，这样IE6就可以正常运行了。

此外，调试的时候还发现，如果在代码中加入一个alert，Javascript也会被执行，但是去掉alert代码又不会执行，IE6真是强大的存在啊。

由于发觉内容收集越来越多，决定将CSS跟JavaScript分开。

一、document.formName.item(“itemName”) 问题

问题说明：IE下，可以使用 document.formName.item(“itemName”) 或 document.formName.elements ["elementName"]；Firefox 下，只能使用document.formName.elements["elementName"]。
解决方法：统一使用document.formName.elements["elementName"]。

二、集合类对象问题

问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。

三、自定义属性问题

问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
解决方法：统一通过 getAttribute() 获取自定义属性。

四、eval(“idName”)问题

问题说明：IE下，可以使用 eval(“idName”) 或 getElementById(“idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。
解决方法：统一用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。

五、变量名与某HTML对象ID相同的问题

问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。
解决方法：使用 document.getElementById(“idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。

六、const问题

问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量。

七、input.type属性问题

问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。
解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

八、window.event问题

问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。
解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：

<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}

九、event.x与event.y问题

问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。
解决方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
如果考虑第8条问题，就改用myEvent代替event即可。

十、event.srcElement问题

问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ? event.srcElement : event.target;
如果考虑第8条问题，就改用myEvent代替event即可。

十一、window.location.href问题

问题说明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。
解决方法：使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。

十二、模态和非模态窗口问题

问题说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。
解决方法：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话，使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

十三、frame和iframe问题

以下面的frame为例：

(1)访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象；
Firefox：使用window.frameName来访问这个frame对象；
解决方法：统一使用 window.document.getElementById(“frameId”) 来访问这个frame对象；
(2)切换frame内容
在IE和Firefox中都可以使用 window.document.getElementById(“frameId”).src = “webjx.com.html”或 window.frameName.location = “webjx.com.html”来切换frame的内容；
如果需要将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗口。

十四、body载入问题

问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证，待验证后再来修改。
[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。

十五、事件委托方法

问题说明：IE下，使用 document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用 document.body.onload = inject();
解决方法：统一使用 document.body.onload=new Function(‘inject()’); 或者 document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别

十六、访问的父元素的区别

问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。
解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。

十七、innerText的问题.

问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。
示例：

if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = ";my text";
}

[注] innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。

十八、Table操作问题

问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。document.appendChild在往表里插入行时FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表
解决方法：

//向table追加一个空行：

var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);

[注] 建议使用JS框架集来操作table，如JQuery。

十九、对象宽高赋值问题

问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法：统一使用 obj.style.height = imgObj.height + ‘px’;

二十、setAttribute(‘style’,'color:red;’)
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute(‘style’,'color:red’)
而用object.style.cssText = ‘color:red;’(这写法也有例外)
最好的办法是上面种方法都用上，万无一失

二一、类名设置
setAttribute(‘class’,'styleClass’)
FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)
解决办法：
setAttribute(‘class’,'styleClass’)

setAttribute(‘className’,'styleClass’)

或者直接 object.className=’styleClass’;

IE和FF都支持object.className。

二二、用setAttribute设置事件
var obj = document.getElementById(‘objId’);
obj.setAttribute(‘onclick’,'funcitonname();’);
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById(‘objId’);
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持

二三、建立单选钮
IE以外的浏览器
var rdo = document.createElement(‘input’);
rdo.setAttribute(‘type’,'radio’);
rdo.setAttribute(‘name’,'radiobtn’);
rdo.setAttribute(‘value’,'checked’);

IE:
var rdo =document.createElement(“<input name=”radiobtn” type=”radio” value=”checked” />”);
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

Konami Code简单的说，就是键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A 后，页面上出现特殊的变化。这个规则来自于“魂斗罗”中的“秘技”。“秘技”的术语就叫 Konami Code

照着圆心说的，在Google Reader上试了一把：

google reader konami code

没想到google reader上面居然也有这样的彩蛋，哈哈

圆心在博客也给出了JavaScript实现Konami code的2种方法。

方法一：

Abhi 在 《Konami Code on Facebook : How to implement it on your site》 一文中提供了大体思路：

var $ = {
    enabled: false,
    tmp: Array(),
    _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
    init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
    },
    konamiCode: function(e) {
        if(!this.enabled) {
            var t = this.tmp.pop();
            if((e.keyCode-t) == 0) {
                if(this.tmp.length == 0) {
                    this.enabled = true;
                }
            } else {
                this.init();
            }
        } else {
            this.action();
        }
    },
    // Change the action() function to whatever you want to
    action: function() {
        //alert("Konami Code Activated");
    }
}

然后在 load 的时候调用 $.init() 方法，在 keydown 的时候调用 $.konamiCode(event) 方法。

方法二：

不过 Abhi 的方法还是冗余了点，Jan Jarfalk 在留言中提供了一个短小精悍的代码：

// Tweetable Konami code
var k=[];
function(e){
    k.push(e.keyCode);
    if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
        //alert("Konami Code Activated");
    }
}

方法2显然更帅气一点，我在自己博客上也搞了一把，不过方法二有点缺陷，需要改进，试过一次就知道了，第一次激活konami code之后，数组没有清空，那么会导致indexOf每次都包含konami code而会再次激活。也就是说，输入一次秘笈之后，每次你再按下任意按键都会触发konami code。此外，这个代码IE下就跑不了了，需要稍微处理一下事件。呃，大师也总有疏忽的时候啊。把方法二改进一下：

var k=[];
function(e){
    e = e||window.event;
    k.push(e.keyCode);
    if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
        //alert("Konami Code Activated");
    k=[];//激活后清空数组
}
}

这样稍微改动即可，我已经在自己博客上加了这个代码了，各位看官可以自己尝试一把，嘿嘿。

这是我放在自己网页上的JavaScript Konami code，想试一下的人，直接把代码copy到自己网页的head中去就行了。

<script type="text/javascript">
var k=[];
document.onkeydown = function(e){
    e = e||window.event;
    k.push(e.keyCode);
    if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
        alert("谁能比我帅~~");
        k=[];
    }
}
</script>

想让你的浏览器里的图片转起来了，直接在地址栏内输入如下：

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6;
y3=.24; x4=300; y4=200; x5=300; y5=200;
DI=document.getElementsByTagName("img"); DIL=DI.length;
function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;
DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px";
DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5);
void(0);

想让你的浏览器晃起来么，直接在地址栏内输入如下：

javascript:function shake_xy(n) {if (self.moveBy)
 {for (i = 10; i > 0; i--)
 {for (j = n; j > 0; j--) {self.moveBy(0,i);self.moveBy(i,0);
self.moveBy(0,-i);self.moveBy(-i,0);}}}}
setInterval('shake_xy(5)',5); void(0);

我们来整理一番，分析下这段华丽的代码是怎么做到的。

深入解析

R = 0;
x1 = .1;
y1 = .05;
x2 = .25;
y2 = .24;
x3 = 1.6;
y3 = .24;
x4 = 300;
y4 = 200;
x5 = 300;
y5 = 200;
DI = document.images;
DIL = DI.length;
function A(){
    for (i = 0; i - DIL; i++) {
        DIS = DI[i].style;
        DIS.position = 'absolute';
        DIS.left = Math.sin(R * x1 + i * x2 + x3) * x4 + x5;
        DIS.top = Math.cos(R * y1 + i * y2 + y3) * y4 + y5
    }
    R++
}
setInterval('A()', 5);
void (0);

其实原理上来说不难，就是将文档中的图片的style属性，位置设置成absolute，然后让left跟top做曲线运动。5ms执行一次变化。
这个源代码的作者确实很赞的说，很好很强大。

这里面有一些技巧性的东西，比如0.x直接简写成.x，for循环里面用i-DIL，利用JavaScript弱类型，0等同于false，来达到与i < DIL 一样的效果

这2天偶然下了下JavaScript王者归来这本电子书，翻开一看，惊奇的发现前面几个部分就是详细的分析了这个函数，让我们来看看JavaScript王者归来的作者是怎么分析的吧。

首先，一些浏览器（不是所有的）支持JavaScript伪协议，你可以在浏览器的地址栏里通过“JavaScript:”的形式来执行JavaScript代码。实际上这种良好的执行方式为JavaScript爱好者带来了一个便捷的测试手段，使得他们能够以类似命令行的方式来简易地测试一个没有用过的JavaScript特性，而不必写一大堆文本和HTML标签。

其次，JavaScript支持缺省声明直接赋值的方式来使用全局变量，唯一的约束是命名规则和保留字，作为一种脚本语言，这个特性无疑提供了一种快速便利的执行手段，缺点则也是很明显的，缺乏严谨的约束，为不良代码的产生提供了可能。

注意到document.images的用法，这个指令枚举出页面文档中所有的图片元素，并把这个元素集合的引用赋值给临时变量DI。

DI=document.images;

Document是一个非常有用的接口，它是JavaScript访问页面文档对象的主要方式。除了访问图片的document.images之外，document提供的属性还能够方便地引用页面文档对象中的表单、链接和其他元素。

另一个需要重点关注的特性是函数定义，function A()声明了一个名字叫做“A”的函数，其后的一对大括号内的指令是对这个函数的定义。提供函数文法使得JavaScript成为一种完善的过程式语言。

在函数定义体内，我们可以看到像Math.cos(R*x1+i*x2+x3)这样的用法，Math是JavaScript的一个有用的内置对象，它为JavaScript的使用者提供了一组有用的数学函数，Math.cos返回表达式的余弦值。

在这之后我们通过一个循环将数学计算的结果赋值给document.images集合中提供的图片样式属性，这里引用的是style.top和style.left属性，这两个属性分别定义了图片元素左上角距参照系原点的横坐标和纵坐标的值，默认的单位是像素点（关于元素的定位问题我们将会在后续的章节中有详细的讨论），这样我们相当于将页面文档中的图片元素抽取出来，重新计算了它们的位置，并按照新的位置进行排列。

最后，我们在排列的过程中改变参量R的值，并通过定时器函数setInterval每隔5个毫秒调用一次A()函数，就实现了例子中的图片旋转的特效。

setInterval(‘A()’,5);

在结束话题之前，顺便提一个不太常用的特性。也许你已经注意到例子末尾的那个不起眼的void(0)，如果你将它去掉，你会发现一切令人惊讶的特效都消失了，甚至连浏览器中的页面也不见踪迹，取而代之的是孤零零地显示在浏览器窗口左上角的一组奇怪的数字，这是怎么回事呢？

原来JavaScript伪协议默认将页面带到一个新的document中并显示程序返回结果，所以正常情况下运算的结果会在一个空文档对象内显示，这样也就没有图片可以展现特效，而void(0)阻止了这个跳转动作。

void是JavaScript的一个特殊的运算符，它的作用是舍弃任何参数表达式的值，这意味着要求解析器检验并计算参数表达式内容，但是却忽略其结果。如果你刻意去检查void运算的返回值，会发现它返回一个undefined标记（事实上任何一个不带return指令的函数运算的默认返回值都是undefined）。在浏览器的缺省行为中，undefined阻止了页面的跳转。

在代码中，我们用表达式undefined;取代void(0)，也能得到相同的结果。

这段代码的经典之处不但在于它实现的效果令人惊叹，还在于它在短短的几行指令中体现了客户端JavaScript中大多数重要的特性，这些特性包括我们前面提到的伪协议、全局变量、文档接口、集合对象、函数、内置对象、元素样式属性、定时器以及void()和undefined，除此以外还提到了代码中没有出现的闭包、函数实例化以及typeof操作符，这些特性几乎构成了客户端JavaScript的全部