IE6里DIV错位的问题

采用”FLOAT:LEFT“的DIV在IE8、IE7、都没问题,IE6下却向下移动,出现空白。这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX,所以,试试是将下移的DIV的STYLE里增加"margin-left:-5px;"或者更小。
解决IE7、IE8样式不兼容问题
方法一、要在页面中加入如下HTTP meta-tag:

只要IE8一读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。
方法二、针对整个网站,在IIS中加入如下描述符就可以有相同的效果,当然这么做范围更广。










解决IE6、IE7、IE8样式不兼容问题
现在我们在做网页的时刻总是要考虑一些浏览器之间的兼容问题。近期在做一个短信平台的项目。在项目的开发过程中让我遇到了一件头痛的事情就是IE7与IE8不兼容。后面想了许多办法得以解决。现共享如下:
如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
CODE:

解决firefox ie6 ie7的css样式兼容问题
做主题最麻烦的就是CSS样式兼容问题,由于各浏览器对ccs的不同解释,造成本来IE7可正常显示,但到了Firefox 、ie6等其它浏览器上,却出现错位、下沉等问题,只得在Firefox 、ie6 、ie7之间不停的切换调试,汗…最近又有两款浏览器加入googleChrome和IE8,某个浏览器一统天下看来是没希望了,只能尽量克服兼容问题。找到一篇解决兼容问题的文章,还是很有效的。
1 针对firefox ie6 ie7的CSS样式
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了现在写一个CSS可以这样:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个 放到  标签下,然后为div指定一个类:
然后CSS这样设计:
#container{
min-width: 600px;
width:e­xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{
display:table;
//将对象作为块元素级的表格显示
}
或者
.hackbox{
clear:both;
}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码




9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin 或paddign 时。例:

p对象中的内容

CSS: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/qingyun0719/archive/2009/11/18/4826296.aspx

[wordpress]文章的最后更新时间或修改时间

wordpress默认的文章的显示是按照发表的时间排序的,
而有些时候,有些博主需要对以前的文章做一些修改,这样需要将修改的文章显示到第一个位置,
就需要按照修改的时间排序。
一、按照修改时间倒叙排序
在页面的开始处添加


这个需要在

  
   .....
  、

的前面哦
二、显示修改时间
代码需要在

  
   .....
  

的省略号部分哦
2.1 全部显示

最后更改的: 

结果会显示:
最后更改的: 2011年04月09日
关于什么样子的日期参数显示什么样子的内容,可以到网上查哦。
2.2 分开显示

     echo date("y-m",$u_time); 
    echo date("d",$u_time);
    echo date("D",$u_time); 
 ?>

这样就可以根据需要将年月日显示在不同的地方。
转自http://www.dhblog.org/?p=887

本拉登藏身地点被制成CS地图

本拉登在巴基斯坦阿伯塔巴德的藏身地点已经被玩家制成了《反恐精英:起源(Counter-Strike: Source)》的Mod地图。地图作者Fletch表示他计划将其结合到一个炸弹或人质地图中。下载:fy_abbottabad(1.41 MB)。
转自http://games.solidot.org/article.pl?sid=11/05/09/040248

火星时代–李涛PS教程(全教程下载)PHOTOSHOP CS2之路

中文名称:火星时代–李涛PS教程已更新2
版本:PS CS2
地区:大陆
语言:普通话
Adobe专家委员会委员名师
[李涛]老师主讲 Photoshop CS2(共24集)
简介:
1976年生于兰州
著有计算机设计类图书30余本
从事计算机数码设计10年
Adobe专家委员会委员
Adobe考试管理中心命题组成员之一
Apple教育计划教师认证体系主讲
中国商业插画师资格鉴定中心委员会委员
为推广计算机艺术设计在北京大学拥有自己的培训中心
现在主要进行平面及视频类课程的教授及推广
一起是24集,这是ps市场最好的教程!书本上没有的知识哦 !~~~~~
(右键点击下面的网址使用迅雷下载即可,如想在线观看请点击这里)
1.光和色的关系
http://cimg3.163.com/tech/school/huoxing/photoshop/ps01.WMV
2.光和色的关系2
http://cimg3.163.com/tech/school/huoxing/photoshop/ps02.WMV
3.色彩模式 图像分辩率
http://cimg3.163.com/tech/school/huoxing/photoshop/ps03.WMV
4.绘画与修饰工具1
http://cimg3.163.com/tech/school/huoxing/photoshop/ps040.WMV
5.绘画与修饰工具2
http://cimg3.163.com/tech/school/huoxing/photoshop/ps05.WMV
6.绘画与修饰工具3
http://cimg3.163.com/tech/school/huoxing/photoshop/ps06.WMV
7.绘画与修饰工具4
http://cimg3.163.com/tech/school/huoxing/photoshop/ps070.WMV
8.绘画与修饰工具5
http://cimg3.163.com/tech/school/huoxing/photoshop/ps08.WMV
9.bridge的运用和数码照片的处理
http://cimg3.163.com/tech/school/huoxing/photoshop/ps09.WMV
10.通道和蒙板
http://cimg3.163.com/tech/school/huoxing/photoshop/ps10.WMV
11.alpha通道
http://cimg3.163.com/tech/school/huoxing/photoshop/ps110.WMV
12.通道的高级运用技巧
http://cimg3.163.com/tech/school/huoxing/photoshop/ps12.WMV
13.调色_1
http://cimg3.163.com/tech/school/huoxing/photoshop/13.WMV
14.调色_2
http://cimg3.163.com/tech/school/huoxing/photoshop/14.WMV
15.调色_3
http://cimg3.163.com/tech/school/huoxing/photoshop/15.WMV
16.图象模式 通道案例
http://cimg3.163.com/tech/school/huoxing/photoshop/16.WMV
17.图层效果_1
http://cimg3.163.com/tech/school/huoxing/photoshop/170.WMV
18.图层效果_2
http://cimg3.163.com/tech/school/huoxing/photoshop/18.WMV
19.图层效果_3
http://cimg3.163.com/tech/school/huoxing/photoshop/19.WMV
20.滤镜效果_1
http://cimg3.163.com/tech/school/huoxing/photoshop/20.WMV
21.滤镜效果_2
http://cimg3.163.com/tech/school/huoxing/photoshop/q21.WMV
22.滤镜效果_3
http://cimg3.163.com/tech/school/huoxing/photoshop/q22.WMV
23.滤镜效果_4
http://cimg3.163.com/tech/school/huoxing/photoshop/q23.WMV
24.调色高级技巧
http://cimg3.163.com/tech/school/huoxing/photoshop/q24.WMV

jQuery实现 “老汉推车”走马灯效果

下面是根据 Demo 写的步骤:
0. Demo
1. html 代码结构

  • 这里展示的是:“老汉推车”走马灯效果
  • 名字不错吧
  • 最新“噗~”:“拉灯”死了,我再也不相信爱情鸟~

«

»

我是搜索框,霍霍

注:搜索代码根据自己主题写,注意那个 id名和样式配合。
2. css 参考

/* #notice_wrap */
#notice_wrap{position:relative;width:700px;height:50px;margin:0 auto;border:1px solid #ddd;}
/* #notice */
#notice{overflow:hidden;position:absolute;top:0;left:0;width:500px;height:50px;}
#notice ul{position:absolute;width:1000px;}
#notice ul li{overflow:hidden;list-style:none;float:left;width:470px;height:50px;line-height:50px;margin-left:15px;padding-right:14px;border-right:1px solid #ddd;}
#prev,#next{display:none;cursor:pointer;position:absolute;top:0;width:15px;height:50px;line-height:50px;text-align:center;color:#777;}
#prev{left:0;}
#next{right:0;}
/* #search */
#search{overflow:hidden;position:absolute;top:12px;right:15px;width:170px;height:24px;line-height:24px;text-align:center;background:#fff;border:1px solid #ddd;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;}

3. jQuery 核心代码

jQuery(document).ready(function(){
	/* “老汉推车”走马灯效果 by zwwooooo | http://zww.me */
	var $notice=$('#notice'), //选择器赋值
		$prev=$('#prev'),
		$next=$('#next'),
		$search=$('#search'),
		myScroll=setInterval(notice,4000); //每4秒循环
	$next.click(function(){ //点击向右翻
		var $first=$notice.find('li:first');
		$first.remove();
		$notice.find('li:last').after($first);
	});
	$prev.click(function(){ //点击向左翻
		var $last=$notice.find('li:last');
		$last.remove();
		$notice.find('li:first').before($last);
	});
	$notice.hover(function(){ //鼠标hover时停止动画 + 显示翻页按钮
		clearInterval(myScroll);
		$prev.show();
		$next.show();
	},function(){
		myScroll=setInterval(notice,4000);
		$prev.hide();
		$next.hide();
	});
	function notice(){ //老汉推车效果函数
		var first=$notice.find('li:first'),
			width=-(first.outerWidth(true))+'px';
		$search.animate({right:'28px'},{ //注意这个14px值,通常是搜索框中right值+搜索框距离左边撞击线的距离(看css)
			duration:400,complete:function(){
				$search.animate({right:'14px'},400); //14px为搜索框原来的right值(看css)
				$notice.find('li').css({"border-color":"#999"});
				$notice.children('ul').animate({left:width},{
					duration:1200,complete:function(){
						$notice.children('ul').append(first).css("left","0");
						$notice.find('li').css({"border-color":"#ddd"});
					}
				});
			}
		});
	};
});

PS: 别忘了加载 jQuery 库哦!另外要根据例子步骤举一反三折腾。
转自http://zww.me/archives/25450

jQuery 实现 WordPress评论楼层伸缩特效

无限嵌套套住我了,一次次得调CSS、php、jQuery,就是希望解决开启无限随之带来的一个接一个似无限个的问题。
此文也是算一个其中衍生出的效果,就是为了更清晰的显示出楼层的级数关系,一眼就能看出是回复谁的。添加特效前得在《在WP主评论加上楼层号》,及在子评论也加上楼层数:

 1){printf('B%1$s', $depth-1);} ?>

代码自行放在functions.php自定义回调评论里,啥含义看代码猜猜呗~(我表示也是瞎改胡乱测试出来的)
现很直观得在评论右上角能看到楼层显示了,主评论是“L几”,子评论是“B几”,接下来添加jQuery特效代码:

//点击楼层数伸缩此评论子评论特效 By ImMmMm.com
$("#comments .commentmetadata span").click(function(){ //点击事件的介入点
	var bb = $(this).parent().parent().parent().parent().children().children('.children'); //晕了吧,我解释什么了,反正主题不同这儿肯定也不同。主要是取得点击的楼层的子评论集合
	if($(bb).is(':visible')){$(bb).slideUp('1500'); //如果子评论显示则收起
	}else{$(bb).slideDown('1500');}; //反之,即子评论已收起,则伸展
	$body.animate( { scrollTop: $(this).offset().top - 200}, 900); //点击楼层的页面滑动事件
});

其实,以上这段jQuery代码没什么通用性,各位童鞋看个思路吧……
其实,这个效果娱乐性大于实用性,如果你想考验下浏览器的话可以挑个高评论的文章,点击楼层数试试……
22:41补充:考虑到现在的浏览器的性能,用稍微弱一点的特效代码,只对点击楼层数的子评论进行伸缩:

$("#comments .commentmetadata span").toggle(function(){
	$(this).parent().parent().next().slideUp('1500');
	},function(){
	$(this).parent().parent().next().slideDown('1500');
});

转自http://immmmm.com/wordpress-comment-floor-stretching-effects.html

Ajax平滑翻页+预加载

平滑翻页本身对于一页展示的内容来说就很舒服了,很多手机的浏览器前进后退也都采用了这样的过渡效果。对于网页端来说,实现这个平滑也不难,无非就是3个DIV:

#essay{width:555px;height:488px;position:relative;overflow:hidden;}
#essay-content{width:555000px;height:488px;position:absolute;}
#essay-content .postlist{width:555px;float:left;}

上一页
	1
	下一页

你可以理解为:一大堆车需要通过一个收费站,而收费站长宽与一辆车的长宽相同,我们需要做的就是把这些车挤一挤排出一条长长长长类似一条长纸带的队伍来,如此接下来只需拉动这条纸带,一次距离是一辆车的长~
井然有序,就是我们需要的!
一、最最基础的jQuery点击平滑代码:

$('#next').click(function(){  //下一页点击事件
	var dnum=parseFloat($('#nnum').text());  //取得当前显示的页码
	$('#essay-content').animate({left:'-=555'},{  //纸带向左滑555px
		duration:400,
		complete:function(){
			$('#nnum').text(dnum+1);  //滑完给页码+1
		}
	});
});
$('#prev').click(function(){  //上一页点击事件
	var dnum=parseFloat($('#nnum').text());
	if(dnum>1){  //当前页码大于1才执行,即第一页时不滑动
	$('#essay-content').animate({left:'+=555'},{  //纸带向右滑555px
		duration:400,
		complete:function(){
			$('#nnum').text(dnum-1);  //滑完给页码-1
		}
	});
	}
});

以上实现的仅是向左滑一次然后向右滑一次的效果,仅是如此当然是不够的,不过没实现此步下面也是无法继续的!
除非你一开始就php输出几百个文章列表,然后用上面代码左滑滑右滑滑,这显然是不妥的。这时就需要用到Ajax预加载~
二、Ajax预加载
基本思路:首页index.php输出2个文章列表,点击下一页平滑出第2页文章列表,同时Ajax预加载第3页文章列表。再点,平滑出预加载进来的第3页,同时Ajax预加载第4页,以此往复……
可真正折腾起来考虑的因素还是相当多的,最大的问题是访客点击事件及间隔是无法预测的,也由此得在代码上做好访客点击的逻辑判断!
比如常见的几个问题:
1.连续快速点击,文章列表滑的欢快,而Ajax预加载速度根本跟不上;因此预加载文章列表不够,得停止点击事件的响应。
2.到头了还是继续点“上一页”,到底了还执着得点“下一页”;因此显示第1页时“上一页”得隐藏,显示最后一页时“下一页”得隐藏。
3.并非连续点“下一页”,而是一会儿上一下一会儿下一页;因此不分青红皂白对所有点击“下一页”都Ajax预加载是不合理的。
…… ……
最新翻页效果无冷已经启用,可一边点击一边看以下代码注释:http://meapo.net/
平滑+预加载的jQuery代码(无过渡效果):

var num=1,noclick=false;  //num来记录预加载次数,并设置默认不响应点击
$('#next').click(function(){
	var dnum=parseFloat($('#nnum').text()),nnum=dnum+2,cnum=num-dnum;
	//dnum为当前显示页码,nnum是Ajax预加载的页码,cnum为预加载次数与当前页码之差
if(noclick!=true){noclick=true;  //点击响应判断,当Ajax完成后才允许再点击
	if(cnum>=0){  //中途点击过上一页,再点下一页时
	$('#essay-content').animate({left:'-=555'},{
		duration:400,
		complete:function(){
			$('#nnum').text(dnum+1);
			$('#prev:hidden').fadeIn(300);  //如果“上一页”不可见则渐显
			noclick=false;  //直接允许响应点击
		}
	});
	}
	if(cnum==0){  //预加载次数和当前页数码一样时,才再一次执行Ajax预加载。
		if($('.postlist').eq(dnum).children().length<8){  //待滑出的文章列表数小于8时
			$('#next').fadeOut(300);  //“下一页”渐隐
		}
		$.ajax({
			url: "?action=ajax_post&pag="+nnum,  //php段配合,获取当前页后2页的文章列表
			success:function(a){
				if(a.length > 0){  //如果有返回数据时
					$('#essay-content').append(""+a+"");  //追加到第二个DIV里
					num++;  //预加载次数累加1
				}else{  //如果无返回数据时
					$('#next').hide(0);  //“下一页”隐藏,主要针对待滑出的文章列表数等于8时做的处理
				}
				noclick=false;  //允许响应点击
			}
		});
	}
}
});
 
$('#prev').click(function(){
if(noclick!=true){noclick=true;
	var dnum=parseFloat($('#nnum').text());
	if(dnum>1){  //当前页码大于1时
		$('#essay-content').animate({left:'+=555'},{
			duration:400,
			complete:function(){
				$('#nnum').text(dnum-1);
				$('#next:hidden').fadeIn(300);  //如果“下一页”不可见则渐显
				noclick=false;
			}
		});
		if(dnum==2){  //页码为2时
			$('#prev').fadeOut(300); //“上一页”渐隐
		}
	}
}
});

另外,css里还是得设置“上一页”隐藏。
就这些,完了(liáo)!
转自http://immmmm.com/ajax-smooth-flip-and-preload.html

WordPress菜单jQuery实现LavaLamp 滑动效果

滑动门里 LavaLamp 可以算应用广泛使用也比较容易的jQuery插件了。
昨晚 @万戈 童鞋写了篇滑动,jQuery部分看了尝试精简了下,还真成了:DEMO
折腾完之后受此启发,有了码一个 LavaLamp 效果的基本思路,刚又整理完善了下基本搞定完成。
html结构部分,WordPress自定义导航生成,已去除无关代码:

css部分,其中huad里的样式就是滑动的那块样式,高度什么的得自行调整:

#menu-menu{position:relative;}
    
#menu-menu li a{position:relative;z-index:2;}
    
#menu-menu .huad{height:30px;border-top:2px solid #1BA1E2;border-bottom:2px solid #1BA1E2;position:absolute;top:0px;z-index:1;}

jQuery核心代码:

//By ImMmMm.com
   
var mm=$('#menu-menu');  //一般只需修改这儿的ID
   
var mmc=mm.find('.current-menu-item');  //获取需要高亮的对象,current-menu-item为WordPress自定义导航生成
   
var mml=mmc.position().left;  //高亮对象相对父级元素的左边距
   
var mmw=mmc.width();  //获取高亮对象的宽度
   
mm.append("
  • "); //追加滑动样式的html代码,并设定宽度和左边距 var mmh=mm.find('.huad'); //获取滑动对象 mm.children('li').hover(function(){ //此导航下li鼠标移上去的事件 var anm=$(this).position().left; //此子项相对父级元素的左边距 var anw=$(this).width(); //此子项的宽度 mmh.animate({left:anm,width:anw},{queue:false,duration:300}); //滑动对象左边距和宽度的自定义动画,300毫秒内触发一次 },function(){ //鼠标移开事件 mmh.animate({left:mml,width:mmw},{queue:false,duration:300}); //滑回 });

    用.position()相对父级元素获取左边距,完美解决浏览器滚动条影响之前.offset()相对浏览器的左边距问题~
    PS:效果可能需要强制刷新下才能见到,关于文章页没效果,这个也好理解,jQuery是判断WordPress自定义导航有current-menu-item高亮时才匹配的,So…
    转自http://immmmm.com/lavalamp-sliding-effect-by-jquery.html

    jQuery 实现评论字数统计

    看图说货:

    评论计数之前流行过一段时间,那时一是感觉没啥用,二是要加的代码挺多的。主流也是2种方法,元素JavaScript的(这儿),jQuery的(这儿)。
    两者基本原理相同,都采用setInterval()短时间内重复执行,效率不谈,这种思路代码字符肯定在几百+。那是否有另外思路来实现呢?
    答案当然是肯定的!
    jQuery核心代码:

    //By ImMmMm.com
    $('#comment').bind('focus keyup input paste',function(){  //采用几个事件来触发(已增加鼠标粘贴事件)
    	$('#num').text($(this).attr("value").length)  //获取评论框字符长度并添加到ID="num"元素上
    });
    

    另外在需要显示字数的地方添加以下html断:

    0

    个人是加到了评论框textarea之后,然后CSS美化一下:

    #num{float:right;font-size:35px;color:#DDD;margin:-50px 5px 0 0;padding-right:10px;}

    转自http://immmmm.com/comments-words-statistics-by-jquery.html