dudo博客 » JavaScript

Javascript的错还是浏览器的问题——2009年为何显示为109年

dudo — Sun, 04 Jan 2009 12:50:39 +0000

在浏览几个网页时，发现有几个网站在显示时间时存在问题，比如今天是2009年1月4日，但是有的网站上却赫然写着今天是109年1月4日（这里有个例子就是中国银行的网站首页）。这是一个奇怪的问题，可看这些网站的代码，大致如下：

var today;
today = new Date();
document.write(today.getYear());

从上面的代码来看并不存在任何问题！但是当我们运行这段代码时却发现，在不同的浏览器中返回的结果并不同：在Internet Explorer中返回的是2009，在Firefox、Chrome等浏览器中返回的是109。由于目前使用Internet Explorer的用户依然占居绝对多数，因为这个问题很难被发现。不过这足以说明IE和其它浏览器对于getYear()的解释并不一致（这也是Internet Explorer的一贯作风），但是问题究竟出现在哪里呢？是浏览器本身的问题还是Javascript出现了问题呢？我们姑且不去讨论这个，我们先来看看getYear()的具体作用：

在非Internet Explorer浏览器中，getYear()函数返回的是1900到1999间的两位十进制数字，比如1999年，返回是99，这和实际年份正好相同；但是如果年份走出了1999,那么就会一个3位的十进制数字，比如2000年，返回的就是100（99+1），2009返回的就是109（99+10）；

如何解决这个问题？

很简单，使用getFullYear()这个函数。

在所有的浏览器中，getFullYear()返回的一个四位数的十进制数字。

因此，如果时间不超过9999年，那么就会一直有效。

getYear()和getFullYear()的区别

几点建议：

使用多个浏览器测试你的网站。这一点已经不用多说了，这里指的多个浏览器不仅仅是不同类别的浏览器，更包括了浏览器的不同版本；
获得时间使用服务器端还是客户端。在多数情况下，我建议直接在服务器端获得时间然后再输送到用户浏览器，这样不会因为用户机器时间设置不同而出现问题。但是这也存在一个问题，那就是不同时区内的访问者可能看到的是同一个时间。如果你的网站访问者人群相对固定，那么建议直接在服务器端直接获得时间（这不会浪费太多的解析时间）。

CSS Dock Menu：JS+CSS 仿苹果MAC机桌面导航菜单

dudo — Thu, 19 Jun 2008 08:17:00 +0000

如果你是苹果机的疯狂粉丝，那么你一定会喜欢我设计的这款CSS Dock Menu。它采用了Jquery的JavaScript库和Fisheye的界面，其中一些图标是我自己设计的。这里有两种样式：底部和顶部。下面我演示一下如何在你的Web页面中使用它：

1、下载源文件

点击下载此文件

2、插入代码
在HTML中的标签中插入如下代码：

%MINIFYHTMLe20083765dbd4fd008d21514414d99b80%%MINIFYHTMLe20083765dbd4fd008d21514414d99b81%

第一部分是需要用到的Javascript代码，第二部分是用到的CSS样式表，最后一个是用于Internet Explorer 6中PNG图片的Hack处理。

3、配置
且记要把下面的代码放到HTML中的标签内

%MINIFYHTMLe20083765dbd4fd008d21514414d99b82%

4 添加或者删除项目
向顶部菜单中增加新的项目（注：标签位于之后）：

Home

向底部菜单中增加新项目（注：标签位于之前）：

Home

浏览器兼容性
我在Internet Explorer 6、Internet Explorer 7、Opera 9、Firefox 2以及Safari 2（尽管在Safari中存在一些小问题）中测试通过。
P.S. FireFox 3中也测试通过（dudo注）

演示：CSS Dock Menu
CSS Dock Memu:top
CSS Dock Meu: Bottom

原作者：http://www.ndesign-studio.com/blog/mac/css-dock-menu
翻译：http://dudo.org/?p=251
转载请注意出处，至少保留原作者链接，谢谢！

Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS

dudo — Wed, 14 May 2008 14:47:26 +0000

英文地址：http://developer.yahoo.com/performance/rules.html
中文地址：http://www.dudo.org/article.asp?id=216
在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：
CSS：

把样式表置于顶部
避免使用CSS表达式（Expression）
使用外部JavaScript和CSS
削减JavaScript和CSS
用代替@import
避免使用滤镜

JavaScript

把脚本置于页面底部
使用外部JavaScript和CSS
削减JavaScript和CSS
剔除重复脚本
减少DOM访问
开发智能事件处理程序

17、把样式表置于顶部
      在研究Yahoo!的性能表现时，我们发现把样式表放到文档的内部似乎会加快页面的下载速度。这是因为把样式表放到内会使页面有步骤的加载显示。
      注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。
      把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
      HTML规范清楚指出样式表要放包含在页面的区域内：“和不同，只能出现在文档的区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文档内加载你的样式表。

18、避免使用CSS表达式（Expression）
      CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：
      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。
      表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
      一个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

19、使用外部JavaScript和CSS
      很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢？
      在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。
      关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。
      许多网站没有功能建立这些指标。对于这些网站来说，最好的坚决方法就是把JavaScript和CSS作为外部文件引用。比较适合使用内置代码的例外就是网站的主页，如Yahoo!主页和My Yahoo!。主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以发现内置JavaScript和CSS对于终端用户来说会加快响应时间。
      对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。

20、削减JavaScript和CSS
      精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时，所有的注释、不需要的空白字符（空格、换行、tab缩进）等都要去掉。在JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。精简JavaScript中目前用到的最广泛的两个工具是JSMin和YUI Compressor。YUI Compressor还可用于精简CSS。
      混淆是另外一种可用于源代码优化的方法。这种方法要比精简复杂一些并且在混淆的过程更易产生问题。在对美国前10大网站的调查中发现，精简也可以缩小原来代码体积的21%，而混淆可以达到25%。尽管混淆法可以更好地缩减代码，但是对于JavaScript来说精简的风险更小。
      除消减外部的脚本和样式表文件外，
在PHP中可以通过创建名为insertScript的方法来替代：

为了防止多次重复引用脚本，这个方法中还应该使用其它机制来处理脚本，如检查所属目录和为脚本文件名中增加版本号以用于Expire文件头等。

25、减少DOM访问
使用JavaScript访问DOM元素比较慢，因此为了获得更多的应该页面，应该做到：

缓存已经访问过的有关元素
线下更新完节点之后再将它们添加到文档树中
避免使用JavaScript来修改页面布局

有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章“高性能Ajax应该程序”。

26、开发智能事件处理程序
      有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。
      你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。
      你可能会希望用DOMContentLoaded事件来代替onload，但是在所有浏览器都支持它之前你可使用YUI 事件应用程序中的onAvailable方法。
      有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章“高性能Ajax应该程序”。

top、clientTop、scrollTop、offsetTop

dudo — Tue, 31 Oct 2006 18:31:42 +0000

以下示例代码：

51windows.Net

用JS实现“左中DIV”和“右中DIV”等高

dudo — Wed, 20 Sep 2006 18:38:37 +0000

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

练习文档01

这是顶部的div

11111
222222
33333333
444444444
555555555

22222
dsaf

———————————这是底部的DIV，在左中右中DIV不等高的情况下会跑上去重叠了
—————————————-我现在想用一个JavaScript代码来令左右两半的Div等高

(注意:中左中右两个DIV的高度是无法事先确定的)
为什么这个JavaScript在FireFox无效呢？

常用的匹配正则表达式和实例

dudo — Thu, 20 Jul 2006 15:30:18 +0000

匹配中文字符的正则表达式： [\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：[^\x00-\xff]

应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}

匹配空行的正则表达式：\n[\s| ]*\r

匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正则表达式：(^\s*)|(\s*$)

应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：

String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}

利用正则表达式分解和转换IP地址：

下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：

function IP2V(ip)
{
re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error("Not a valid IP address!")
}
}

不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式去除字串中重复的字符的算法程序：[注：此程序不正确，原因见本贴回复]

var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+"]","g")
var s2=s.replace(re,"")
alert(s1+s2) //结果为：abcefgi

我原来在CSDN上发贴寻求一个表达式来实现去除重复字符的方法，最终没有找到，这是我能想到的最简单的实现方法。思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，两者串连。这个方法对于字符顺序有要求的字符串可能不适用。

得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1

s="http://www.9499.net/page1.htm"
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")
alert(s)

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,”)" onbeforepaste="clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\u4E00-\u9FA5]/g,”))"

用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,”)" onbeforepaste="clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\uFF00-\uFFFF]/g,”))"

用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,”) "onbeforepaste="clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))"

用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,”) "onbeforepaste="clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,”))"

无觅猜您也喜欢：
Godaddy 2012年5域名优惠码：.com .net 30%优惠	Apple将推出Windows版Safari浏览器？	Godaddy主机优惠码：截止2011年1月22日	说话间，两年就这样匆匆从指间流走，毕业了！	脑子真的出问题了我
无觅

无觅猜您也喜欢：
快速认识CSS中的overflow属性	谨慎使用CSS中的星号(*)通配符	css教程–十步学会用css建站(全)	使用CSS简单实现垂直居中	就 CSS3 向 Eric Meyer 请教的 6 个问题
无觅

无觅猜您也喜欢：
Yahoo!网站性能最佳体验的34条黄金守则——图片、Coockie与移动应用	Yahoo!网站性能最佳体验的34条黄金守则——服务器	Yahoo!网站性能最佳体验的34条黄金守则——内容	20个优秀网站助你征服CSS	提高网站流量：向Google、MSN、Yahoo（雅虎）提交你的SiteMap
无觅

无觅猜您也喜欢：
我的台湾这旅（三）——鼎泰丰、何润东、故宫博物院、101大厦	越狱归来——PrisonBreak	遥相呼应:IE Developer Toolbar Beta 3 – Now Available	发几张手机图片	《精通CSS（CSS Mastery）》T楼结果公布
无觅

无觅猜您也喜欢：
收到母校寄来的新年贺卡	百度和Google的差别就在这里	Windows XP SP3 RTM 简体中文版发布[附下载地址]	Google的新搜索界面	很假很毒很无辜——是谁在作恶
无觅