<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<script language="javascript">
<!--
function MyForm(){
msg.innerHTML="debug::in function";
var username = document.form1.username.value;
var msg = document.getElementById("msg");
if(username.length==0){
msg.innerHTML="[ 提示：用户名不能为空! ]";
document.form1.username.focus();
return false;
}
var pass = document.form1.password.value;
if(pass.length==0){
msg.innerHTML="[ 提示：密码不能为空! ]";
document.form1.password.focus();
return false;
}
var pass1 = document.form1.password1.value;
if(pass1.length==0){
msg.innerHTML="[ 提示：确认密码不能为空! ]";
document.form1.password1.focus();
return false;
}
if(pass1!=pass){
msg.innerHTML="[ 提示：您两次输入的密码不一致! ]";
document.form1.passwoid.focus();
return false;
}
var mail = document.form1.mail.value;
if(mail.length==0){
msg.innerHTML="[ 提示：E_mail不能为空! ]";
document.form1.mail.focus();
return false;
}
var i = form1.mail.value.indexOf("@");
var j = form1.mail.value.indexOf(".");
if((i<0)||(j<0)||(i-j>0))
{
msg.innerHTML="[ 提示：您输入的E_mail格式不正确，请正确输入! ]";
document.form1.mail.focus();
return false;
}
msg.innerHTML="";
return true;
}
-->
</script>
</head>
<body onload="document.form1.username.focus()">
<form id="form1" name="form1" method="post" action="" onsubmit="return MyForm()">
<table width="389" border="1" align="center" cellpadding="5">
<tr>
<td colspan="2"><div align="center">用户注册<br /></div></td>
</tr>
<tr>
<td colspan="2" align="center" bordercolor=""
bgcolor="">
<font color="red"><span id="msg">${error}</span> </font>
</td>
</tr>
<tr>
<td width="71">用户名：</td>
<td width="286"><label>
<input name="username" type="text" id="username" size="20" />
</label>
*（必填）</td>
</tr>
<tr>
<td>用户密码：</td>
<td><label>
<input name="password" type="password" id="password" size="20" />
</label>
*（必填）</td>
</tr>
<tr>
<td>重复密码：</td>
<td><label>
<input name="password1" type="password" id="password1" size="20" />
</label>
*（必填）</td>
</tr>
<tr>
<td>电子邮件：</td>
<td><label>
<input name="mail" type="text" id="mail" size="25" />
</label>
*（必填）</td>
</tr>
<tr>
<td>电话：</td>
<td><label>
<input name="tel" type="text" id="tel" size="22" />
</label></td>
</tr>
<tr>
<td>QQ:</td>
<td><label>
<input name="qq" type="text" id="qq" size="22" />
</label></td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<input type="submit" name="Submit" value="注册" />
<input type="reset" name="Submit2" value="重置" />
</div>
</label></td>
</tr>
</table>
</form>
</body>
</html>
本文链接
定义：this是包含它的函数作为方法被调用时所属的对象。 this 就是当前运行时的对象
说明：这句话有点咬嘴，但一个多余的字也没有，定义非常准确，我们可以分3部分来理解它！
1、包含它的函数。2、作为方法被调用时。3、所属的对象。
看例子：
function to_green(){
this.style.color="green";
}
to_green();
上面函数中的this指的是谁？
分析：包含this的函数是，to_green
该函数作为方法被调用了
该函数所属的对象是。。？我们知道默认情况下，都是window对象。
OK，this就是指的window对象了，to_green中执行语句也就变为，window.style.color="green"
这让window很上火，因为它并没有style这么个属性，所以该语句也就没什么作用。
我们在改一下。
window.load=function(){
var example=document.getElementById("example");
example.onclick=to_green;
}
这时this又是什么呢？
我们知道通过赋值操作，example对象的onclick得到to_green的方法，那么包含this的函数就是onclick喽，
那么this就是example引用的html对象喽。
this的环境可以随着函数被赋值给不同的对象而改变！
下面是完整的例子：
<script type="text/javascript">
function to_green(){
this.style.color="green";
}
function init_page(){
var example=document.getElementById("example");
example.onclick=to_green;
}
window.onload=init_page;
</script>
<a href="#" id="example">点击变绿</a>
本文链接
Fabric.js 是一个简单而强大的 JavaScript Canvas 库，在 HTML5 Canvas 元素之上提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。
- 使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏
- Textillate.js – 实现 CSS3 文本动画的简单插件
- 使用 ThreeSixty 创建 360 度全景图片预览效果
- 实用锦囊：推荐一款非常棒的响应式网页测试工具
- 令人印象深刻的 jQuery 模态框插件 – iLightBox
使用 Fabric.js 你可以创建和填充画布上的对象，从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象，修改它们的属性（颜色、透明度，层叠顺序）等等。
官方主页 在线演示 GitHub
- 2012年最佳 Web 前端开发工具和框架
- 史上最全的浏览器 CSS & JS Hack 手册
- 让你的网站变成响应式的三个简单步骤
- 构建杀手级应用 JavaScript 工具和技术
- 推荐25款提高网站可用性和转化率的工具
本文链接：Fabric.js – 简单而强大的 JavaScript Canvas 库
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
本文链接