同时参考了很多大家分享的东西，把自己遇到的问题也放出来和大家分享

下一步打算做一些前端自动化方面的脚本，希望和大家多学习，共进步

vmserver是vmware旗下的一款虚拟机服务器，可以通过web管理和操作虚拟机，同时支持多平台 windows、linux、macos等，免费的 可以在官网申请到授权码

这次我们选择的是linux版的vmware server

服务器环境：centos 5.5

vmserver版本：VMware-server-2.0.2-203138.i386

安装过程不详细叙述了 参考下面这篇文章即可，我也复制到最后给大家参考了

http://wuyizhaizhu.blog.163.com/blog/static/115151869201052201339515/

安装后通过web可以访问，进入管理端，在里面安装虚拟机即可

我就讲讲我们在搭建过程中遇到的问题吧

1.安装遇到提示

You cannot install VMware Server on a system running a xen kernel

解决方法：
http://zackofalltrades.com/2008/09/changing-to-a-non-xen-kernel-in-centos-5-so-you-can-run-vmware-server/

To do this, you first need to install the kernel. yum makes this easy:

yum install kernel

Then remove xen and the kernel-xen packages:

yum remove xen kernel-xen

Then you have to specify which kernel you want to run in /boot/grub/grub.conf. In that file there’s a list of kernels available to boot from:

#boot=/dev/sda

default=1

timeout=5

splashimage=(hd0,0)/boot/grub/splash.xpm.gz

hiddenmenu

title CentOS (2.6.18-92.1.10.el5)

root (hd0,0)

kernel /boot/vmlinuz-2.6.18-92.1.10.el5 ro root=LABEL=/1 rhgb quiet

initrd /boot/initrd-2.6.18-92.1.10.el5.img

title CentOS (2.6.18-92.1.10.el5xen)

root (hd0,0)

kernel /boot/xen.gz-2.6.18-92.1.10.el5

module /boot/vmlinuz-2.6.18-92.1.10.el5xen ro root=LABEL=/1 rhgb quiet

module /boot/initrd-2.6.18-92.1.10.el5xen.img

The line that says default= specifies which kernel to load, where 0 is the first one listed in the file. In my case, I had to change the line that says default=1 to default=0 to specify the non-xen kernel.

Reboot, and you’re good to go – the VMware RPM will install, and VMware server runs just fine.

2.安装好虚拟机后 通过NAT模式链接网络，web管理没有问题，如果想使用远程桌面登陆会发现没有网内ip，只有vm自带的虚拟ip

解决方案：通过iptables转发服务器某端口到虚拟机的端口 使我们可以访问虚拟机上面的某些服务，比如远程桌面

启用ipv4端口转发功能 /etc/sysctl.conf 文件修改net.ipv4.ip_forward =1 即可

然后通过iptables配置，vm的NAT机制其实是通过虚拟网卡来实现虚拟机的网络共享的，所以你的服务器上面会有一块vm虚拟网卡，可以通过ifconfig看到

我的是：

vmnet8    Link encap:Ethernet  HWaddr 00:50:56:C0:00:08

inet addr:172.16.20.1  Bcast:172.16.20.255  Mask:255.255.255.0

进入虚拟机也可以看到虚拟机的ip也是这个网段的

下面我们来把服务器的某个端口 转发到虚拟机即可 iptables配置如下

192.168.0.90是服务器ip dport 12346 是服务器端的端口

172.16.20.130是虚拟机的ip ，3389是虚拟机的远程终端端口

重启iptables，通过远程桌面链接服务器ip：12346端口 成功了！

-A PREROUTING -d 192.168.0.90 -p tcp -m tcp –dport 12346 -j DNAT –to-destination 172.16.20.130:3389

-A POSTROUTING -d 172.16.20.128 -p tcp -m tcp –dport 3389 -j SNAT –to-source 172.16.20.1

3.因为多人来使用虚拟机，xp默认仅支持一个用户链接，所以需要hack一下远程服务 目前采用较多的是替换dll的方法 百度一下即可找到很多，这里不再叙述了

4.我们还需要测试win7 发现在vmware server选择安装版本的时候没有win7的选项，这时可以通过选择Microsoft Windows Vista 安装即可

附：mac osx远程桌面下载 ，大家可以通过mac直接链接到虚拟机了
http://www.microsoft.com/china/office/mac/downloads?pid=Mactopia_RDC&fid=68346E0D-44D3-4065-99BB-B664B27EE1F0#viewer

至此，基本的环境搭建完毕了 放几张截图吧

成功通过远程桌面链接到虚拟机环境

由于vmserver web Console 只支持windows 我在mac下开了个本地虚拟机截了一张Console操作的图

转载请注明:http://www.iamued.com/qianduan/1951.html
参考：vmwareserver for centos 安装方法：

Install

1. 在 VMware 中注册并下载 VMware Server 的 rpm 安装包
注册的时候要注意一点，即问你准备在windows下和linux下各安装多少个copy，当然要填多点了 ：）

2. 使用 root 用户登录要安装的主机

3. 安装 rpm

rpm -ivh VMware-server-2.0.1-156745.i386.rpm

4、进行配置

4.1运行

/usr/bin/vmware-config.pl

开始配置界面，下面，我们尽量详细的讲解一下配置过程

4.2

Do you want networking for your virtual machines? (yes/no/help) [yes]

是否需要配置网络，一般应该使用，所以使用缺省值。

4.3

Configuring a bridged network for vmnet0.

Please specify a name for this network.

[Bridged]vm-bridged

首先配置使用桥接的网络，如果你希望你的虚拟机直接暴露于外网（并不特指internet，通常是指暴露在宿主机所在的子网内），可通过桥接的方法，需要指定该网络的名称，例如 vm-bridged ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.4

Your computer has multiple ethernet network interfaces available: eth0, eth1.

Which one do you want to bridge to vmnet0? [eth0]

选择在哪块网卡上配置桥接网络，一般应该选择你能够上网的网卡，当然，如果你比较熟悉网络，也可进行其它的配置。

4.5

Do you wish to configure another bridged network? (yes/no) [no]

是否需要在其它网卡上配置桥接网络，根据你的实际需要，一般是不需要的。

4.6

Do you want to be able to use NAT networking in your virtual machines? (yes/no) [yes]

是否需要通过NAT配置网络，如果你希望你的虚拟机暴露在外网（并不特指internet，通常是指暴露在宿主机所在的子网内），NAT是常用的一种虚拟机网络配置方法（类似你通过一台路由器上网），通过其往往能够得到更高的网速，通过在宿主机的iptables中进行配置，可以很容易让类似 BT，EMule等软件获得更高的下载速度，所以我们选择 yes。

4.7

Configuring a NAT network for vmnet8.

Please specify a name for this network. [NAT]vm-nat

配置使用NAT的网络名称，例如 vm-nat ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.8

Do you want this program to probe for an unused private subnet? (yes/no/help) [yes]

是否自动配置NAT使用的子网，一般选择自动配置了，除非你希望对子网进行规划，通常会自动配置 172.16.*.* 这样的子网。

4.9

Do you wish to configure another NAT network? (yes/no) [no]

是否需要配置另外一个NAT网络，通常不需要。

4.10

Do you want to be able to use host-only networking in your virtual machines? [yes]

是否希望虚拟机支持 host-only 的网络，如果你不希望将虚拟机暴露于外网（并不特指internet，通常是指暴露在宿主机所在的子网内），应该在创建虚拟机时选择这种网络。

4.11

Configuring a host-only network for vmnet1.

Please specify a name for this network. [HostOnly] vm-hostonly

配置使用NAT的网络名称，例如 vm-hostonly ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.12

Do you want this program to probe for an unused private subnet? (yes/no/help) [yes]

是否自动配置HostOnly使用的子网，一般选择自动配置了，除非你希望对子网进行规划，通常会自动配置 172.16.*.* 这样的子网。

4.13

Do you wish to configure another host-only network? (yes/no) [no]

是否需要配置另外一个HostOnly网络，通常不需要。

4.14

Please specify a port for remote connections to use [902]

指定远程连接端口，VMware Server安装完成后，可通过其一套Web界面进行访问，在这套界面中，有一个 Console（控制台）的功能，该功能通过在浏览器中安装一个插件，可以实现通过浏览器查看和管理被安装的虚拟机（如果你用过rdesktop、symantec pc-anywhere或KVM，你应该明白我在说什么），这个插件需要通过服务器上的这个端口获得数据（所以，如果你的宿主机前有防火墙，需要开通此端口的TCP协议），一般我们就用缺省的端口就好了，除非你的端口已经被占用，BTW，查看端口被谁打开的方法是：

lsof -i :902

如果出现结果，则可以通过进程号获得什么进程打开了此端口。

4.15

Please specify a port for standard http connections to use [8222]

同上，web访问界面使用的http端口，安装完成后，你可以通过 http://www.xxx.com:8222 来访问 VMware Server的Web管理界面，需要在防火墙内打开此端口的TCP协议。

4.16

Please specify a port for secure http (https) connections to use [8333]

同上，web访问界面使用的https端口，安装完成后，你可以通过 https://www.xxx.com:8333/ui 来访问 VMware Server的Web管理界面，需要在防火墙内打开此端口的TCP协议。

4.17

The current administrative user for VMware Server  is ”.  Would you like to specify a different administrator? [no]yes

这里我们一般不能用缺省选项，应该选择 yes ，这个配置的意思是说当前 VMware Server 的管理员尚未指定（”的意思可不就是没指定嘛，当然，也可能有别的含义，不过我们不是测试人员，没有必要都搞明白），是否需要指定–当然要指定了。

4.18

Please specify the user whom you wish to be the VMware Server administrator

选择宿主机上的一个已有的用户作为其管理员，这里的用户是指linux系统的用户，当然应该有密码了，一般为了安全起见，应该创建一个单独的用户，例如 vmware 什么的，并指定其密码，不过可能不需要有 home 目录，也最好不给它 shell。

4.19

In which directory do you want to keep your virtual machine files?

[/var/lib/vmware/Virtual Machines]

指定虚拟机存放的目录，即其 DataStore 的概念，这里可能会占用较多的空间（看你装多少操作系统，系统中有多少内容了），所以最好放置在有足够空间的位置，一般我们的 var 或 home 通常会是空间比较大的地方，所以，看你自己的情况了。

4.20

The path “/home/vmware/Virtual Machines” does not exist currently. This program

is going to create it, including needed parent directories. Is this what you

want? [yes]

如果你指定了一个不存在的目录，会提示你是否要自动创建，当然要创建了。

4.21

Please enter your 20-character serial number.

Type XXXXX-XXXXX-XXXXX-XXXXX or ‘Enter’ to cancel:

毕竟，只是一个free的软件，序列号还是需要的，在 VMware注册的时候会在激活邮件中获取到，你应该将其妥善保存好。

4.22

In which directory do you want to install the VMware VIX API binary files?

[/usr/bin]

选择 VMware VIX API binary files 的安装位置，VMware VIX API 是很有用的东东，特别是在你的虚拟机比较多，需要自己写脚本进行管理的情况下，你可以在脚本中通过调用VMware VIX API，完成虚拟机的启动、关闭、备份等日常工作，以后我们会对此进行专门的说明，请参看 VMware VIX API。

4.23

In which directory do you want to install the VMware VIX API library files?

[/usr/lib/vmware-vix/lib]

选择 VMware VIX API library files 的安装位置。

4.24

The path “/usr/lib/vmware-vix/lib” does not exist currently. This program is

going to create it, including needed parent directories. Is this what you want?

[yes]

是否自动创建 VMware VIX API library files 的安装目录，当然了。

4.25

In which directory do you want to install the VMware VIX API document pages?

[/usr/share/doc/vmware-vix]

指定VMware VIX API 的文档的安装位置。

4.26

The path “/usr/share/doc/vmware-vix” does not exist currently. This program is

going to create it, including needed parent directories. Is this what you want?

[yes]

是否自动创建 VMware VIX API 文档的安装目录，当然了。

4.27

The installation of VMware VIX API 1.6.2 build-156745 for Linux completed

successfully. You can decide to remove this software from your system at any

time by invoking the following command: “/usr/bin/vmware-uninstall-vix.pl”.

告诉你 VMware VIX API 已安装完成，可以在以后通过 /usr/bin/vmware-uninstall-vix.pl 进行卸载，如果你以后不想再使用 VMware Server（你可能有了更好的选择，例如开源的 KVM），你可以先使用 /usr/bin/vmware-uninstall-vix.pl 卸载 VIX API，然后使用rpm卸载VMware Server。

4.28

基本的配置过程就是以上这些，在配置完成后，系统会尝试自动启动虚拟机，并会在系统重启时自动启动 VMware Server。

5. 使用 VMware Server

作为安装和配置之后，下面我们来介绍一下如何使用 VMware Server。

5.1 配置防火墙

首先，如果你的宿主机上安装有防火墙，并且希望通过其它机器上的浏览器访问宿主机上的管理界面，需要在宿主机上的防火墙上进行设置，假设你使用 iptables，你可以

vi /etc/sysconfig/iptables

在其中适当的位置加入

-A RH-Firewall-1-INPUT -m state –state NEW -m multiport -p tcp –dport 902,8222,8333 -j ACCEPT

然后重启服务

service iptables restart

5.2 在浏览器中访问 VMware Server

在浏览器中输入 http://www.xxx.com:8222 ，其中 www.xxx.com 是你的宿主机的地址，如果你在本机访问，可以使用localhost ，此时，页面会自动跳转至 https://www.xxx.com:8333/ui ，并报出提示

www.xxx.com:8333 使用了无效的安全证书。

这是由于使用了非正式发布的证书，可以让浏览器接收该证书，当然，如果你愿意，也可以加入正式的证书，请参考 在VMware Server 中使用证书。需要注意的是，有时候会无法打开loading页面，例如在 firefox 的错误控制台内可以看到类似这样的错误

Error: vmtn is not defined

Source File: https://vm.myserver.com:8333/ui/

Line: 130

Error: unterminated string literal

Source File: https://vm.myserver.com:8333/ui/jslib-1.0.128374/.jslib.js

Line: 1, Column: 120

Source Code:

d(),TIMEOUT:vmtn.util.EventObject.nextId()});var $super=$class.parent.prototype;})(); (function(){var $class=new $Class(“vmtn.

Error: syntax error

Source File: https://vm.myserver.com:8333/ui/jslib-1.0.128374/.wbc.js

Line: 1, Column: 77

Source Code:

is._config.getFinalData();},setSelection:function(selection){var oldSelection=

Error: vmtn is not defined

Source File: https://vm.myserver.com.ch:8333/ui/

Line: 122

这时，我们清空浏览器的缓存，再重新访问，一般就可以解决问题了（如果你有更好的办法，请mail我：wanxiren@gmail.com ）。

5.3 创建虚拟机
按照提示一步一步创建就可以了，需要注意的是，最好在创建时选择的CPU多一些，内存也大一些，将来在真正使用时可以从大改小，但不能从小改大。对于虚拟机来说，配置稍微多一些的内存是必要的，这可以尽量避免换页操作，从而减少IO操作，以提升虚拟机性能。

5.4 安装操作系统
将虚拟机关机，然后创建CD/DVD drive，选择你要安装的操作系统镜像文件（iso文件），然后开机，即可进行操作系统的安装工作。

5.5 复制虚拟机
如果我们已经安装好了一个虚拟机，为了方便下次安装，可将其复制出来，对虚拟机关机，然后到虚拟机的数据目录下找到刚才装好的操作系统，将整个目录进行备份即可。下次安装时，将该目录复制到虚拟机的数据目录下，改名成你希望的名字，然后在web管理界面中创建虚拟机（创建时直接选择刚才复制过来的目录）并开机，在开机时，有一个重要的提示，就是问你这个虚拟机是“移动过来的”还是“复制过来的”，一般应该选择是“复制过来的”（这样会对其重新进行配置），然后就可以使用了。

5.6 使用Console
在虚拟机开机后，点击 Console 标签，第一次点击时会提示是否需要“Install plug-in”，这个插件就是在浏览器中操作虚拟机的界面，安装之，重启浏览器，就可以访问虚拟机了。

demo见：http://www.iamued.com/demo/Mselect/

代码：https://github.com/iamued/Mselect

也借此机会尝试用了一下git 貌似还不错哦~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>一个jquery的小模板机制-我是UED</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a id="test" price="110" name="iphone" onmouseover="test();" href="#">这是一个A元素 有2个属性 鼠标放上来看看</a>

临时Demo的部分代码：
<script type="text/javascript">
	function test(){
		var testString="价格为{price}元，我是{name}"
		alert(testString.replace(/{([^{}]+)}/g,function(word){
			var _attr=word.replace(/({|})+/g,"");
			return $("#test").attr(_attr);
		}));

	}
</script>
</body>
</html>

查看临时Demo
实际应用的案例：http://www.iamued.com/demo/simpletip/template/

http://www.google.com/intl/zh-CN/events/devfests/2010/

还是收获不少的，google还赠送了一些小礼品 T-shirt、包包、笔记本、钥匙链等

几个主题主要围绕的还是HTML5+CSS3 还有一些chrome的深入讲解

相关PPT目前还没有得到，请持续关注，之后如果拿到PPT会持续更新的：）

顺便问下：谁知道昨天最后讲解的那个测试兼容性的 extensions 叫什么？

精品学习网（北京）诚招WEB前端制作工程师

公司介绍：http://www.51edu.com/aboutus/

工作地点：北京海淀魏公村

投递信箱：liug@51edu.com

QQ:76373

表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:

不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！

google 太强悍了，好在前端代码都是开源的，下面简单分析下。

首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：

<?xml version="1.0" encoding="UTF-8"?>

<pdf2xml>
<meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/>
<meta name="Producer" content="Adobe Acrobat 8.1"/>
<meta name="CreationDate" content="20100316080708-04'00'"/>
<page t="0" l="0" w="612" h="773">
 <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7">
Please post comments or corrections to the Author Online forum at</text>
...

有了这份数据，就可以根据选区得到对应的文本。

接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash 插件后，功能正常，这说明是用 js 实现的。

通过 Profile 工具 + Fiddler + 肉眼识别 + 运气，终于定位到了关键代码：

n.am = function(a) {
    if (! (!this.k.Ca && Mr(this, a))) {
        ac && this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};

只要注释掉上面的代码，Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索，在 HTML 里，发现了秘密：

到此真相大白：当用户按下 Ctrl + C 时，js 会注入事件，首先根据坐标从数据里取出对应文本，然后将文本赋值给 textarea, 并将其激活和选中。这样，就和用户选中 textarea 的内容，再按下 Ctrl + C 的效果是一样了。

强悍的 google, 技术创新无处不在！

注意：利用 textarea 只能复制纯文本，如果想复制富文本，可以借鉴 google docs 编辑 Word 文档时的处理方式：采用 iframe 充当临时容器，有兴趣的可以进一步研究。

简单演示：goog-docs-copy-demo.html

发现这个秘密后，最近在疯狂搞编辑的牛人承玉（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：附带警告信息的禁止copy. 据说，能成功复制的，都不是“人”。

我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 Ctrl + C, 浏览器会限制其功能。

Google 的产品里有很多秘密，真诱人，创意无限！

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

几点补充说明：

1. IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
2. 第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

使用方法如下：

var fade = function(element, transparency, speed, callback){……}
透明度渐变：transparency:透明度 0(全透)-100(不透)；speed:速度1-100，默认为1
例<input onclick="fade('testDiv', 40)" type="button" value="透明度变化" />

var move = function(element, position, speed, callback){……}
//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10
例<input onclick="move('testDiv', {top:400})" type="button" value="垂直移动" />

var resize = function(element, size, speed, callback){……}
//长宽渐变：size:要改变到的尺寸 格式 {width:400, height:250}或{width:400}或{height:250}；speed:速度 1-100，默认为10
例<input onclick="resize('testDiv', {height:300})" type="button" value="改变高度" />

核心代码分析
1、获取一个元素的透明度
如果是IE浏览器，则攻取最终样式的滤镜filter的值，再通过正则表达式获取到透明度滤镜alpha的值，如果不存在透明度滤镜值，则透明度为100。
如果是非IE浏览器，那么可以获取最终样式的opacity属性，

function getOpacity(elem){
var alpha;
if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){
alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '':
'100';
}else{
alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity'];
}
return alpha;
};

2、设置透明度
这个就简单了，不用管浏览器，通通的设置opacity及filter，
element.style.opacity = start / 100;
element.style.filter = ‘alpha(opacity=’ + start + ‘)’;
实际上这儿我偷了个懒，真正无懈可击的写法，应该是判断一下是否IE浏览器，因为在一些情况下可能使用多个滤镜，这时应该用正则替换alpha滤镜的值，而不是直接设置style.filter = ‘alpha(opacity=’ + start + ‘)’;

3、element.offsetWidth、element.offsetHeight与element.style.width、element.style.height的关系
只有在IE的border-content式盒模型情况下，这两个值才是相等的，即elementoffsetWidth==element.style.width+element.style.paddingLeft+element.style.paddingRight+element.style.borderLeftWidth+element.style.borderRightWidth
而我认为border-content式盒模型是符合修改元素尺寸时的心理预期的，对非border-content式盒模型情况下要作一个尺寸的修正。
在其它情况下应该对该值加以修正

if(!(navigator.userAgent.toLowerCase().indexOf('msie') != -1&&document.compatMode == 'BackCompat')){
//除了ie下border-content式盒模型情况外，需要对size加以修正
var CStyle=document.defaultView?document.defaultView.getComputedStyle(element,null):element.currentStyle;
if(typeof(size.width)=='number'){
size.width=size.width-CStyle.paddingLeft.replace(/D/g,'')-CStyle.paddingRight.replace(/D/g,'');
}
if(typeof(size.height)=='number'){
size.height=size.height-CStyle.paddingTop.replace(/D/g,'')-CStyle.paddingBottom.replace(/D/g,'');
}
}

有人认为以上的修正中默认了padding值的单位是px并且为整数，是不对的，
实际上经由我在ie及firefox下的测试，引用最终样式的padding值，必然是整数，并以px为单位。

4、关于把三个函数合并成一个通用动画函数
以上三个函数的主要逻辑都是一样的：
通过setInterval每隔一定时间修改元素的style属性，以达到动画效果。
所以，把三个函数合并成一个函数是可以的
只是需要在修改特定的属性时出于兼容性，必须作些处理，
因为不同的属性其值类型及单位不一样，不同浏览器下也有区别
如透明度 在非ie下为小数，在ie下是一个特别的滤镜设置
如颜色 一般是用16进制，并有#号前缀
预计这个通用的动画函数的参数会有点多，接口类下
function animator(element, interval, start, end, style, speed, tmp, callback){……}
说明
function animator(元素或元素ID, 计时器句柄,起始值,目标值,需修改的属性, 步进值(增量),值转换过滤方法(用于修改非普通递增递减形的数据，比如16进制颜色递增、前缀符号后缀单位修正), 回调函数)
function animator(‘testdiv’,'bgcolor’,'#336699′,’#aabbcc’,'backgroundColor’,2,changeColor,callback)
颜色修改方法示例（仅供参考，未测试）

changeColor=function(start,end,speed){
var _10to16 = function(color){
function tmp(index){
var tmp = color[index].toString(16);
return tmp.length == 1 ? "0" + tmp : tmp;
};
return "#" + tmp(0) + tmp(1) + tmp(2);
};
var x16to10 = function(color){
if(!/^#[0-9A-Fa-f]{3,6}$/i.test(color))retun color;
function tmp(index){
return color.charAt(index);
};
color = color.substring(1);
if(color.length == 3)
color = tmp(0) + tmp(0) + tmp(1) + tmp(1) + tmp(2) + tmp(2);
return [parseInt(tmp(0) + tmp(1), 16), parseInt(tmp(2) + tmp(3), 16), parseInt(tmp(4) + tmp(5), 16)];
};
var color = x16to10(start),
var end = x16to10(end),
var index = 3;
while(index--)
color[index] = color[index] < end[index] ? min(color[index] + speed, end[index]) : max(color[index] - speed, end[index]);
reutn color;
}

原文见：http://bbs.51js.com/viewthread.php?tid=86901

先感谢一下北京腾讯给我们提供了场地，水，和公仔，今天听了很多“大虾”们的分享，感受颇深
就说一下小公司前端开发在研发中如何更好的协作吧 

今天会议上几个突出的词：“流程”，“沟通”，“专业“，“吃饭喝酒”：） 

那我就分别说一下自己的见解
1.“流程”，存在即是合理的，社会所必须承受的，就像高房价一样，很多时候“流程”被我们吹捧的就像一个神一样，貌似能解决一切问题，而实际上我认为，流程只是一个比较虚的东西，什么是流程？就是一种大家认可的协作方式，在中小企业里我认为无流程就是最好的流程 

2.“沟通”，为什么沟通？怎样沟通？今天腾讯的页面组leader说得好：“沟通就是情商，情商会从你的绩效考评里反映出来”，什么意思呢？也就是“强制沟通”，我认同这个观点，有效的沟通能够大大提升我们的效率，以及信息不对称等问题，我也希望所有的前端朋友们，一定要学会使用“沟通”这个武器，很多时候他能解决你技能所解决不了的问题 

3.“专业”，专业是什么？kejun兄补充的好-“专业就是饭碗”，我们要提升自身专业度，在研发流程中承担更多的职能，现在有多少公司里，后端不做一些“前端”的活呢？这也可能目前前端开发是“解耦”的最好途径 

4.“吃饭喝酒”，同事间朋友间，需要有一些私下的沟通与了解，适当的有些活动，能够在工作配合上更加的顺畅，当然了吃饭喝酒只是其中之一，更多的在轻松地环境下交流交流，增进一下友谊,本次讨论会后聚餐共16人哦：） 

kejun在最后公布了之前出的html面试题的答案 有兴趣的 移步这里
http://www.iamued.com/qianduan/1373.html

最后借用一张崔凯发的合影结尾吧：） 

第六期WEB标准化交流会合影{点击放大}

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
下周（3.27）交流会上我会公布答案  点击查看第六期WEB标准化交流会 总结

＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题（引自http://twitter.com/RageCarrier/status/10712084993）考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点：

考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说

xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>

转自kejun的blog：http://hikejun.com/blog/?p=548