活着 » javascript

七个加快网页显示速度的方法

认真生活 — Sat, 13 Jun 2009 07:46:11 +0000

续上一篇的seo之页面加载速度，也来说说如何优化网页以求提高网页显示速度，让你的搜索引擎排名更上一步。在这里我只是抛砖引玉，聊聊自己所能记住的一些加速的方法，方法不全，各位在优化页面的时候可以参考参考。

更换更为快速的服务器无疑是加速的最佳选择

前提是你有钱，这算最直接的网页提速方法了，省事，不需要对任何页面进行处理，缺点就是Money付出要增加了。

减少图片的应用

这点会一点基本知识的人都该知道，图片的大小和文字所占大小可不是一个数量级的东西，减少图片的应用，自然可以节省带宽资源，网页显示速度自然会加快。

合并JS

过多的JS调用需要占用一定的时间，合并JS之后则可以节省一点时间，所以尽量把多个JS合并为一个。

JS调用置于尾部之前伪加速

这是个掩耳盗铃的加速方法，事实上真是速度没有提高。通常JS在于控制一些特殊效果，然而用户通常关系页面的实际内容，JS放在底部，能够让用户更快的看到你的页面内容，当用户看完内容的时候，JS的特效也出来了。

将CSS放在尽量靠前的位置

CSS用于美化页面，放在最前面，可以在现实内容的同时也实现了页面的美化效果，而不是等所有文字一团糟的加载完了的时候突然出现各种美化效果，这虽然也未实际加快页面显示速度，却能让用户有种错觉，就是你的网页加载速度比较快了。

节省不必要的代码开支

这点通常效果不是那么明显，因为代码本身所占空间不是很大，不过对于页面代码、JS、CSS代码冗长的页面也是有一定作用的，对于CSS压缩可以使用本站提供的工具进行优化与压缩，地址在：http://www.yetlive.com/tools/css

控制非重点内容在底部

这就比如博客边栏，网民通常是不太需要这些信息的，可以尽量在写代码的时候写在页面底部正文内容之后，某些效果再以CSS实现，当然，这也只是伪加速的方法，因为真正的网页大小并未改变，同等网速下载时间也就不可能减少了

z-blog中添加多处留言评论框的解决方法

认真生活 — Sat, 21 Mar 2009 18:16:27 +0000

昨日写了“ 博客留言少谁之过”一文，其中提到增加留言的方法，其中写到活着就在文章页面的侧栏添加了第二个快速留言功能。那么这个功能要怎么实现呢？

说难不难，说容易也不容易。这里需要用到的两个东西主要是评论框模版和Javascript的自动添加功能，至于后者可以参考“自动填充文本输入框Javascript特效代码”一文。那么下面就来制作一下我们的第二个留言评论框吧。

1.制作Javascript功能函数

利用我们在“自动填充文本输入框Javascript特效代码”一文中介绍的函数，稍微进行修改得到如下的函数。

function refreshValue(a) { var s = a.value; var b = a.name; document.getElementById(b).value=s; }

把如上的代码保存好备用。

2.制作第二个留言评论框界面

首先，打开我们的评论框模版，也就是主题模版中的b_article_commentpost.html文件，复制其中的内容。

然后，做如下修改：

可以看到，以上仅仅在每个输入框添加了onkeyup=”refreshValue(this)”属性，而且把每个输入框的id属性去掉了。

将以上代码保存备用.

3.直接在z-blog后台修改b_article_commentpost.html文件

找到tabindex属性，文件中应该有5处，后面有一个数字分别为1、2、3、5、6，把这几个数字改为7、8、9、10、11。然后后台保存修改。

这样做的原因是当用户使用“Tab”键选择下一个输入框时能够以正确的顺序依次进行。

4.在z-blog后台修改single.html文件

将以上第一步保存的Javascript代码放入页面头部的标签中。

把第二步保存的“留言评论框界面”界面放入single.html文件中你需要添加的位置。

保存以上修改。

5.重建文件，美化第二个评论框

后台选择文件重建就可以了，如果你还需要美化一下输出界面，可以使用CSS进行美化。

6.注意事项

第二个甚至第三个留言评论框不能直接拷贝b_article_commentpost.html文件内容，否则用你自己额外添加的输入框时将出现提示评论不正确的结果。

还有其他特殊功能，用户可自己在以上基础进行修改。以上就是活着添加第二个留言评论框评论框的一些经验。

在IE与Firefox下均能正常使用的添加到收藏夹的Javascript代码

认真生活 — Sat, 14 Mar 2009 05:15:51 +0000

今天为活着的主题添加了加入收藏夹的功能，很多的添加到收藏夹的代码都只能在IE下成功，而对于Firefox则失去效果，本站使用的Javascript代码可以保证在IE下和Firefox下均能正常添加到收藏夹。

通常的代码会如这样：，这样的代码只是针对 IE有效，那么如何在Firefox中也可以正常添加到收藏夹呢？

代码如下，实际上是构建了一个函数，判断浏览器的类型，并根据浏览器不同调用不同的浏览器对象完成功能：

在需要加入添加收藏链接的地方加入如下链接：

或

两者区别主要在于后者可以根据当前页面改变收藏的页面即收藏夹中显示的名字，前者收藏的是http://www.yetlive.com这样一个网址，显示“活着，分享生活故事”，而后者会收藏当前页面，显示的则是当前页面的标题。

已上代码可以把Javascript段和分开，比如把javascript代码放到页面头部或者整站的JS文件中，比如活着就是把这段放入了正站JS文件中了。

以上添加到收藏夹的代码在IE下和Firefox中均可以正常使用。

自动填充文本输入框Javascript特效代码

认真生活 — Tue, 06 Jan 2009 07:03:04 +0000

昨日做了个搜索特定网站关键字免费工具,主体功能是以Javascript代码实现的,其中重要的一段代码就是自动将前后文本输入框中输入的文本添加至第三个文本框.当然,作者在制作这款工具时已经把第三个文本框隐藏了,其中有段代码是这一段代码其实就是第三个输入框代码,其中的hidden表示隐藏.

好了,我们来研究研究使用Javascript自动修改填充文本输入框或文本输入区域的方法吧.

先看一段代码:

这段代码是你输入文本的文本框,在这里调用到函数refreshValue(this),该函数即主要功能函数.该函数代码如下:

然后你需要的是如下一个输入框:

这样,一个输入文字后自动刷新另外一个文本框内容的方法就出现了.

函数中document.getElementById(“t2″).value=s表示取得id值为t2的文本输入框并把s所代表的值自动填充至该文本输入框.

以上就是活着今天说到的Javascript代码实现根据用户在一个框的输入自动填充其他文本框或者说自动修改文本框内容的方法.更多的应用可以在此基础上进行改进即可.

网页制作中几种显示和隐藏层的方法

认真生活 — Sun, 23 Nov 2008 19:45:37 +0000

这里介绍三种网页制作中常用的显示和隐藏层的方法:

1.css样式实现层的显示和隐藏.代码如下:

1234567890

11111111

以上代码加入页面中，鼠标悬浮于链接“1234567890”上时，层内容“11111111”显示，鼠标离开时层恢复隐藏状态。

2.Javascript实现层的显示与隐藏.代码如下:

下拉1



计算机: PC
已收集: 2008年6月11日
持续时间: 76秒


javascript:;" onClick="folder(c_2)">下拉2

计算机: PC
已收集: 2008年6月11日
持续时间: 76秒

可以看出,后一种方式的代码量较前一种的长,但是后一种能够实现更多的功能

Javascript参考档之Document对象

认真生活 — Sun, 23 Nov 2008 03:29:03 +0000

document 描述当前窗口或指定窗口对象的文档。它包含了文档从到的内容。

用法：document （当前窗口）

或 <窗口对象>.document （指定窗口）

属性

lastModified 当前文档的最后修改日期，是一个 Date 对象。

referrer 如果当前文档是通过点击连接打开的，则 referrer 返回原来的 URL。

title 指标记里用…定义的文字。在 Netscape 里本属性不接受赋值。

fgColor 指标记的 text 属性所表示的文本颜色。

bgColor 指标记的 bgcolor 属性所表示的背景颜色。

linkColor 指标记的 link 属性所表示的连接颜色。

alinkColor 指标记的 alink 属性所表示的活动连接颜色。

vlinkColor 指标记的 vlink 属性所表示的已访问连接颜色。

方法

open() 打开文档以便 JavaScript 能向文档的当前位置（指插入 JavaScript 的位置）写入数据。通常不需要用这个方法，在需要的时候 JavaScript 自动调用。

write(); writeln() 向文档写入数据，所写入的会当成标准文档 HTML 来处理。Writeln() 与 write() 的不同点在于，writeln() 在写入数据以后会加一个换行。这个换行只是在 HTML 中换行，具体情况能不能够是显示出来的文字换行，要看插入 JavaScript 的位置而定。如在

标记中插入，这个换行也会体现在文档中。

clear() 清空当前文档。

close() 关闭文档，停止写入数据。如果用了 write[ln]() 或 clear() 方法，就一定要用 close() 方法来保证所做的更改能够显示出来。如果文档还没有完全读取，也就是说，JavaScript 是插在文档中的，那就不必使用该方法。

现在我们已经拥有足够的知识来做以下这个很多网站都有的弹出式更新通知了。

Javascript参考档之Window对象

认真生活 — Sun, 23 Nov 2008 03:25:31 +0000

window 窗口对象描述的是一个浏览器窗口。一般要引用它的属性和方法时，不需要用“window.xxx”这种形式，而直接使用“xxx”。一个框架页面也是一个窗口。

属性

name 窗口的名称，由打开它的连接（）或框架页（）或某一个窗口调用的 open() 方法（见下）决定。一般我们不会用这个属性。

status 指窗口下方的“状态栏”所显示的内容。通过对 status 赋值，可以改变状态栏的显示。

opener 用法：window.opener；返回打开本窗口的窗口对象。注意：返回的是一个窗口对象。如果窗口不是由其他窗口打开的，在 Netscape 中这个属性返回 null；在 IE 中返回“未定义”（undefined）。Undefined 在一定程度上等于 null。注意：undefined 不是 JavaScript 常数，如果你企图使用“undefined”，那就真的返回“未定义”了。

self 指窗口本身，它返回的对象跟 window 对象是一模一样的。最常用的是“self.close()”，放在标记中：“关闭窗口”。

parent 返回窗口所属的框架页对象。

top 返回占据整个浏览器窗口的最顶端的框架页对象。

history 历史对象

location 地址对象

document 文档对象

方法

open() 打开一个窗口。用法：open(, , );

：描述所打开的窗口打开哪一个网页。如果留空（”），则不打开任意网页。

：描述被打开的窗口的名称（window.name），可以使用’_top’、’_blank’等内建名称。这里的名称跟“”里的“target”属性是一样的。

：描述被打开的窗口的样貌。如果只需要打开一个普通窗口，该字符串留空（”），如果要指定样貌，就在字符串里写上一到多个参数，参数之间用逗号隔开。

例：打开一个 400 x 100 的干净的窗口：

open(”,’_blank’,'width=400,height=100,menubar=no,toolbar=no,

location=no,directories=no,status=no,scrollbars=yes,resizable=yes’)

参数

top=# 窗口顶部离开屏幕顶部的像素数

left=# 窗口左端离开屏幕左端的像素数

width=# 窗口的宽度

height=# 窗口的高度

menubar=… 窗口有没有菜单，取值yes或no

toolbar=… 窗口有没有工具条，取值yes或no

location=… 窗口有没有地址栏，取值yes或no

directories=… 窗口有没有连接区，取值yes或no

scrollbars=… 窗口有没有滚动条，取值yes或no

status=… 窗口有没有状态栏，取值yes或no

resizable=… 窗口给不给调整大小，取值yes或no

open() 方法有返回值，返回的就是它打开的窗口对象。所以，

var newWindow = open(”,’_blank’);

这样把一个新窗口赋值到“newWindow”变量中，以后通过“newWindow”变量就可以控制窗口了。

close() 关闭一个已打开的窗口。

用法：window.close() 或 self.close()：关闭本窗口；

.close()：关闭指定的窗口。

如果该窗口有状态栏，调用该方法后浏览器会警告：“网页正在试图关闭窗口，是否关闭？”然后等待用户选择是否；如果没有状态栏，调用该方法将直接关闭窗口。

blur() 使焦点从窗口移走，窗口变为“非活动窗口”。

focus() 是窗口获得焦点，变为“活动窗口”。不过在 Windows 98，该方法只能使窗口的标题栏和任务栏上的相应按钮闪烁，提示用户该窗口正在试图获得焦点。

scrollTo() 用法：[.]scrollTo(x, y)；使窗口滚动，使文档从左上角数起的(x, y)点滚动到窗口的左上角。

scrollBy() 用法：[.]scrollBy(deltaX, deltaY)；使窗口向右滚动 deltaX 像素，向下滚动 deltaY 像素。如果取负值，则向相反的方向滚动。

resizeTo() 用法：[.]resizeTo(width, height)；使窗口调整大小到宽 width 像素，高 height 像素。

resizeBy() 用法：[.]resizeBy(deltaWidth, deltaHeight)；使窗口调整大小，宽增大 deltaWidth 像素，高增大 deltaHeight 像素。如果取负值，则减少。

alert() 用法：alert()；弹出一个只包含“确定”按钮的对话框，显示的内容，整个文档的读取、Script 的运行都会暂停，直到用户按下“确定”。

confirm() 用法：confirm()；弹出一个包含“确定”和“取消”按钮的对话框，显示的内容，要求用户做出选择，整个文档的读取、Script 的运行都会暂停。如果用户按下“确定”，则返回 true 值，如果按下“取消”，则返回 false 值。

prompt() 用法：prompt([, ])；弹出一个包含“确认”“取消”和一个文本框的对话框，显示的内容，要求用户在文本框输入一些数据，整个文档的读取、Script 的运行都会暂停。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回 null 值。如果指定，则文本框里会有默认值。

事件

onload; onunload; onresize; onblur; onfocus; onerror

Cookies的在网页制作中的应用

认真生活 — Wed, 05 Nov 2008 17:52:11 +0000

这是一篇关于网页制作知识的日志,许多初入制作网页的朋友或许不清楚Cookie的使用,使用Cookie是非常有用的,能够加快网页展示速度,比如hao123的页面,设置了Cookie,因而不联网也能打开页面。这样从本机读取数据，不仅速度快，而且也大大减小了服务器压力，对于服务器比较差的朋友尤其适用。

Cookie 的基本知识

Cookie 是什么？在英文里”cookie”是小点心的意思,在网页制作中则有另外一层的含义。“某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息，这些文件就称为

Cookie。” JavaScript 提供了对 Cookies 的很全面的访问权利。

Cookie的命名规则是这样的：=<值>。只能用可以用在 URL 编码中的字符，这比较难懂，但是只要你只用字母和数字命名，就不会有问题了。<值>的要

求也是“只能用可以用在 URL 编码中的字符”。

每个 Cookie 都有失效日期，一旦过了失效日期，这个 Cookie 就会被删掉。我们不能直接删掉一个 Cookie，但是可以用设定失效日期早于现在时刻的方法来间接删掉它。

使用 document.cookie 属性。

如果直接使用 document.cookie 属性，我们就可以知道在现在的文档中有多少个 Cookies以及每个Cookies 的名字，和它的值。例如，在某文档中添加“document.write

(document.cookie)”，结果显示：name=yetlive; email=yetlive@yetlive.com; lastvisited=default.html。这意味着，文档包含 3 个 Cookies：name, email 和

lastvisited，它们的值分别是 yetlive, yetlive@yetlive.com 和 default.html。

可以看到，两个 Cookies 之间是用分号和空格隔的，于是我们可以对其切片处理，使用用 cookieString.split(‘; ‘) 方法得到每个 Cookie 分开的一个数组（先用 var

cookieString = document.cookie）。

设定一个 Cookie 的方法是对 document.cookie 赋值。与其它情况下的赋值不同，向 document.cookie 赋值不会删除掉原有的 Cookies，而只会增添 Cookies 或更改原有

Cookie。赋值的格式：

document.cookie = ‘cookieName=’ + escape(‘cookieValue’)

+ ‘;expires=’ + expirationDateObj.toGMTString();

以上“cookiename”“cookievalue”“expirationDateObj”三项是要按实际情况做出改动的。cookieName 表示 Cookie 的名称，cookieValue 表示 Cookie 的值，

expirationDateObj 表示储存着失效日期的日期对象名，如果不需要指定失效日期，则不需要第二行。不指定失效日期，则浏览器默认是在关闭浏览器（也就是关闭所有窗口）之

后过期。

应该注意的地方：

首先 escape() 方法：为什么一定要用？因为 Cookie 的值的要求是“只能用可以用在 URL 编码中的字符”。我们知道“escape()”方法是把字符串按 URL 编码方法来编码

的，那我们只需要用一个“escape()”方法来处理输出到 Cookie 的值，用“unescape()”来处理从 Cookie 接收过来的值就万无一失了。而且这两个方法的最常用途就是处理

Cookies。其实设定一个 Cookie 只是“document.cookie = ‘cookieName=cookieValue’”这么简单，但是为了避免在 cookieValue 中出现 URL 里不准出现的字符，还是用一个

escape() 好。

然后“expires”前面的分号：注意到就行了。是分号而不是其他。

最后 toGMTString() 方法：设定 Cookie 的时效日期都是用 GMT 格式的时间的，其它格式的时间是没有作用的。

现在我们来实战一下。设定一个“name=rose”的 Cookie，在 3 个月后过期。

var expires = new Date();

expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);

/* 三个月 x 一个月当作 30 天 x 一天 24 小时

x 一小时 60 分 x 一分 60 秒 x 一秒 1000 毫秒 */

document.cookie = ‘name=rose;expires=’ + expires.toGMTString();

为什么没有用 escape() 方法？这是因为我们知道 rose 是一个合法的 URL 编码字符串，也就是说，’rose’ == escape(‘rose’)。一般来说，如果设定 Cookie 时不用 escape()

，那获取 Cookie 时也不用 unescape()。

再来一次：编写一个函数，作用是查找指定 Cookie 的值。

function getCookie(cookieName) {

var cookieString = document.cookie;

var start = cookieString.indexOf(cookieName + ‘=’);

// 加上等号的原因是避免在某些 Cookie 的值里有

// 与 cookieName 一样的字符串。

if (start == -1) // 找不到

return null;

start += cookieName.length + 1;

var end = cookieString.indexOf(‘;’, start);

if (end == -1) return unescape(cookieString.substring(start));

return unescape(cookieString.substring(start, end));

}

这个函数用到了字符串对象的一些方法，请快去查查。这个函数所有的 if 语句都没有带上 else，这是因为如果条件成立，程序运行的都是 return 语句，在函数里碰上 return

，就会终止运行，所以不加 else 也没问题。该函数在找到 Cookie 时，就会返回 Cookie 的值，否则返回“null”。

现在我们要删除刚才设定的 name=rose Cookie。

var expires = new Date();

expires.setTime(expires.getTime() – 1);

document.cookie = ‘name=rose;expires=’ + expires.toGMTString();

可以看到，只需要把失效日期改成比现在日期早一点（这里是早 1 毫秒），再用同样的方法设定 Cookie，就可以删掉 Cookie 了。

在Google中搜索更多：Cookie的使用知识