From bab10399aa77f04369bc57706754e542ff074f1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Fri, 14 Dec 2012 21:51:48 +0800
Subject: [PATCH 01/10] =?UTF-8?q?web=E7=AC=AC=E4=B8=89=E6=AC=A1=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/css/main.css                 | 296 ++++++++++++++
 .../zhangguodong/images/error.gif             | Bin 0 -> 1438 bytes
 .../zhangguodong/images/p1.jpg                | Bin 0 -> 2998 bytes
 .../zhangguodong/images/p2.jpg                | Bin 0 -> 2075 bytes
 .../zhangguodong/images/p3.jpg                | Bin 0 -> 1843 bytes
 .../zhangguodong/images/p4.jpg                | Bin 0 -> 1949 bytes
 .../zhangguodong/images/p5.jpg                | Bin 0 -> 2121 bytes
 .../KaixinJavascript/zhangguodong/kaixin.js   | 107 +++++
 .../zhangguodong/kaixinCSS.html               | 386 ++++++++++++++++++
 .../zhangguodong/validate.css                 |  29 ++
 10 files changed, 818 insertions(+)
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/error.gif
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p1.jpg
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p2.jpg
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p3.jpg
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p4.jpg
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p5.jpg
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixin.js
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
new file mode 100644
index 0000000..16c2746
--- /dev/null
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
@@ -0,0 +1,296 @@
+        *
+        {
+            padding: 0px;
+            margin: 0px;
+        }
+        div.header
+        {
+            width: 100%;
+            height: 41px;
+            border-style: solid;
+            border-color: #FFFFFF;
+            border-width: 0px;
+            background-color: #E44049;
+        }
+        .picborder
+        {
+            border-width: 0px;
+        }
+        .header_pic
+        {
+            margin-left: 12%;
+            float: left;
+            width: 200px;
+        }
+        .header_t
+        {
+            float: right;
+            margin-right: 8%;
+            font-size: 12px;
+            width: 200px;
+            line-height: 40px;
+        }
+        .headert_a
+        {
+            color: #FFFFFF;
+        }
+        div.midd
+        {
+            border-style: solid;
+            border-color: #FFFFFF;
+            border-width: 0px;
+            width: 870px;
+            height: 596px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        div.footer
+        {
+            border-top-style: solid;
+            border-top-color: rgb(187,187,187);
+            border-top-width: 1px;
+            width: 1004px;
+            height: 120px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        div.left
+        {
+            border-style: solid;
+            border-color: #FFFFFF;
+            border-width: 0px;
+            width: 508px;
+            height: 530px;
+            margin: 59px 0px 0px;
+            float: left;
+        }
+        div.right
+        {
+            border-style: solid;
+            border-color: #EEEEEE;
+            border-width: 1px;
+            width: 351px;
+            height: 385px;
+            margin: 65px 0px 0px;
+            float: left;
+            background-color: #FDFDFD;
+        }
+        div.title
+        {
+            margin: 20px 0px 20px 0px;
+        }
+        h2
+        {
+            font-family: ��Բ;
+            color: black;
+            font-size: 20px;
+        }
+        ul
+        {
+            list-style: none;
+            list-style-position: outside;
+        }
+        .ultit
+        {
+            font-size: 12px;
+            float: left;
+            padding-top: 6px;
+            width: 67px;
+        }
+        div.input
+        {
+            float: left;
+            width: 240px;
+        }
+        .txt
+        {
+            border-style: solid;
+            border-color: #BBBBBB;
+            border-width: 1px;
+            height: 25px;
+            width: 230px;
+        }
+        .note
+        {
+            clear: both;
+            padding: 3px;
+            line-height: 13px;
+            font-size: 12px;
+            color: #999999;
+            margin-left: 67px;
+        }
+        li
+        {
+            float: left;
+            margin-top: 14px;
+            width: 100%;
+        }
+        a:link
+        {
+            color: #336699;
+            text-decoration: none;
+        }
+        a:hover
+        {
+            color: #3399FF;
+            text-decoration: underline;
+        }
+        a:visited
+        {
+            color: #336699;
+            text-decoration: underline;
+        }
+        .check
+        {
+            font-size: 12px;
+            padding-top: 5px;
+            float: left;
+        }
+        #birth
+        {
+            font-size: 12px;
+            padding-top: 3px;
+            float: left;
+        }
+        #address
+        {
+            float: left;
+            width: 25px;
+        }
+        #address_select
+        {
+            height: 25px;
+            width: 139px;
+        }
+        #agree
+        {
+            margin-left: 67px;
+            margin-top: -5px;
+            font-size: 12px;
+            float: left;
+        }
+        #button
+        {
+            margin-left: 67px;
+            float: left;
+        }
+        #submit
+        {
+            width: 96px;
+            height: 24px;
+            background: #d32c47;
+            border-bottom: #951428 1px solid;
+            border-left: #fff 1px solid;
+            border-right: #951428 1px solid;
+            border-top: #fff 1px solid;
+            color: #fff;
+        }
+        b
+        {
+            font-size: 14px;
+            padding-top: 21px;
+            padding-left: 30px;
+            padding-right: 0px;
+            padding-bottom: 30px;
+            float: left;
+            width: 100%;
+            line-height: 19px;
+        }
+        .right_note
+        {
+            line-height: 19px;
+            font-size: 12px;
+            color: #999999;
+            margin-left: 30px;
+            text-align: left;
+            width: 100%;
+        }
+        #pic
+        {
+            margin-top: 12px;
+            margin-left: 30px;
+            width: 100%;
+        }
+        .image
+        {
+            border-style: solid;
+            border-color: #FFFFFF;
+            border-width: 0px;
+        }
+        .line
+        {
+            height: 1px;
+            margin-top: 25px;
+            background-color: #EEEEEE;
+            width: 100%;
+        }
+        #words
+        {
+            padding-left: 30px;
+            margin-top: 35px;
+        }
+        #words_h
+        {
+            font-family: ��Բ;
+            color: #DD4C4C;
+            font-size: 20px;
+            font-weight: bolder;
+            margin-bottom: 20px;
+        }
+        .words_p
+        {
+            font-family: ��Բ;
+            color: #808080;
+            font-size: 14px;
+            font-weight: bolder;
+            padding-bottom: 10px;
+        }
+        .words_span
+        {
+            color: #DD4C4C;
+        }
+        #footer_first
+        {
+            width: 100%;
+            height: 42px;
+            font-size: 12px;
+            border-style: solid;
+            border-color: #FFFFFF;
+            border-width: 0px;
+        }
+        .footer1_left
+        {
+            float: left;
+            height: 20px;
+            margin-top: 12px;
+            margin-left: -8px;
+        }
+        .footer1_right
+        {
+            float: right;
+            margin-top: 12px;
+            color: #999999;
+        }
+        .footer1left_a
+        {
+            margin-left: 8px;
+            margin-right: 8px;
+        }
+        #footer_second
+        {
+            background-color: rgb(240, 239, 239);
+            height: 27px;
+            font-size: 12px;
+            color: rgb(153,153,153);
+            width: 100%;
+            line-height: 27px;
+            text-align: left;
+        }
+        .footer2_one
+        {
+            margin-left: 40px;
+        }
+        .footer2_two
+        {
+            margin-left: 25px;
+        }
\ No newline at end of file
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/error.gif b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/error.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7b1949006bf6ee094ba88969d88e7d09582f6c63
GIT binary patch
literal 1438
zcmZ?wbhEHb<YSOvxN6VvIydThM)-%y_#ayqK1~k&T$}J~&x$uq+24B0KCPU0*w^Gu
zLG+JBov*uVKQEj3aa!}ExZw9?vFDO~-xbFk54F2f5cTW8=Eud+my-j(ZCY|E-s?$v
z%#XI*yS4dmCv|>Vx8zK;%h#67Z=KoCC$>K8sCd<0`?#g_X<zf><+GmW#J-tS|1v-R
z;gabem(F}Uf9kshQ$Nh_d%b?qubY=YY+3PZO3l56Q{T+!d{q|vvNq%6+zIch6Ti%C
zc~G42r7`*4yLU6^l`H<|j_?goa7ipl1kyJ46$OdO*{LN8NvY|XdA3ULckfqH$V{<S
z3ODsN@GWpo&B*kqDoPEm@(W3>%1*XSQL?vFu&J=B$SufCElE_U$j!+swyLmIN=(U5
zO0@#ALBje<3ScEA*|tiKAPEJKozD41sS2ig2D-@xW(EpohI)p^Cg$emItoSxh6efu
zM*4<Ex`yUf#zs~K1`1H11hlOvCCw_x#SLl~kY}ruQBqQ1rLSLJUanVete0Puu5V~*
zX$dmJ$VeBcLbtdwuOzWTH?LS3W`av<adJ^+K}lwQo&w0k#H9Sv5?dvpOCes!Er1)F
zSF8v2j$U$pu6{*gfxe-h0mw@*g}%P{mFDKcRTq~8r6Sym)!^cg%7Rq=pw#00(xT*4
zpmJr9RRvbgMX8A;`9&f5`8lvq49LhY$uG{xFHmp}HdP4E%uC5HF9xgj^|kWMD=taQ
zOHTE4u~h=<*UQXIv2rmnG_`PZwlp$xHZwGIHFPvLcX2Z|Fm!WrG<Gp@HizkT$xklL
zP0cHT=}kfCb;PL`ln`<YfHu3N7G;*DrnnX5=PH0bY?X=IE#^4QgX&Ge?G_81di8;h
z(Fa8<QZ&PafN2NBgeO`c2cGOx^MGl+2$-lD|Nr~@=l8FlKfZta`sMSdk00K@d;8|~
ztCugHKYRM*@uP<i?%%t6=k~3eH?Cj1dgbz^ix<wHJA3Bzsgoy;A3J*F@S%eT_V3%f
zXZNn1JGO7zx@GgGjT_dlTf1iUs+B92FI&1~@uGzb=FgiuXZEa_Gp0|QI%V>ti4*$!
zdV9LNIy>6iT3ec%8XM~CYHO;iDl5v%N=u513Jdb{a&xk?GBeWCQd5$X5)<O%Vq>DC
zA|t}XLPLUs0t5X0e0{vVJU!gqTwR=<93AZKY;CNqEG^8<Oihf9fEh|pS4Ue*Q$t-%
zRYh4zQ9)i#Rz_M%QbJrzR76-vP=KG0mxr5+lY^a&m4%s!k%2++Ckv3YXV75)0#Iqk
zz_#$f`~nXhss0m7iaNJkuuyDy+F@bA#?1aM;E4?n&%}<zfY`Q<{PoX2i*mIcyIEwg
z=B8bvg3*d20(?BS`MH9^-27&uR?Ld5Rk_>@4BDIu=FGO$!bWxsjEtJPBJ2j%?F^Rk
zj4Uj?%0k9Al9L&8*9ve-=-7*@NUo8S6WA#$;w+^m&nqph$|=j`DkPz-uct0`+)YD>
Ri%Y@O=kb%L&s-cCtN~t*B)k9s

literal 0
HcmV?d00001

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p1.jpg b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b09ade226d0f2c55d625cecec8b361ba0b78c105
GIT binary patch
literal 2998
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

literal 0
HcmV?d00001

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p2.jpg b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..493e9145813c8bbb7055819481fd3de2fbd90bba
GIT binary patch
literal 2075
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
PlZ?VDw=wd`1o7w}oNB4J

literal 0
HcmV?d00001

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p3.jpg b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7aeb7936450f3b55e575e17d72c1160b2bd87f78
GIT binary patch
literal 1843
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

literal 0
HcmV?d00001

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p4.jpg b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..19bfc8f094dfa01abeab45414954e3745dc2942c
GIT binary patch
literal 1949
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
Z4yB8F>7Fs&*zHDsp+WB};Wlyp<ZoF#gH`|l

literal 0
HcmV?d00001

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p5.jpg b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/p5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0965a5e96aa9473d7106d0de56819fc348a89268
GIT binary patch
literal 2121
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
E1$k-F=>Px#

literal 0
HcmV?d00001

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixin.js b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixin.js
new file mode 100644
index 0000000..d51572f
--- /dev/null
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixin.js
@@ -0,0 +1,107 @@
+window.addEvent =function(element,event,fn){   //fn��ʾ������  
+  if(element.addEventListener)
+  {
+	  element.addEventListener(event,fn,false);
+	  
+  }
+  else if(element.attachEvent){
+     element.attachEvent("on"+event, function(){ fn.call(element) });//��һ��������onclick��,��onload���ȵȣ��ڶ��������Ǿ�����¼�����
+     
+   }
+}
+function tip(title,isInfo,id)   //isinfo��ʾ�ı����е������Ƿ����,������ʾʱ�Ƿ��̾��ͼƬ
+{
+  this.title=title;
+  this.isInfo=isInfo;
+  this.tipDom=document.getElementById(id);
+}
+
+//��������function���岢������ִ�У�ִ�к󷵻ظ�tip������������showtip()��hidetip()
+tip.prototype=(function()
+{
+	//���ɺ��ʵ�Tip���ڲ�����
+    function genTip(tipDomObject,title,isInfo)
+	{
+     tipDomObject.className="tipFormat";     //�ö����cssΪtipFormat
+     if(isInfo===false)
+      tipDomObject.innerHTML="<img src='error.gif' /><span>"  + title + "</span>";
+	 else
+	  tipDomObject.innerHTML="<span>"+title+"</span>";
+	}
+	//������ �����ڴ˴�Ӧ��this
+	//alert(this.title+" in closure");
+	return {
+        showTip:function()                               //�հ�����
+		{
+			genTip(this.tipDom,this.title,this.isInfo);
+            //alert(this.tipDom.innerHTML);
+			this.tipDom.style.display="block";
+		},
+		hideTip:function()
+		{
+            this.tipDom.style.display="none";
+		}
+	}
+})();  
+
+
+
+function prepareTip()
+ {
+	var e=document.getElementById("email");
+	window.addEvent(e,'blur',blurFn);  //��email��һ���¼�
+	window.addEvent(e,'focus',focusFn);
+	/* ��ʱע����
+	var n=document.getElementById("name");
+	window.addEvent(n,'blur',blurFn);
+	window.addEvent(n,'focus',focusFn);
+	var p=document.getElementById("password");
+	window.addEvent(p,'blur',blurFn);
+	window.addEvent(p,'focus',focusFn);
+	*/
+ }
+ function blurFn()
+ {
+	var title;
+	switch(this.id)
+	{
+	  case "email":
+		   title="�����ʽ����";
+		   break;
+	  case "password":
+		   title="���벻��";
+		   break;
+	  case "name":
+		   title="����������Ҫ��";
+		   break;
+	}
+	var t=new tip(title,false,this.id+"tip");
+	//�ȹر�ԭ����info tip
+	t.hideTip();
+	//����д����ʱ���� error tip
+	if(checkFormat(this))
+	t.showTip();
+ }
+ function checkFormat(o)
+ {
+	// o ��Ҫ����ʽ��dom����
+	return true;
+ }
+ function focusFn()
+ {
+	var title;
+	switch(this.id)
+	{
+	  case "email":
+		   title="����������";
+		   break;
+	  case "password":
+		   title="����������";
+		   break;
+	  case "name":
+		   title="����������";
+		   break;
+	}
+	var t=new tip(title,true,this.id+"tip");
+	t.showTip();
+ }
\ No newline at end of file
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
new file mode 100644
index 0000000..9899982
--- /dev/null
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
@@ -0,0 +1,386 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>������ </title>
+    <meta name="Generator" content="EditPlus">
+    <meta name="Author" content="">
+    <meta name="Keywords" content="">
+    <meta name="Description" content="">
+    <link rel="stylesheet" href="css/main.css" type="text/css"></link>
+    <link rel="stylesheet" href="validate.css" type="text/css"></link>
+    <script>
+	window.addEvent =function(element,event,fn){   //fn��ʾ������  
+  if(element.addEventListener)
+  {
+	  element.addEventListener(event,fn,false);
+	  
+  }
+  else if(element.attachEvent){
+     element.attachEvent("on"+event, function(){ fn.call(element) });//��һ��������onclick��,��onload���ȵȣ��ڶ��������Ǿ�����¼�����
+     
+   }
+}
+function tip(title,isInfo,id)   //isinfo��ʾ�ı����е������Ƿ����,������ʾʱ�Ƿ��̾��ͼƬ
+{
+  this.title=title;
+  this.isInfo=isInfo;
+  this.tipDom=document.getElementById(id);
+}
+
+//��������function���岢������ִ�У�ִ�к󷵻ظ�tip������������showtip()��hidetip()
+tip.prototype=(function()
+{
+	//���ɺ��ʵ�Tip���ڲ�����
+    function genTip(tipDomObject,title,isInfo)
+	{
+     tipDomObject.className="tipFormat";     //�ö����cssΪtipFormat
+     if(isInfo===false)
+      tipDomObject.innerHTML="<img src='images/error.gif' /><span>"  + title + "</span>";
+	 else
+	  tipDomObject.innerHTML="<span>"+title+"</span>";
+	}
+	//������ �����ڴ˴�Ӧ��this
+	//alert(this.title+" in closure");
+	return {
+        showTip:function()                               //�հ�����
+		{
+			genTip(this.tipDom,this.title,this.isInfo);
+            //alert(this.tipDom.innerHTML);
+			this.tipDom.style.display="block";
+		},
+		hideTip:function()
+		{
+            this.tipDom.style.display="none";
+		}
+	}
+})();  
+
+
+
+function prepareTip()
+ {
+	var e=document.getElementById("email");
+	window.addEvent(e,'blur',blurFn);  //��email��һ���¼�
+	window.addEvent(e,'focus',focusFn);
+	e.addEventListener('keypress',autoemailshow,false);
+	e.addEventListener('blur',autoemailhide,false);
+	e.addEventListener('keyup',writeEmail,false);  //����һ���ַ�ʱ������writeemail
+	var mail_1 =document.getElementById("mail_1");
+	mail_1.addEventListener('mouseover',mailmouseover,false);
+	mail_1.addEventListener('mouseout',mailmouseout,false);
+	mail_1.addEventListener('click',writeontext,false);
+	/* ��ʱע����
+	var n=document.getElementById("name");
+	window.addEvent(n,'blur',blurFn);
+	window.addEvent(n,'focus',focusFn);
+	var p=document.getElementById("password");
+	window.addEvent(p,'blur',blurFn);
+	window.addEvent(p,'focus',focusFn);
+	*/
+ }
+ 
+ function autoemailshow()
+ {
+	
+	var ae=document.getElementById("autoemail");
+	ae.style.display='block';
+ }
+ function autoemailhide()
+ {
+	 var ae=document.getElementById("autoemail");
+	 ae.style.display='none';
+ }
+ function writeontext()
+ {
+     alert("��ִ��");
+     var emailtext=document.getElementById("email");
+     emailtextvalue.value=document.getElementById("mail_1").innerHTML;
+ }
+ function mailmouseover()
+ {
+     mail_1=document.getElementById("mail_1");
+	 mail_1.style.backgroundColor="#f4f4f4";
+ }
+ function mailmouseout()
+ {
+     mail_1=document.getElementById("mail_1");
+	 mail_1.style.backgroundColor="#FFFFFF";
+ }
+ 
+ function writeEmail()
+ {
+	 var emailtextvalue=document.getElementById("email").value;
+	 document.getElementById("mail_1").innerHTML=emailtextvalue+"@qq.com";
+	 document.getElementById("mail_2").innerHTML=emailtextvalue+"@126.com";
+	 document.getElementById("mail_3").innerHTML=emailtextvalue+"@163.com";
+	 document.getElementById("mail_4").innerHTML=emailtextvalue+"@sina.com";
+	 document.getElementById("mail_5").innerHTML=emailtextvalue+"@sina.cn";
+	 document.getElementById("mail_6").innerHTML=emailtextvalue+"@hotmail.com";
+	 document.getElementById("mail_7").innerHTML=emailtextvalue+"@gmail.com";
+	 document.getElementById("mail_8").innerHTML=emailtextvalue+"@sohu.cn";
+	 document.getElementById("mail_9").innerHTML=emailtextvalue+"@yahoo.cn";
+	 document.getElementById("mail_10").innerHTML=emailtextvalue+"@139.cn";
+ }
+ function blurFn()
+ {
+	var title;
+	switch(this.id)
+	{
+	  case "email":
+		   title="�����ʽ����";
+		   break;
+	  case "password":
+		   title="���벻��";
+		   break;
+	  case "name":
+		   title="����������Ҫ��";
+		   break;
+	}
+	var t=new tip(title,false,this.id+"tip");
+	//�ȹر�ԭ����info tip
+	t.hideTip();
+	//����д����ʱ���� error tip
+	if(checkFormat(this))
+	t.showTip();
+ }
+ function checkFormat(o)
+ {
+	// o ��Ҫ����ʽ��dom����
+	return true;
+ }
+ function focusFn()
+ {
+	var title;
+	switch(this.id)
+	{
+	  case "email":
+		   title="����������";
+		   break;
+	  case "password":
+		   title="����������";
+		   break;
+	  case "name":
+		   title="����������";
+		   break;
+	}
+	var t=new tip(title,true,this.id+"tip");
+	t.showTip();
+ }
+	</script>
+</head>
+<body onLoad="prepareTip();">
+    <form method="post">
+    <div class="header">
+        <div class="header_pic">
+            <a href="#">
+                <img class="picborder" src="images/p1.jpg" alt="kaixinlogo"></a>
+        </div>
+        <div class="header_t">
+            <a style="color: #FFFFFF;" href="#">ע��</a> <a style="color: #FFFFFF;" href="#">��¼</a>
+            <a style="color: #FFFFFF;" href="#">����</a> <a style="color: #FFFFFF;" href="#">����</a>
+        </div>
+    </div>
+    <div class="midd">
+        <div class="left">
+            <div class="title">
+                <h2>
+                    ʮ����뿪�������ҵ�ȫ������</h2>
+            </div>
+            <div>
+                <ul>
+                    <li   style="position:relative">
+                        <label class="ultit">
+                            �������䣺</label>
+                        <div class="input">
+                            <input class="txt" type="text" id="email" name="" /></div>
+                        <div id="autoemail" class="autoemailstyle">
+                             <div class="manyemail">��ѡ�����������</div>
+                             <div id="mail_1" class="manyemail">@qq.com</div>
+                             <div id="mail_2" class="manyemail">@126.com</div>
+                             <div id="mail_3" class="manyemail">@163.com</div>
+                             <div id="mail_4" class="manyemail">@sina.com</div>
+                             <div id="mail_5" class="manyemail">@sina.cn</div>
+                             <div id="mail_6" class="manyemail">@hotmail.com</div>
+                             <div id="mail_7" class="manyemail">@gmail.com</div>
+                             <div id="mail_8" class="manyemail">@sohu.cn</div>
+                             <div id="mail_9" class="manyemail">@yahoo.cn</div>
+                             <div id="mail_10" class="manyemail">@139.cn</div>
+                        </div>
+                        <div id="emailtip">
+                        </div>
+                  <div class="note">
+                            ���û�����䣬�������<a href="#">�˺�ע��</a></div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            �������룺</label>
+                        <div class="input">
+                            <input class="txt" type="password" name="txtpassword"></div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            ��&nbsp&nbsp&nbsp&nbsp����</label>
+                        <div class="input">
+                            <input class="txt" type="text" name="txtname"></div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            ��&nbsp&nbsp&nbsp&nbsp��</label>
+                        <div class="check">
+                            <input type="radio" value="male" name="sex" />&nbsp��&nbsp &nbsp &nbsp &nbsp &nbsp<input
+                                type="radio" value="female" name="sex" checked="checked" />&nbspŮ</div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            ��&nbsp&nbsp&nbsp&nbsp�գ�</label>
+                        <div id="birth">
+                            <select name="year">
+                                <option value="choose1">��ѡ��</option>
+                                <option value="1980">1980</option>
+                                <option value="1981">1981</option>
+                                <option value="1982">1982</option>
+                                <option value="1983">1983</option>
+                                <option value="1984">1984</option>
+                                <option value="1985">1985</option>
+                                <option value="1986">1986</option>
+                                <option value="1987">1987</option>
+                                <option value="1988">1988</option>
+                                <option value="1989">1989</option>
+                                <option value="1990">1990</option>
+                                <option value="1991">1991</option>
+                                <option value="1992">1992</option>
+                                <option value="1993">1993</option>
+                                <option value="1994">1994</option>
+                                <option value="1995">1995</option>
+                                <option value="1996">1996</option>
+                                <option value="1997">1997</option>
+                                <option value="1998">1998</option>
+                                <option value="1999">1999</option>
+                                <option value="2000">2000</option>
+                            </select>��
+                            <select name="mounth">
+                                <option value="choose2">--&nbsp</option>
+                                <option value="01">01</option>
+                                <option value="02">02</option>
+                                <option value="03">03</option>
+                                <option value="04">04</option>
+                                <option value="05">05</option>
+                                <option value="06">06</option>
+                                <option value="07">07</option>
+                                <option value="08">08</option>
+                                <option value="09">09</option>
+                                <option value="10">10</option>
+                                <option value="11">11</option>
+                                <option value="12">12</option>
+                            </select>��
+                            <select>
+                                <option value="choose3">--&nbsp</option>
+                                <option value="01">01</option>
+                                <option value="02">02</option>
+                                <option value="03">03</option>
+                                <option value="04">04</option>
+                                <option value="05">05</option>
+                                <option value="06">06</option>
+                                <option value="07">07</option>
+                                <option value="08">08</option>
+                                <option value="09">09</option>
+                                <option value="10">10</option>
+                                <option value="11">11</option>
+                                <option value="12">12</option>
+                                <option value="13">13</option>
+                                <option value="14">14</option>
+                                <option value="15">15</option>
+                                <option value="16">16</option>
+                                <option value="17">17</option>
+                                <option value="18">18</option>
+                                <option value="19">19</option>
+                                <option value="20">20</option>
+                                <option value="21">21</option>
+                                <option value="22">22</option>
+                                <option value="23">23</option>
+                                <option value="24">24</option>
+                                <option value="25">25</option>
+                                <option value="26">26</option>
+                                <option value="27">27</option>
+                                <option value="28">28</option>
+                                <option value="29">29</option>
+                                <option value="30">30</option>
+                                <option value="31">31</option>
+                            </select>��
+                        </div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            ��&nbsp��&nbsp�ڣ�</label>
+                        <div class="check">
+                            <input type="radio" value="work" name="job" />&nbsp�ڹ���&nbsp &nbsp &nbsp<input type="radio"
+                                value="school">&nbsp����ѧ</div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            ��&nbspס&nbsp�أ�</label>
+                        <div id="address">
+                            <select id="address_select" name="address">
+                                <option value="jinan">����</option>
+                            </select></div>
+                    </li>
+                    <li>
+                        <div id="agree">
+                            <input id="checkedbox" type="checkbox" name="agree" checked="checked">&nbspͬ��<a href="#">��������������</a></div>
+                    </li>
+                    <li>
+                        <div id="button">
+                            <input id="submit" type="submit" value="����ע��" /></div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="right">
+            <b>���ǿ������û���<a href="#">ֱ�ӵ�¼</a></b>
+            <p class="right_note">
+                ʹ�ú�����վ�˺ŵ�¼</p>
+            <div id="pic">
+                <a href="#">
+                    <img class="image" src="images/p2.jpg" alt="ͼ��"></a> <a href="#">
+                        <img class="image" src="images/p3.jpg" alt="ͼ��"></a> <a href="#">
+                            <img class="image" src="images/p4.jpg" alt="ͼ��"></a> <a href="#">
+                                <img class="image" src="images/p5.jpg" alt="ͼ��"></a>
+            </div>
+            <div class="line">
+            </div>
+            <div id="words">
+                <p id="words_h">
+                    ������</p>
+                <p class="words_p">
+                    ƽ��ÿ��ӵ��<span class="words_span">80</span>λ����</p>
+                <p class="words_p">
+                    ÿ�죬ƽ��ÿ���ϴ�<span class="words_span">10</span>����Ƭ</p>
+                <p class="words_p">
+                    ÿ�죬��<span class="words_span">1000��</span>�λ����ں��Ѽ俪�ĵط�����</p>
+                <p class="words_p">
+                    �й��˶�<span class="words_span">�罻����</span>�������˽⣬�����￪ʼ</p>
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+        <div id="footer_first">
+            <div class="footer1_left">
+                <a class="footer1left_a" href="#">��������</a> <a class="footer1left_a" href="#">�ֻ�����</a>
+                <a class="footer1left_a" href="#">����ƽ̨</a> <a class="footer1left_a" href="#">Ӧ������</a>
+                <a class="footer1left_a" href="#">�������</a> <a class="footer1left_a" href="#">������Ƹ</a>
+                <a class="footer1left_a" href="#">�ͷ�</a> <a class="footer1left_a" href="#">����</a>
+            </div>
+            <div class="footer1_right">
+                c2012 ������.
+            </div>
+        </div>
+        <div id="footer_second">
+            <span class="footer2_one">������������Ϣ�������޹�˾�� ������[2009]157��(��)</span> <span class="footer2_two">
+                <a style="color: rgb(153,153,153);" href="#">��ICP֤080482��</a></span> <span class="footer2_two">
+                    ����������1100003��</span> <span class="footer2_two">(��)-�Ǿ�Ӫ��-2009-0009</span>
+            <span class="footer2_two"><a style="color: rgb(153,153,153);" href="#">δ����ҳ��໤</a></span>
+        </div>
+    </div>
+    </form>
+</body>
+</html>
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
new file mode 100644
index 0000000..89c03cb
--- /dev/null
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
@@ -0,0 +1,29 @@
+.tipFormat {
+padding: 2px 6px;
+color: #333;
+background-color: #FFFFCD;
+border: 1px solid #DBDBDB;
+position: absolute;
+left: 300px;
+top: 0;
+width: 178px;
+}
+.autoemailstyle
+{
+	width:230px;
+	height:210px;
+	border:1px solid black;
+	float:right;
+	position:absolute;
+	left:67px;
+	top:26px;
+	background-color:#ffffff;
+	display:none;
+}
+.manyemail
+{
+	font-size:12px;
+	color: rgb(153, 153, 153);
+    font-family: Arial;
+	height:19px;
+}
\ No newline at end of file

From ecd3383711fadd5a93103730d66472c138c765d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Sat, 15 Dec 2012 10:13:47 +0800
Subject: [PATCH 02/10] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/kaixinCSS.html               | 72 +++++++++----------
 .../zhangguodong/validate.css                 |  1 +
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
index 9899982..a3ce197 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
@@ -62,13 +62,13 @@
 	var e=document.getElementById("email");
 	window.addEvent(e,'blur',blurFn);  //��email��һ���¼�
 	window.addEvent(e,'focus',focusFn);
-	e.addEventListener('keypress',autoemailshow,false);
-	e.addEventListener('blur',autoemailhide,false);
-	e.addEventListener('keyup',writeEmail,false);  //����һ���ַ�ʱ������writeemail
-	var mail_1 =document.getElementById("mail_1");
-	mail_1.addEventListener('mouseover',mailmouseover,false);
-	mail_1.addEventListener('mouseout',mailmouseout,false);
-	mail_1.addEventListener('click',writeontext,false);
+	window.addEvent(e,'keypress',autoemailshow);
+	window.addEvent(e,'blur',autoemailhide);
+	window.addEvent(e,'keyup',writeEmail); //����һ���ַ�ʱ������writeemail
+	var mail1 =document.getElementById("mail1");
+	window.addEvent(mail1,'mouseover',mailmouseover);
+	window.addEvent(mail1,'mouseout',mailmouseout);
+	window.addEvent(mail1,'click',writeOnText);
 	/* ��ʱע����
 	var n=document.getElementById("name");
 	window.addEvent(n,'blur',blurFn);
@@ -90,36 +90,36 @@
 	 var ae=document.getElementById("autoemail");
 	 ae.style.display='none';
  }
- function writeontext()
+ function writeOnText()
  {
-     alert("��ִ��");
+	 alert("����ִ��");
      var emailtext=document.getElementById("email");
-     emailtextvalue.value=document.getElementById("mail_1").innerHTML;
+     emailtext.value=document.getElementById("mail1").innerHTML;
  }
  function mailmouseover()
  {
-     mail_1=document.getElementById("mail_1");
-	 mail_1.style.backgroundColor="#f4f4f4";
+    var mail=document.getElementById("mail1");
+    mail.style.backgroundColor="#f4f4f4";
  }
  function mailmouseout()
  {
-     mail_1=document.getElementById("mail_1");
-	 mail_1.style.backgroundColor="#FFFFFF";
+     var mail=document.getElementById("mail1");
+	 mail.style.backgroundColor="#FFFFFF";
  }
- 
+
  function writeEmail()
  {
 	 var emailtextvalue=document.getElementById("email").value;
-	 document.getElementById("mail_1").innerHTML=emailtextvalue+"@qq.com";
-	 document.getElementById("mail_2").innerHTML=emailtextvalue+"@126.com";
-	 document.getElementById("mail_3").innerHTML=emailtextvalue+"@163.com";
-	 document.getElementById("mail_4").innerHTML=emailtextvalue+"@sina.com";
-	 document.getElementById("mail_5").innerHTML=emailtextvalue+"@sina.cn";
-	 document.getElementById("mail_6").innerHTML=emailtextvalue+"@hotmail.com";
-	 document.getElementById("mail_7").innerHTML=emailtextvalue+"@gmail.com";
-	 document.getElementById("mail_8").innerHTML=emailtextvalue+"@sohu.cn";
-	 document.getElementById("mail_9").innerHTML=emailtextvalue+"@yahoo.cn";
-	 document.getElementById("mail_10").innerHTML=emailtextvalue+"@139.cn";
+	 document.getElementById("mail1").innerHTML=emailtextvalue+"@qq.com";
+	 document.getElementById("mail2").innerHTML=emailtextvalue+"@126.com";
+	 document.getElementById("mail3").innerHTML=emailtextvalue+"@163.com";
+	 document.getElementById("mail4").innerHTML=emailtextvalue+"@sina.com";
+	 document.getElementById("mail5").innerHTML=emailtextvalue+"@sina.cn";
+	 document.getElementById("mail6").innerHTML=emailtextvalue+"@hotmail.com";
+	 document.getElementById("mail7").innerHTML=emailtextvalue+"@gmail.com";
+	 document.getElementById("mail8").innerHTML=emailtextvalue+"@sohu.cn";
+	 document.getElementById("mail9").innerHTML=emailtextvalue+"@yahoo.cn";
+	 document.getElementById("mail10").innerHTML=emailtextvalue+"@139.cn";
  }
  function blurFn()
  {
@@ -188,23 +188,23 @@ <h2>
             </div>
             <div>
                 <ul>
-                    <li   style="position:relative">
+                    <li style="position:relative">
                         <label class="ultit">
                             �������䣺</label>
                         <div class="input">
                             <input class="txt" type="text" id="email" name="" /></div>
                         <div id="autoemail" class="autoemailstyle">
                              <div class="manyemail">��ѡ�����������</div>
-                             <div id="mail_1" class="manyemail">@qq.com</div>
-                             <div id="mail_2" class="manyemail">@126.com</div>
-                             <div id="mail_3" class="manyemail">@163.com</div>
-                             <div id="mail_4" class="manyemail">@sina.com</div>
-                             <div id="mail_5" class="manyemail">@sina.cn</div>
-                             <div id="mail_6" class="manyemail">@hotmail.com</div>
-                             <div id="mail_7" class="manyemail">@gmail.com</div>
-                             <div id="mail_8" class="manyemail">@sohu.cn</div>
-                             <div id="mail_9" class="manyemail">@yahoo.cn</div>
-                             <div id="mail_10" class="manyemail">@139.cn</div>
+                             <div id="mail1" class="manyemail">@qq.com</div>
+                             <div id="mail2" class="manyemail">@126.com</div>
+                             <div id="mail3" class="manyemail">@163.com</div>
+                             <div id="mail4" class="manyemail">@sina.com</div>
+                             <div id="mail5" class="manyemail">@sina.cn</div>
+                             <div id="mail6" class="manyemail">@hotmail.com</div>
+                             <div id="mail7" class="manyemail">@gmail.com</div>
+                             <div id="mail8" class="manyemail">@sohu.cn</div>
+                             <div id="mail9" class="manyemail">@yahoo.cn</div>
+                             <div id="mail10" class="manyemail">@139.cn</div>
                         </div>
                         <div id="emailtip">
                         </div>
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
index 89c03cb..61cb850 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
@@ -26,4 +26,5 @@ width: 178px;
 	color: rgb(153, 153, 153);
     font-family: Arial;
 	height:19px;
+	cursor: pointer;
 }
\ No newline at end of file

From 5af3799e6e5f9fcf4cbdeb9c47c5d224b70676b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Sat, 15 Dec 2012 12:14:33 +0800
Subject: [PATCH 03/10] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/kaixinCSS.html               | 48 ++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
index a3ce197..49d107e 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
@@ -69,14 +69,13 @@
 	window.addEvent(mail1,'mouseover',mailmouseover);
 	window.addEvent(mail1,'mouseout',mailmouseout);
 	window.addEvent(mail1,'click',writeOnText);
-	/* ��ʱע����
-	var n=document.getElementById("name");
+/*	var n=document.getElementById("name");
 	window.addEvent(n,'blur',blurFn);
 	window.addEvent(n,'focus',focusFn);
+	*/
 	var p=document.getElementById("password");
 	window.addEvent(p,'blur',blurFn);
 	window.addEvent(p,'focus',focusFn);
-	*/
  }
  
  function autoemailshow()
@@ -146,7 +145,43 @@
  function checkFormat(o)
  {
 	// o ��Ҫ����ʽ��dom����
-	return true;
+//	alert(o.id);
+    var check=o.value.toString();
+	switch(o.id)
+	{
+		case "email":
+		{
+           if(check.indexOf("@qq.com")>0)
+	           return false;
+	      else if(check.indexOf("@126.com")>0)
+	           return false;
+	      else if(check.indexOf("@163.com")>0)
+	           return false;
+	      else if(check.indexOf("@sina.com")>0)
+	           return false;
+	      else if(check.indexOf("@hotmail.com")>0)
+	           return false;
+	      else if(check.indexOf("@gmail.com")>0)
+	           return false;
+	      else if(check.indexOf("@sohu.cn")>0)
+	           return false;
+	      else if(check.indexOf("@yahoo.cn")>0)
+	           return false;
+	      else if(check.indexOf("@139.cn")>0)
+	           return false;
+	      else
+	           return true;
+		}
+		break;
+		case "password":
+		{
+			if(check.length<6)
+			return true;
+			else
+			return false;
+		}
+		break;
+	}
  }
  function focusFn()
  {
@@ -211,11 +246,12 @@ <h2>
                   <div class="note">
                             ���û�����䣬�������<a href="#">�˺�ע��</a></div>
                     </li>
-                    <li>
+                    <li style="position:relative">
                         <label class="ultit">
                             �������룺</label>
                         <div class="input">
-                            <input class="txt" type="password" name="txtpassword"></div>
+                            <input class="txt" type="password" id="password" name=""></div>
+                        <div id="passwordtip"></div>
                     </li>
                     <li>
                         <label class="ultit">

From 50ad9ee2e1683ba9da2db239df52640b4061b85e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Sun, 16 Dec 2012 09:33:50 +0800
Subject: [PATCH 04/10] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/kaixinCSS.html               | 29 ++++++++++++++-----
 .../zhangguodong/validate.css                 |  3 +-
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
index 49d107e..6578728 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
@@ -59,20 +59,20 @@
 
 function prepareTip()
  {
+	var bd=document.getElementsByTagName('body')[0];    //ȡ��body����
+	window.addEvent(bd,'click',autoemailhide);   //�ر�ע��ð��ִ�У���ִ���Ǹ�С��div��click�¼���Ȼ����ִ��body��onclick
 	var e=document.getElementById("email");
 	window.addEvent(e,'blur',blurFn);  //��email��һ���¼�
 	window.addEvent(e,'focus',focusFn);
 	window.addEvent(e,'keypress',autoemailshow);
-	window.addEvent(e,'blur',autoemailhide);
 	window.addEvent(e,'keyup',writeEmail); //����һ���ַ�ʱ������writeemail
 	var mail1 =document.getElementById("mail1");
 	window.addEvent(mail1,'mouseover',mailmouseover);
 	window.addEvent(mail1,'mouseout',mailmouseout);
 	window.addEvent(mail1,'click',writeOnText);
-/*	var n=document.getElementById("name");
+	var n=document.getElementById("name");
 	window.addEvent(n,'blur',blurFn);
 	window.addEvent(n,'focus',focusFn);
-	*/
 	var p=document.getElementById("password");
 	window.addEvent(p,'blur',blurFn);
 	window.addEvent(p,'focus',focusFn);
@@ -86,12 +86,13 @@
  }
  function autoemailhide()
  {
+	 
 	 var ae=document.getElementById("autoemail");
 	 ae.style.display='none';
  }
  function writeOnText()
  {
-	 alert("����ִ��");
+	    //�ر�ע�⣡�������ʱ���ı����ʧȥ���㣬�����autoemail�Զ�����
      var emailtext=document.getElementById("email");
      emailtext.value=document.getElementById("mail1").innerHTML;
  }
@@ -169,13 +170,23 @@
 	           return false;
 	      else if(check.indexOf("@139.cn")>0)
 	           return false;
+		  else if(check.length==0)       //���ı���Ϊ��ʱҲ����ʾtip
+		       return false;
 	      else
 	           return true;
 		}
 		break;
 		case "password":
 		{
-			if(check.length<6)
+			if(check.length<6&&check.length!=0)
+			return true;
+			else
+			return false;
+		}
+		break;
+		case "name":
+		{  
+			if(/.*[u4e00-u9fa5]+.*$/.test(o.value))  //���������ʽ�ж��ı������Ƿ�������
 			return true;
 			else
 			return false;
@@ -203,6 +214,7 @@
  }
 	</script>
 </head>
+<!-- -->
 <body onLoad="prepareTip();">
     <form method="post">
     <div class="header">
@@ -253,11 +265,12 @@ <h2>
                             <input class="txt" type="password" id="password" name=""></div>
                         <div id="passwordtip"></div>
                     </li>
-                    <li>
+                    <li style="position:relative">
                         <label class="ultit">
                             ��&nbsp&nbsp&nbsp&nbsp����</label>
                         <div class="input">
-                            <input class="txt" type="text" name="txtname"></div>
+                            <input class="txt" type="text" id="name" name=""></div>
+                        <div id="nametip"></div>
                     </li>
                     <li>
                         <label class="ultit">
@@ -357,7 +370,7 @@ <h2>
                             ��&nbspס&nbsp�أ�</label>
                         <div id="address">
                             <select id="address_select" name="address">
-                                <option value="jinan">����</option>
+                               <option value="jinan">����</option> 
                             </select></div>
                     </li>
                     <li>
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
index 61cb850..8eb300e 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
@@ -17,8 +17,9 @@ width: 178px;
 	position:absolute;
 	left:67px;
 	top:26px;
-	background-color:#ffffff;
+	background-color:#FFFFFF;
 	display:none;
+	z-index:3;
 }
 .manyemail
 {

From 74caf8d98b490980b3f66f8fa6ffe76c64f411e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Sun, 16 Dec 2012 12:48:45 +0800
Subject: [PATCH 05/10] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/images/right.gif             | Bin 0 -> 208 bytes
 .../zhangguodong/kaixinCSS.html               |  95 ++++++++++++++----
 .../zhangguodong/validate.css                 |   7 ++
 3 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/right.gif

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/right.gif b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/images/right.gif
new file mode 100644
index 0000000000000000000000000000000000000000..44abc2e0e0025f02c601bd467931d8c0bf096a64
GIT binary patch
literal 208
zcmZ?wbhEHb6k_0KI3mEHxmDh5r_QHeAJ;uz{p8!@>@z6=hdrG4SzZ5lb>Y3al^2Un
zzBxYSR{x$CJKL@{#vKp)|NlP&DM0Zj3nK%A0D}%l6Ua^mR$m2`z9$+Y4vJHBT4Wk7
zZE_Yk|CE7&&F@vi;Vu=0CuIySo(UW(ZVm?)q~5UQ;E2w0yTG>R@HM8+m>&u}n;z?|
UVmrJ~Z^1!1Rj$%UmMjd`0KHX2_y7O^

literal 0
HcmV?d00001

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
index 6578728..9d5b00c 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
@@ -59,17 +59,25 @@
 
 function prepareTip()
  {
-	var bd=document.getElementsByTagName('body')[0];    //ȡ��body����
-	window.addEvent(bd,'click',autoemailhide);   //�ر�ע��ð��ִ�У���ִ���Ǹ�С��div��click�¼���Ȼ����ִ��body��onclick
+	 //ȡ��body����
+	var bd=document.getElementsByTagName('body')[0];  
+	//�ر�ע��ð��ִ�У���ִ���Ǹ�С��div��click�¼���Ȼ����ִ��body��onclick
+	window.addEvent(bd,'click',autoemailhide);   
 	var e=document.getElementById("email");
-	window.addEvent(e,'blur',blurFn);  //��email��һ���¼�
+	 //��email��һ���¼�
+	window.addEvent(e,'blur',blurFn); 
 	window.addEvent(e,'focus',focusFn);
 	window.addEvent(e,'keypress',autoemailshow);
-	window.addEvent(e,'keyup',writeEmail); //����һ���ַ�ʱ������writeemail
-	var mail1 =document.getElementById("mail1");
-	window.addEvent(mail1,'mouseover',mailmouseover);
-	window.addEvent(mail1,'mouseout',mailmouseout);
-	window.addEvent(mail1,'click',writeOnText);
+	 //����һ���ַ�ʱ������writeemail
+	window.addEvent(e,'keyup',writeEmail);
+	for(i=1;i<11;i++)
+	{
+		  //�����е�С��������ʾ�����¼�
+		var mail=document.getElementById("mail"+i);       
+		window.addEvent(mail,'mouseover',mailmouseover);
+	    window.addEvent(mail,'mouseout',mailmouseout);
+	    window.addEvent(mail,'click',writeOnText);
+	}
 	var n=document.getElementById("name");
 	window.addEvent(n,'blur',blurFn);
 	window.addEvent(n,'focus',focusFn);
@@ -85,8 +93,7 @@
 	ae.style.display='block';
  }
  function autoemailhide()
- {
-	 
+ { 
 	 var ae=document.getElementById("autoemail");
 	 ae.style.display='none';
  }
@@ -94,17 +101,19 @@
  {
 	    //�ر�ע�⣡�������ʱ���ı����ʧȥ���㣬�����autoemail�Զ�����
      var emailtext=document.getElementById("email");
-     emailtext.value=document.getElementById("mail1").innerHTML;
+     emailtext.value=this.innerHTML;
+	 var emailtip=document.getElementById("emailtip");
+	 emailtip.style.display="none";      //�����ȫ�������Ҫ���ı��������ʾ�����أ���
  }
  function mailmouseover()
  {
-    var mail=document.getElementById("mail1");
-    mail.style.backgroundColor="#f4f4f4";
+   // var mail=document.getElementById(m.id);
+    this.style.backgroundColor="#f4f4f4";
  }
  function mailmouseout()
  {
-     var mail=document.getElementById("mail1");
-	 mail.style.backgroundColor="#FFFFFF";
+    // var mail=document.getElementById("mail1");
+	 this.style.backgroundColor="#FFFFFF";
  }
 
  function writeEmail()
@@ -141,7 +150,50 @@
 	t.hideTip();
 	//����д����ʱ���� error tip
 	if(checkFormat(this))
+	{
+	hiderightimg(this.id);
 	t.showTip();
+	}
+	else
+	showrightimg(this.id);
+	//���ı����е�����Ϊ��ʱ��Ҳ����ʾ��ɫ�ĶԺţ�
+	if(this.value.toString().length==0)
+	hiderightimg(this.id);
+ }
+ function showrightimg(id)
+ {
+	 var img
+	 switch(id)
+	 {
+		 case "email":
+			 img=document.getElementById("rightimgemail");
+			 break;
+		 case "password":
+		     img=document.getElementById("rightimgpassword");
+			 break;
+		 case "name":
+		     img=document.getElementById("rightimgname");
+		     break;
+	 }
+	 img.style.display="inline";
+ }
+ function hiderightimg(id)
+ {
+	// alert("��ִ��");
+	 var img
+	 switch(id)
+	 {
+		 case "email":
+			 img=document.getElementById("rightimgemail");
+			 break;
+		 case "password":
+		     img=document.getElementById("rightimgpassword");
+			 break;
+		 case "name":
+		     img=document.getElementById("rightimgname");
+		     break;
+	 }
+	 img.style.display="none";
  }
  function checkFormat(o)
  {
@@ -170,7 +222,8 @@
 	           return false;
 	      else if(check.indexOf("@139.cn")>0)
 	           return false;
-		  else if(check.length==0)       //���ı���Ϊ��ʱҲ����ʾtip
+			     //���ı���Ϊ��ʱҲ����ʾtip
+		  else if(check.length==0)     
 		       return false;
 	      else
 	           return true;
@@ -214,7 +267,6 @@
  }
 	</script>
 </head>
-<!-- -->
 <body onLoad="prepareTip();">
     <form method="post">
     <div class="header">
@@ -239,7 +291,8 @@ <h2>
                         <label class="ultit">
                             �������䣺</label>
                         <div class="input">
-                            <input class="txt" type="text" id="email" name="" /></div>
+                            <input class="txt" type="text" id="email" name="" />
+                            <img id="rightimgemail" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
                         <div id="autoemail" class="autoemailstyle">
                              <div class="manyemail">��ѡ�����������</div>
                              <div id="mail1" class="manyemail">@qq.com</div>
@@ -262,14 +315,16 @@ <h2>
                         <label class="ultit">
                             �������룺</label>
                         <div class="input">
-                            <input class="txt" type="password" id="password" name=""></div>
+                            <input class="txt" type="password" id="password" name="">
+                            <img id="rightimgpassword" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
                         <div id="passwordtip"></div>
                     </li>
                     <li style="position:relative">
                         <label class="ultit">
                             ��&nbsp&nbsp&nbsp&nbsp����</label>
                         <div class="input">
-                            <input class="txt" type="text" id="name" name=""></div>
+                            <input class="txt" type="text" id="name" name="">
+                            <img id="rightimgname" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
                         <div id="nametip"></div>
                     </li>
                     <li>
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
index 8eb300e..16b74ce 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
@@ -28,4 +28,11 @@ width: 178px;
     font-family: Arial;
 	height:19px;
 	cursor: pointer;
+}
+.rightStyle
+{
+	position:absolute;
+	left:305px;
+	top:5px;
+	display:none;
 }
\ No newline at end of file

From 553661d8062907c0cf53f3572d8a0600d4e3684f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Sun, 16 Dec 2012 17:08:49 +0800
Subject: [PATCH 06/10] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81?=
 =?UTF-8?q?=E5=85=A8=E9=83=A8=E5=AE=8C=E6=88=90=EF=BC=8C=E5=B0=B1=E5=B7=AE?=
 =?UTF-8?q?=E4=B8=AA=E5=AF=BC=E8=88=AA=E6=A0=8F=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/kaixinCSS.html               | 150 ++++++++++++++----
 .../zhangguodong/validate.css                 |  54 +++++++
 2 files changed, 173 insertions(+), 31 deletions(-)

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
index 9d5b00c..ffaa116 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
@@ -8,19 +8,23 @@
     <meta name="Description" content="">
     <link rel="stylesheet" href="css/main.css" type="text/css"></link>
     <link rel="stylesheet" href="validate.css" type="text/css"></link>
+
     <script>
-	window.addEvent =function(element,event,fn){   //fn��ʾ������  
+	 //fn��ʾ������  
+	window.addEvent =function(element,event,fn){  
   if(element.addEventListener)
   {
 	  element.addEventListener(event,fn,false);
 	  
   }
   else if(element.attachEvent){
-     element.attachEvent("on"+event, function(){ fn.call(element) });//��һ��������onclick��,��onload���ȵȣ��ڶ��������Ǿ�����¼�����
+	  //��һ��������onclick��,��onload���ȵȣ��ڶ��������Ǿ�����¼�����
+     element.attachEvent("on"+event, function(){ fn.call(element) });
      
    }
 }
-function tip(title,isInfo,id)   //isinfo��ʾ�ı����е������Ƿ����,������ʾʱ�Ƿ��̾��ͼƬ
+ //isinfo��ʾ�ı����е������Ƿ����,������ʾʱ�Ƿ��̾��ͼƬ
+function tip(title,isInfo,id)  
 {
   this.title=title;
   this.isInfo=isInfo;
@@ -84,8 +88,36 @@
 	var p=document.getElementById("password");
 	window.addEvent(p,'blur',blurFn);
 	window.addEvent(p,'focus',focusFn);
+	//��ѡ����а��¼�
+	var citytext=document.getElementById("city");
+	window.addEvent(citytext,'click',showcity);
+	var closebutton=document.getElementById("closecity");
+	window.addEvent(closebutton,'click',hidecity);
+    //�����еij��а��¼�
+	for(j=1;j<36;j++)
+	{
+		var selectcity=document.getElementById("city"+j);
+	    window.addEvent(selectcity,'click',writeOnCity);
+	}
+ }
+ function writeOnCity()
+ {
+	 var citytext=document.getElementById("city");
+	 citytext.value=this.firstChild.nodeValue;
+	 hidecity();
+	 var image=document.getElementById("rightimgcity");
+	 image.style.display="inline";
+ }
+ function showcity()
+ {
+	 var citydiv=document.getElementById("selctcity");
+	 citydiv.style.display="block";
+ }
+ function hidecity()
+ {
+	 var citydiv=document.getElementById("selctcity");
+	 citydiv.style.display="none";
  }
- 
  function autoemailshow()
  {
 	
@@ -103,7 +135,8 @@
      var emailtext=document.getElementById("email");
      emailtext.value=this.innerHTML;
 	 var emailtip=document.getElementById("emailtip");
-	 emailtip.style.display="none";      //�����ȫ�������Ҫ���ı��������ʾ�����أ���
+	  //�����ȫ�������Ҫ���ı��������ʾ�����أ���
+	 emailtip.style.display="none";     
  }
  function mailmouseover()
  {
@@ -238,8 +271,8 @@
 		}
 		break;
 		case "name":
-		{  
-			if(/.*[u4e00-u9fa5]+.*$/.test(o.value))  //���������ʽ�ж��ı������Ƿ�������
+		{   //���������ʽ�ж��ı������Ƿ�������
+			if(/.*[u4e00-u9fa5]+.*$/.test(o.value)) 
 			return true;
 			else
 			return false;
@@ -265,9 +298,10 @@
 	var t=new tip(title,true,this.id+"tip");
 	t.showTip();
  }
-	</script>
+    </script>
+
 </head>
-<body onLoad="prepareTip();">
+<body onload="prepareTip();">
     <form method="post">
     <div class="header">
         <div class="header_pic">
@@ -287,45 +321,58 @@ <h2>
             </div>
             <div>
                 <ul>
-                    <li style="position:relative">
+                    <li style="position: relative">
                         <label class="ultit">
                             �������䣺</label>
                         <div class="input">
                             <input class="txt" type="text" id="email" name="" />
                             <img id="rightimgemail" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
                         <div id="autoemail" class="autoemailstyle">
-                             <div class="manyemail">��ѡ�����������</div>
-                             <div id="mail1" class="manyemail">@qq.com</div>
-                             <div id="mail2" class="manyemail">@126.com</div>
-                             <div id="mail3" class="manyemail">@163.com</div>
-                             <div id="mail4" class="manyemail">@sina.com</div>
-                             <div id="mail5" class="manyemail">@sina.cn</div>
-                             <div id="mail6" class="manyemail">@hotmail.com</div>
-                             <div id="mail7" class="manyemail">@gmail.com</div>
-                             <div id="mail8" class="manyemail">@sohu.cn</div>
-                             <div id="mail9" class="manyemail">@yahoo.cn</div>
-                             <div id="mail10" class="manyemail">@139.cn</div>
+                            <div class="manyemail">
+                                ��ѡ�����������</div>
+                            <div id="mail1" class="manyemail">
+                                @qq.com</div>
+                            <div id="mail2" class="manyemail">
+                                @126.com</div>
+                            <div id="mail3" class="manyemail">
+                                @163.com</div>
+                            <div id="mail4" class="manyemail">
+                                @sina.com</div>
+                            <div id="mail5" class="manyemail">
+                                @sina.cn</div>
+                            <div id="mail6" class="manyemail">
+                                @hotmail.com</div>
+                            <div id="mail7" class="manyemail">
+                                @gmail.com</div>
+                            <div id="mail8" class="manyemail">
+                                @sohu.cn</div>
+                            <div id="mail9" class="manyemail">
+                                @yahoo.cn</div>
+                            <div id="mail10" class="manyemail">
+                                @139.cn</div>
                         </div>
                         <div id="emailtip">
                         </div>
-                  <div class="note">
+                        <div class="note">
                             ���û�����䣬�������<a href="#">�˺�ע��</a></div>
                     </li>
-                    <li style="position:relative">
+                    <li style="position: relative">
                         <label class="ultit">
                             �������룺</label>
                         <div class="input">
                             <input class="txt" type="password" id="password" name="">
                             <img id="rightimgpassword" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
-                        <div id="passwordtip"></div>
+                        <div id="passwordtip">
+                        </div>
                     </li>
-                    <li style="position:relative">
+                    <li style="position: relative">
                         <label class="ultit">
                             ��&nbsp&nbsp&nbsp&nbsp����</label>
                         <div class="input">
                             <input class="txt" type="text" id="name" name="">
                             <img id="rightimgname" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
-                        <div id="nametip"></div>
+                        <div id="nametip">
+                        </div>
                     </li>
                     <li>
                         <label class="ultit">
@@ -420,13 +467,54 @@ <h2>
                             <input type="radio" value="work" name="job" />&nbsp�ڹ���&nbsp &nbsp &nbsp<input type="radio"
                                 value="school">&nbsp����ѧ</div>
                     </li>
-                    <li>
+                    <li style="position: relative">
                         <label class="ultit">
-                            ��&nbspס&nbsp�أ�</label>
+                            ��&nbspס&nbsp�أ�
+                        </label>
                         <div id="address">
-                            <select id="address_select" name="address">
-                               <option value="jinan">����</option> 
-                            </select></div>
+                            <input type="text" class="cityStyle" value="����" id="city" name=""></input>
+                            <img id="rightimgcity" class="rightStyle" src="images/right.gif" alt="��ȷ">
+                        </div>
+                        <div class="cityBg" id="selctcity">
+                            <div id="provincebox" class="cbox">
+                                <span><a class="sl2" id="city1">���� </a></span>
+                                <span><a class="sl2" id="city2">�Ϻ� </a></span>
+                                <span><a class="sl2" id="city3">��� </a></span>
+                                <span><a class="sl2" id="city4">���� </a></span>
+                                <span><a class="sl2" id="city5">������ </a></span>
+                                <span><a class="sl2" id="city6">���� </a></span>
+                                <span><a class="sl2" id="city7">���� </a></span>
+                                <span><a class="sl2" id="city8">ɽ�� </a></span>
+                                <span><a class="sl2" id="city9">ɽ�� </a></span>
+                                <span><a class="sl2" id="city10">���� </a></span>
+                                <span><a class="sl2" id="city11">�ӱ� </a></span>
+                                <span><a class="sl2" id="city12">���� </a></span>
+                                <span><a class="sl2" id="city13">���� </a></span>
+                                <span><a class="sl2" id="city14">���� </a></span>
+                                <span><a class="sl2" id="city15">���� </a></span>
+                                <span><a class="sl2" id="city16">���� </a></span>
+                                <span><a class="sl2" id="city17">���� </a></span>
+                                <span><a class="sl2" id="city18">�㶫 </a></span>
+                                <span><a class="sl2" id="city19">���� </a></span>
+                                <span><a class="sl2" id="city20">���� </a></span>
+                                <span><a class="sl2" id="city21">���� </a></span>
+                                <span><a class="sl2" id="city22">�Ĵ� </a></span>
+                                <span><a class="sl2" id="city23">���ɹ� </a></span>
+                                <span><a class="sl2" id="city24">���� </a></span>
+                                <span><a class="sl2" id="city25">���� </a></span>
+                                <span><a class="sl2" id="city26">�ຣ </a></span>
+                                <span><a class="sl2" id="city27">���� </a></span>
+                                <span><a class="sl2" id="city28">�½� </a></span>
+                                <span><a class="sl2" id="city29">����</a></span>
+                                <span><a class="sl2" id="city30">�㽭 </a></span>
+                                <span><a class="sl2" id="city31">���� </a></span>
+                                <span><a class="sl2" id="city32">��� </a></span>
+                                <span><a class="sl2" id="city33">̨�� </a></span>
+                                <span><a class="sl2" id="city34">���� </a></span>
+                                <span><a class="sl2" id="city35">���� </a></span>
+                            </div>
+                            <input type="button" class="closebutton" value="�ر�" id="closecity" />
+                        </div>
                     </li>
                     <li>
                         <div id="agree">
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
index 16b74ce..721bfaf 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
@@ -34,5 +34,59 @@ width: 178px;
 	position:absolute;
 	left:305px;
 	top:5px;
+    display:none;
+}
+.cityStyle
+{
+	border-style: solid;
+    border-color: #BBBBBB;
+    border-width: 1px;
+    height: 25px;
+    width: 150px;
+	cursor:pointer;
+}
+.cityBg
+{
+	border: 1px solid rgb(201, 201, 201);
+	width:430px;
+	height:150px;
+	background-color:rgb(247, 247, 247);
+	position:absolute;
+	left:57px;
+	top:32px;
 	display:none;
+}
+.cbox
+{
+	border:1px solid rgb(200,200,200);
+	background-color: rgb(255, 255, 255);
+	color: rgb(0, 94, 172)
+    font-family: Arial;
+    font-size: 12px;
+    line-height: 21.6px;
+	margin-top:17px;
+	margin-left:17px;
+	margin-right:17px;
+	cursor:pointer;
+	height:90px;
+}
+.sl2
+{
+	color: rgb(51, 102, 153);
+	line-height: 21.6px;
+	margin-left:5px;
+}
+.closebutton
+{
+    background-color: rgb(221, 221, 221);
+	border-width: 1px;
+    border-style: solid;
+    border-color: rgb(255, 255, 255) rgb(106, 106, 106) rgb(106, 106, 106) rgb(255, 255, 255);
+	height:25px;
+	width:35px;
+	cursor:pointer;
+	text-align: center;
+	float:right;
+	margin-right:17px;
+	margin-top:7px;
 }
\ No newline at end of file

From 62f2ae8ad6576669eeb7234997f7b6ebb848325f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Sun, 16 Dec 2012 22:04:24 +0800
Subject: [PATCH 07/10] =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=AC=A1=E7=BB=88?=
 =?UTF-8?q?=E4=BA=8E=E7=BB=88=E4=BA=8E=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=EF=BC=8C=E5=86=8D=E4=BF=AE=E6=94=B9=E4=B8=80=E4=B8=8B=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/css/main.css                 |  4 +-
 .../zhangguodong/kaixinCSS.html               | 56 ++++++++++++++++++-
 .../zhangguodong/validate.css                 | 40 ++++++++++++-
 3 files changed, 95 insertions(+), 5 deletions(-)

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
index 16c2746..42f6087 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
@@ -25,10 +25,12 @@
         .header_t
         {
             float: right;
-            margin-right: 8%;
+            margin-right: 10%;
             font-size: 12px;
             width: 200px;
+			height:41px;
             line-height: 40px;
+			position: relative;
         }
         .headert_a
         {
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
index ffaa116..4548ad8 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
@@ -99,6 +99,45 @@
 		var selectcity=document.getElementById("city"+j);
 	    window.addEvent(selectcity,'click',writeOnCity);
 	}
+	//���������еĵ��������¼�
+	var headdirdiv=document.getElementById("directiondiv");
+	window.addEvent(headdirdiv,'mouseover',dirshow);
+	window.addEvent(headdirdiv,'mouseout',dirhide);
+	//���±ߵĴ�ĵ��������¼���ֹ��������ʧ
+	var direction=document.getElementById("direction");
+	window.addEvent(direction,'mouseover',dirshow);
+	window.addEvent(direction,'mouseout',dirhide);
+	for(i=1;i<10;i++)
+	{
+	var littleDirLeft=document.getElementById("dleft"+i);
+	window.addEvent(littleDirLeft,'mouseover',alterRed);
+	window.addEvent(littleDirLeft,'mouseout',alterBackColor);
+	var littleDirRight=document.getElementById("dright"+i);
+	window.addEvent(littleDirRight,'mouseover',alterRed);
+	window.addEvent(littleDirRight,'mouseout',alterBackColor);
+	}
+ }
+ function alterRed()
+ {
+	 this.style.backgroundColor="rgb(235, 75, 85)";
+ }
+ function alterBackColor()
+ {
+	 this.style.backgroundColor="rgb(250,250,250)";
+ }
+ function dirshow()
+ {
+	 var dir=document.getElementById("direction");
+	 var headdiv=document.getElementById("directiondiv")
+	 headdiv.style.backgroundColor="#F04E58";
+	 dir.style.display="block";
+ }
+ function dirhide()
+ {
+	 var dir=document.getElementById("direction");
+	 var headdiv=document.getElementById("directiondiv")
+	 headdiv.style.backgroundColor="rgb(228, 64, 73)";
+	 dir.style.display="none";
  }
  function writeOnCity()
  {
@@ -309,8 +348,21 @@
                 <img class="picborder" src="images/p1.jpg" alt="kaixinlogo"></a>
         </div>
         <div class="header_t">
-            <a style="color: #FFFFFF;" href="#">ע��</a> <a style="color: #FFFFFF;" href="#">��¼</a>
-            <a style="color: #FFFFFF;" href="#">����</a> <a style="color: #FFFFFF;" href="#">����</a>
+            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">ע��</a></div>
+            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">��¼</a></div>
+            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">����</a></div>
+            <div id="directiondiv" class="dirdivstyle"><a id="headdirection" style="color: #FFFFFF;" href="#">����</a></div>
+            <div id="direction" class="directionstyle">
+                   <div id="dleft1" class="leftdir">�ֻ���</div><div id="dright1" class="rightdir">��Ƭ</div>
+                   <div id="dleft2" class="leftdir">ת��</div><div id="dright2" class="rightdir">����</div>
+                   <div id="dleft3" class="leftdir">ͶƱ</div><div id="dright3" class="rightdir">��Ӱ</div>
+                   <div id="dleft4" class="leftdir">��¼</div><div id="dright4" class="rightdir">��Ƶ</div>
+                   <div id="dleft5" class="leftdir">ר��</div><div id="dright5" class="rightdir">���ļ�Ʒ</div>
+                   <div id="dleft6" class="leftdir">�Ź�</div><div id="dright6" class="rightdir">��ҳ��Ϸ</div>
+                   <div id="dleft7" class="leftdir">С��Ϸ</div><div id="dright7" class="rightdir">�罻��Ϸ</div>
+                   <div id="dleft8" class="leftdir">������ҳ</div><div id="dright8" class="rightdir">����</div>
+                   <div id="dleft9" class="leftdir">��������</div><div id="dright9" class="rightdir">��Ʒ�ۿ�</div>
+            </div>
         </div>
     </div>
     <div class="midd">
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
index 721bfaf..738053c 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
@@ -60,7 +60,7 @@ width: 178px;
 {
 	border:1px solid rgb(200,200,200);
 	background-color: rgb(255, 255, 255);
-	color: rgb(0, 94, 172)
+	color: rgb(0, 94, 172);
     font-family: Arial;
     font-size: 12px;
     line-height: 21.6px;
@@ -74,7 +74,7 @@ width: 178px;
 {
 	color: rgb(51, 102, 153);
 	line-height: 21.6px;
-	margin-left:5px;
+	margin-left:8px;
 }
 .closebutton
 {
@@ -89,4 +89,40 @@ width: 178px;
 	float:right;
 	margin-right:17px;
 	margin-top:7px;
+}
+.dirdivstyle
+{
+	float:left;
+	width :33px;
+	height:41px;
+}
+.directionstyle
+{
+	border:1px solid rgb(201, 201, 201);
+	width:181px;
+	height:253px;
+	position:absolute;
+	left:-40px;
+	top:42px;
+	display:none;
+	cursor:pointer;
+}
+.leftdir
+{
+	width:90px;
+	height:28px;
+	float:left;
+	background-color:rgb(250,250,250);
+	border-right:1px solid rgb(201, 201, 201);
+	text-align:center;
+	line-height:30px;
+}
+.rightdir
+{
+	width:89px;
+	height:28px;
+	float:right;
+	background-color:rgb(250,250,250);
+	text-align:center;
+	line-height:30px;
 }
\ No newline at end of file

From 90358cdf63955796675c0e318dcb62d8f0791929 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Sun, 16 Dec 2012 23:23:12 +0800
Subject: [PATCH 08/10] =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=AC=A1=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A=E5=AE=8C=E6=88=90=EF=BC=8C=E6=9C=89=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E5=86=8D=E4=BC=98=E5=8C=96=E4=B8=80=E4=B8=8B=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=EF=BC=81=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/css/main.css                 |  2 +-
 .../zhangguodong/kaixinCSS.html               | 23 ++++++++++++-------
 .../zhangguodong/validate.css                 | 22 ++++++++++++++----
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
index 42f6087..d53b645 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/main.css
@@ -124,7 +124,7 @@
         li
         {
             float: left;
-            margin-top: 14px;
+            margin-top: 20px;
             width: 100%;
         }
         a:link
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
index 4548ad8..a59e2a3 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
@@ -37,11 +37,18 @@
 	//���ɺ��ʵ�Tip���ڲ�����
     function genTip(tipDomObject,title,isInfo)
 	{
-     tipDomObject.className="tipFormat";     //�ö����cssΪtipFormat
      if(isInfo===false)
-      tipDomObject.innerHTML="<img src='images/error.gif' /><span>"  + title + "</span>";
+	 {
+      tipDomObject.innerHTML="<img src='images/error.gif' style='margin-top:-6px;'/><span>"  + title + "</span>";
+	  //���ı����е����ݴ���ʱ�޸�tip�ı���ɫ��������ɫ
+	 tipDomObject.className="tipFormatFalse";
+	 }
 	 else
+	 {
+		  //�ö����cssΪtipFormat
+	  tipDomObject.className="tipFormatTrue";    
 	  tipDomObject.innerHTML="<span>"+title+"</span>";
+	 }
 	}
 	//������ �����ڴ˴�Ӧ��this
 	//alert(this.title+" in closure");
@@ -208,13 +215,13 @@
 	switch(this.id)
 	{
 	  case "email":
-		   title="�����ʽ����";
+		   title="��Ǹ�ݲ�֧�ָĺ�׺������ע��";
 		   break;
 	  case "password":
-		   title="���벻��";
+		   title="����Ӧ����6-20����ĸ�����ֻ������ַ����";
 		   break;
 	  case "name":
-		   title="����������Ҫ��";
+		   title="����д�����ʵ��������";
 		   break;
 	}
 	var t=new tip(title,false,this.id+"tip");
@@ -325,13 +332,13 @@
 	switch(this.id)
 	{
 	  case "email":
-		   title="����������";
+		   title="����д��Ч�������䣬�Ƽ�ʹ��<span style='color:rgb(211, 37, 3);'>QQ����</span>";
 		   break;
 	  case "password":
-		   title="����������";
+		   title="��6-20����ĸ�����ֻ������ַ����";
 		   break;
 	  case "name":
-		   title="����������";
+		   title="����д�����ʵ��������";
 		   break;
 	}
 	var t=new tip(title,true,this.id+"tip");
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
index 738053c..e614360 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
@@ -1,8 +1,22 @@
-.tipFormat {
+.tipFormatTrue {
 padding: 2px 6px;
-color: #333;
-background-color: #FFFFCD;
-border: 1px solid #DBDBDB;
+color:rgb(153, 153, 153);
+background-color: rgb(249, 249, 249);
+border: 1px solid rgb(221, 221, 221);
+font-family: Arial;
+font-size: 12px;
+position: absolute;
+left: 300px;
+top: 0;
+width: 178px;
+}
+.tipFormatFalse {
+padding: 2px 6px;
+color:rgb(221, 75, 57);
+background-color:rgb(255, 229, 229);
+border: 1px solid rgb(255, 183, 183);
+font-family: Arial;
+font-size: 12px;
 position: absolute;
 left: 300px;
 top: 0;

From 6f90e877b72fb94e9f962b0693cd351193955d67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Sun, 16 Dec 2012 23:28:39 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BD=91=E9=A1=B5?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/kaixinCSS.html               | 637 ------------------
 1 file changed, 637 deletions(-)
 delete mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
deleted file mode 100644
index a59e2a3..0000000
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinCSS.html
+++ /dev/null
@@ -1,637 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>������ </title>
-    <meta name="Generator" content="EditPlus">
-    <meta name="Author" content="">
-    <meta name="Keywords" content="">
-    <meta name="Description" content="">
-    <link rel="stylesheet" href="css/main.css" type="text/css"></link>
-    <link rel="stylesheet" href="validate.css" type="text/css"></link>
-
-    <script>
-	 //fn��ʾ������  
-	window.addEvent =function(element,event,fn){  
-  if(element.addEventListener)
-  {
-	  element.addEventListener(event,fn,false);
-	  
-  }
-  else if(element.attachEvent){
-	  //��һ��������onclick��,��onload���ȵȣ��ڶ��������Ǿ�����¼�����
-     element.attachEvent("on"+event, function(){ fn.call(element) });
-     
-   }
-}
- //isinfo��ʾ�ı����е������Ƿ����,������ʾʱ�Ƿ��̾��ͼƬ
-function tip(title,isInfo,id)  
-{
-  this.title=title;
-  this.isInfo=isInfo;
-  this.tipDom=document.getElementById(id);
-}
-
-//��������function���岢������ִ�У�ִ�к󷵻ظ�tip������������showtip()��hidetip()
-tip.prototype=(function()
-{
-	//���ɺ��ʵ�Tip���ڲ�����
-    function genTip(tipDomObject,title,isInfo)
-	{
-     if(isInfo===false)
-	 {
-      tipDomObject.innerHTML="<img src='images/error.gif' style='margin-top:-6px;'/><span>"  + title + "</span>";
-	  //���ı����е����ݴ���ʱ�޸�tip�ı���ɫ��������ɫ
-	 tipDomObject.className="tipFormatFalse";
-	 }
-	 else
-	 {
-		  //�ö����cssΪtipFormat
-	  tipDomObject.className="tipFormatTrue";    
-	  tipDomObject.innerHTML="<span>"+title+"</span>";
-	 }
-	}
-	//������ �����ڴ˴�Ӧ��this
-	//alert(this.title+" in closure");
-	return {
-        showTip:function()                               //�հ�����
-		{
-			genTip(this.tipDom,this.title,this.isInfo);
-            //alert(this.tipDom.innerHTML);
-			this.tipDom.style.display="block";
-		},
-		hideTip:function()
-		{
-            this.tipDom.style.display="none";
-		}
-	}
-})();  
-
-
-
-function prepareTip()
- {
-	 //ȡ��body����
-	var bd=document.getElementsByTagName('body')[0];  
-	//�ر�ע��ð��ִ�У���ִ���Ǹ�С��div��click�¼���Ȼ����ִ��body��onclick
-	window.addEvent(bd,'click',autoemailhide);   
-	var e=document.getElementById("email");
-	 //��email��һ���¼�
-	window.addEvent(e,'blur',blurFn); 
-	window.addEvent(e,'focus',focusFn);
-	window.addEvent(e,'keypress',autoemailshow);
-	 //����һ���ַ�ʱ������writeemail
-	window.addEvent(e,'keyup',writeEmail);
-	for(i=1;i<11;i++)
-	{
-		  //�����е�С��������ʾ�����¼�
-		var mail=document.getElementById("mail"+i);       
-		window.addEvent(mail,'mouseover',mailmouseover);
-	    window.addEvent(mail,'mouseout',mailmouseout);
-	    window.addEvent(mail,'click',writeOnText);
-	}
-	var n=document.getElementById("name");
-	window.addEvent(n,'blur',blurFn);
-	window.addEvent(n,'focus',focusFn);
-	var p=document.getElementById("password");
-	window.addEvent(p,'blur',blurFn);
-	window.addEvent(p,'focus',focusFn);
-	//��ѡ����а��¼�
-	var citytext=document.getElementById("city");
-	window.addEvent(citytext,'click',showcity);
-	var closebutton=document.getElementById("closecity");
-	window.addEvent(closebutton,'click',hidecity);
-    //�����еij��а��¼�
-	for(j=1;j<36;j++)
-	{
-		var selectcity=document.getElementById("city"+j);
-	    window.addEvent(selectcity,'click',writeOnCity);
-	}
-	//���������еĵ��������¼�
-	var headdirdiv=document.getElementById("directiondiv");
-	window.addEvent(headdirdiv,'mouseover',dirshow);
-	window.addEvent(headdirdiv,'mouseout',dirhide);
-	//���±ߵĴ�ĵ��������¼���ֹ��������ʧ
-	var direction=document.getElementById("direction");
-	window.addEvent(direction,'mouseover',dirshow);
-	window.addEvent(direction,'mouseout',dirhide);
-	for(i=1;i<10;i++)
-	{
-	var littleDirLeft=document.getElementById("dleft"+i);
-	window.addEvent(littleDirLeft,'mouseover',alterRed);
-	window.addEvent(littleDirLeft,'mouseout',alterBackColor);
-	var littleDirRight=document.getElementById("dright"+i);
-	window.addEvent(littleDirRight,'mouseover',alterRed);
-	window.addEvent(littleDirRight,'mouseout',alterBackColor);
-	}
- }
- function alterRed()
- {
-	 this.style.backgroundColor="rgb(235, 75, 85)";
- }
- function alterBackColor()
- {
-	 this.style.backgroundColor="rgb(250,250,250)";
- }
- function dirshow()
- {
-	 var dir=document.getElementById("direction");
-	 var headdiv=document.getElementById("directiondiv")
-	 headdiv.style.backgroundColor="#F04E58";
-	 dir.style.display="block";
- }
- function dirhide()
- {
-	 var dir=document.getElementById("direction");
-	 var headdiv=document.getElementById("directiondiv")
-	 headdiv.style.backgroundColor="rgb(228, 64, 73)";
-	 dir.style.display="none";
- }
- function writeOnCity()
- {
-	 var citytext=document.getElementById("city");
-	 citytext.value=this.firstChild.nodeValue;
-	 hidecity();
-	 var image=document.getElementById("rightimgcity");
-	 image.style.display="inline";
- }
- function showcity()
- {
-	 var citydiv=document.getElementById("selctcity");
-	 citydiv.style.display="block";
- }
- function hidecity()
- {
-	 var citydiv=document.getElementById("selctcity");
-	 citydiv.style.display="none";
- }
- function autoemailshow()
- {
-	
-	var ae=document.getElementById("autoemail");
-	ae.style.display='block';
- }
- function autoemailhide()
- { 
-	 var ae=document.getElementById("autoemail");
-	 ae.style.display='none';
- }
- function writeOnText()
- {
-	    //�ر�ע�⣡�������ʱ���ı����ʧȥ���㣬�����autoemail�Զ�����
-     var emailtext=document.getElementById("email");
-     emailtext.value=this.innerHTML;
-	 var emailtip=document.getElementById("emailtip");
-	  //�����ȫ�������Ҫ���ı��������ʾ�����أ���
-	 emailtip.style.display="none";     
- }
- function mailmouseover()
- {
-   // var mail=document.getElementById(m.id);
-    this.style.backgroundColor="#f4f4f4";
- }
- function mailmouseout()
- {
-    // var mail=document.getElementById("mail1");
-	 this.style.backgroundColor="#FFFFFF";
- }
-
- function writeEmail()
- {
-	 var emailtextvalue=document.getElementById("email").value;
-	 document.getElementById("mail1").innerHTML=emailtextvalue+"@qq.com";
-	 document.getElementById("mail2").innerHTML=emailtextvalue+"@126.com";
-	 document.getElementById("mail3").innerHTML=emailtextvalue+"@163.com";
-	 document.getElementById("mail4").innerHTML=emailtextvalue+"@sina.com";
-	 document.getElementById("mail5").innerHTML=emailtextvalue+"@sina.cn";
-	 document.getElementById("mail6").innerHTML=emailtextvalue+"@hotmail.com";
-	 document.getElementById("mail7").innerHTML=emailtextvalue+"@gmail.com";
-	 document.getElementById("mail8").innerHTML=emailtextvalue+"@sohu.cn";
-	 document.getElementById("mail9").innerHTML=emailtextvalue+"@yahoo.cn";
-	 document.getElementById("mail10").innerHTML=emailtextvalue+"@139.cn";
- }
- function blurFn()
- {
-	var title;
-	switch(this.id)
-	{
-	  case "email":
-		   title="��Ǹ�ݲ�֧�ָĺ�׺������ע��";
-		   break;
-	  case "password":
-		   title="����Ӧ����6-20����ĸ�����ֻ������ַ����";
-		   break;
-	  case "name":
-		   title="����д�����ʵ��������";
-		   break;
-	}
-	var t=new tip(title,false,this.id+"tip");
-	//�ȹر�ԭ����info tip
-	t.hideTip();
-	//����д����ʱ���� error tip
-	if(checkFormat(this))
-	{
-	hiderightimg(this.id);
-	t.showTip();
-	}
-	else
-	showrightimg(this.id);
-	//���ı����е�����Ϊ��ʱ��Ҳ����ʾ��ɫ�ĶԺţ�
-	if(this.value.toString().length==0)
-	hiderightimg(this.id);
- }
- function showrightimg(id)
- {
-	 var img
-	 switch(id)
-	 {
-		 case "email":
-			 img=document.getElementById("rightimgemail");
-			 break;
-		 case "password":
-		     img=document.getElementById("rightimgpassword");
-			 break;
-		 case "name":
-		     img=document.getElementById("rightimgname");
-		     break;
-	 }
-	 img.style.display="inline";
- }
- function hiderightimg(id)
- {
-	// alert("��ִ��");
-	 var img
-	 switch(id)
-	 {
-		 case "email":
-			 img=document.getElementById("rightimgemail");
-			 break;
-		 case "password":
-		     img=document.getElementById("rightimgpassword");
-			 break;
-		 case "name":
-		     img=document.getElementById("rightimgname");
-		     break;
-	 }
-	 img.style.display="none";
- }
- function checkFormat(o)
- {
-	// o ��Ҫ����ʽ��dom����
-//	alert(o.id);
-    var check=o.value.toString();
-	switch(o.id)
-	{
-		case "email":
-		{
-           if(check.indexOf("@qq.com")>0)
-	           return false;
-	      else if(check.indexOf("@126.com")>0)
-	           return false;
-	      else if(check.indexOf("@163.com")>0)
-	           return false;
-	      else if(check.indexOf("@sina.com")>0)
-	           return false;
-	      else if(check.indexOf("@hotmail.com")>0)
-	           return false;
-	      else if(check.indexOf("@gmail.com")>0)
-	           return false;
-	      else if(check.indexOf("@sohu.cn")>0)
-	           return false;
-	      else if(check.indexOf("@yahoo.cn")>0)
-	           return false;
-	      else if(check.indexOf("@139.cn")>0)
-	           return false;
-			     //���ı���Ϊ��ʱҲ����ʾtip
-		  else if(check.length==0)     
-		       return false;
-	      else
-	           return true;
-		}
-		break;
-		case "password":
-		{
-			if(check.length<6&&check.length!=0)
-			return true;
-			else
-			return false;
-		}
-		break;
-		case "name":
-		{   //���������ʽ�ж��ı������Ƿ�������
-			if(/.*[u4e00-u9fa5]+.*$/.test(o.value)) 
-			return true;
-			else
-			return false;
-		}
-		break;
-	}
- }
- function focusFn()
- {
-	var title;
-	switch(this.id)
-	{
-	  case "email":
-		   title="����д��Ч�������䣬�Ƽ�ʹ��<span style='color:rgb(211, 37, 3);'>QQ����</span>";
-		   break;
-	  case "password":
-		   title="��6-20����ĸ�����ֻ������ַ����";
-		   break;
-	  case "name":
-		   title="����д�����ʵ��������";
-		   break;
-	}
-	var t=new tip(title,true,this.id+"tip");
-	t.showTip();
- }
-    </script>
-
-</head>
-<body onload="prepareTip();">
-    <form method="post">
-    <div class="header">
-        <div class="header_pic">
-            <a href="#">
-                <img class="picborder" src="images/p1.jpg" alt="kaixinlogo"></a>
-        </div>
-        <div class="header_t">
-            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">ע��</a></div>
-            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">��¼</a></div>
-            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">����</a></div>
-            <div id="directiondiv" class="dirdivstyle"><a id="headdirection" style="color: #FFFFFF;" href="#">����</a></div>
-            <div id="direction" class="directionstyle">
-                   <div id="dleft1" class="leftdir">�ֻ���</div><div id="dright1" class="rightdir">��Ƭ</div>
-                   <div id="dleft2" class="leftdir">ת��</div><div id="dright2" class="rightdir">����</div>
-                   <div id="dleft3" class="leftdir">ͶƱ</div><div id="dright3" class="rightdir">��Ӱ</div>
-                   <div id="dleft4" class="leftdir">��¼</div><div id="dright4" class="rightdir">��Ƶ</div>
-                   <div id="dleft5" class="leftdir">ר��</div><div id="dright5" class="rightdir">���ļ�Ʒ</div>
-                   <div id="dleft6" class="leftdir">�Ź�</div><div id="dright6" class="rightdir">��ҳ��Ϸ</div>
-                   <div id="dleft7" class="leftdir">С��Ϸ</div><div id="dright7" class="rightdir">�罻��Ϸ</div>
-                   <div id="dleft8" class="leftdir">������ҳ</div><div id="dright8" class="rightdir">����</div>
-                   <div id="dleft9" class="leftdir">��������</div><div id="dright9" class="rightdir">��Ʒ�ۿ�</div>
-            </div>
-        </div>
-    </div>
-    <div class="midd">
-        <div class="left">
-            <div class="title">
-                <h2>
-                    ʮ����뿪�������ҵ�ȫ������</h2>
-            </div>
-            <div>
-                <ul>
-                    <li style="position: relative">
-                        <label class="ultit">
-                            �������䣺</label>
-                        <div class="input">
-                            <input class="txt" type="text" id="email" name="" />
-                            <img id="rightimgemail" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
-                        <div id="autoemail" class="autoemailstyle">
-                            <div class="manyemail">
-                                ��ѡ�����������</div>
-                            <div id="mail1" class="manyemail">
-                                @qq.com</div>
-                            <div id="mail2" class="manyemail">
-                                @126.com</div>
-                            <div id="mail3" class="manyemail">
-                                @163.com</div>
-                            <div id="mail4" class="manyemail">
-                                @sina.com</div>
-                            <div id="mail5" class="manyemail">
-                                @sina.cn</div>
-                            <div id="mail6" class="manyemail">
-                                @hotmail.com</div>
-                            <div id="mail7" class="manyemail">
-                                @gmail.com</div>
-                            <div id="mail8" class="manyemail">
-                                @sohu.cn</div>
-                            <div id="mail9" class="manyemail">
-                                @yahoo.cn</div>
-                            <div id="mail10" class="manyemail">
-                                @139.cn</div>
-                        </div>
-                        <div id="emailtip">
-                        </div>
-                        <div class="note">
-                            ���û�����䣬�������<a href="#">�˺�ע��</a></div>
-                    </li>
-                    <li style="position: relative">
-                        <label class="ultit">
-                            �������룺</label>
-                        <div class="input">
-                            <input class="txt" type="password" id="password" name="">
-                            <img id="rightimgpassword" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
-                        <div id="passwordtip">
-                        </div>
-                    </li>
-                    <li style="position: relative">
-                        <label class="ultit">
-                            ��&nbsp&nbsp&nbsp&nbsp����</label>
-                        <div class="input">
-                            <input class="txt" type="text" id="name" name="">
-                            <img id="rightimgname" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
-                        <div id="nametip">
-                        </div>
-                    </li>
-                    <li>
-                        <label class="ultit">
-                            ��&nbsp&nbsp&nbsp&nbsp��</label>
-                        <div class="check">
-                            <input type="radio" value="male" name="sex" />&nbsp��&nbsp &nbsp &nbsp &nbsp &nbsp<input
-                                type="radio" value="female" name="sex" checked="checked" />&nbspŮ</div>
-                    </li>
-                    <li>
-                        <label class="ultit">
-                            ��&nbsp&nbsp&nbsp&nbsp�գ�</label>
-                        <div id="birth">
-                            <select name="year">
-                                <option value="choose1">��ѡ��</option>
-                                <option value="1980">1980</option>
-                                <option value="1981">1981</option>
-                                <option value="1982">1982</option>
-                                <option value="1983">1983</option>
-                                <option value="1984">1984</option>
-                                <option value="1985">1985</option>
-                                <option value="1986">1986</option>
-                                <option value="1987">1987</option>
-                                <option value="1988">1988</option>
-                                <option value="1989">1989</option>
-                                <option value="1990">1990</option>
-                                <option value="1991">1991</option>
-                                <option value="1992">1992</option>
-                                <option value="1993">1993</option>
-                                <option value="1994">1994</option>
-                                <option value="1995">1995</option>
-                                <option value="1996">1996</option>
-                                <option value="1997">1997</option>
-                                <option value="1998">1998</option>
-                                <option value="1999">1999</option>
-                                <option value="2000">2000</option>
-                            </select>��
-                            <select name="mounth">
-                                <option value="choose2">--&nbsp</option>
-                                <option value="01">01</option>
-                                <option value="02">02</option>
-                                <option value="03">03</option>
-                                <option value="04">04</option>
-                                <option value="05">05</option>
-                                <option value="06">06</option>
-                                <option value="07">07</option>
-                                <option value="08">08</option>
-                                <option value="09">09</option>
-                                <option value="10">10</option>
-                                <option value="11">11</option>
-                                <option value="12">12</option>
-                            </select>��
-                            <select>
-                                <option value="choose3">--&nbsp</option>
-                                <option value="01">01</option>
-                                <option value="02">02</option>
-                                <option value="03">03</option>
-                                <option value="04">04</option>
-                                <option value="05">05</option>
-                                <option value="06">06</option>
-                                <option value="07">07</option>
-                                <option value="08">08</option>
-                                <option value="09">09</option>
-                                <option value="10">10</option>
-                                <option value="11">11</option>
-                                <option value="12">12</option>
-                                <option value="13">13</option>
-                                <option value="14">14</option>
-                                <option value="15">15</option>
-                                <option value="16">16</option>
-                                <option value="17">17</option>
-                                <option value="18">18</option>
-                                <option value="19">19</option>
-                                <option value="20">20</option>
-                                <option value="21">21</option>
-                                <option value="22">22</option>
-                                <option value="23">23</option>
-                                <option value="24">24</option>
-                                <option value="25">25</option>
-                                <option value="26">26</option>
-                                <option value="27">27</option>
-                                <option value="28">28</option>
-                                <option value="29">29</option>
-                                <option value="30">30</option>
-                                <option value="31">31</option>
-                            </select>��
-                        </div>
-                    </li>
-                    <li>
-                        <label class="ultit">
-                            ��&nbsp��&nbsp�ڣ�</label>
-                        <div class="check">
-                            <input type="radio" value="work" name="job" />&nbsp�ڹ���&nbsp &nbsp &nbsp<input type="radio"
-                                value="school">&nbsp����ѧ</div>
-                    </li>
-                    <li style="position: relative">
-                        <label class="ultit">
-                            ��&nbspס&nbsp�أ�
-                        </label>
-                        <div id="address">
-                            <input type="text" class="cityStyle" value="����" id="city" name=""></input>
-                            <img id="rightimgcity" class="rightStyle" src="images/right.gif" alt="��ȷ">
-                        </div>
-                        <div class="cityBg" id="selctcity">
-                            <div id="provincebox" class="cbox">
-                                <span><a class="sl2" id="city1">���� </a></span>
-                                <span><a class="sl2" id="city2">�Ϻ� </a></span>
-                                <span><a class="sl2" id="city3">��� </a></span>
-                                <span><a class="sl2" id="city4">���� </a></span>
-                                <span><a class="sl2" id="city5">������ </a></span>
-                                <span><a class="sl2" id="city6">���� </a></span>
-                                <span><a class="sl2" id="city7">���� </a></span>
-                                <span><a class="sl2" id="city8">ɽ�� </a></span>
-                                <span><a class="sl2" id="city9">ɽ�� </a></span>
-                                <span><a class="sl2" id="city10">���� </a></span>
-                                <span><a class="sl2" id="city11">�ӱ� </a></span>
-                                <span><a class="sl2" id="city12">���� </a></span>
-                                <span><a class="sl2" id="city13">���� </a></span>
-                                <span><a class="sl2" id="city14">���� </a></span>
-                                <span><a class="sl2" id="city15">���� </a></span>
-                                <span><a class="sl2" id="city16">���� </a></span>
-                                <span><a class="sl2" id="city17">���� </a></span>
-                                <span><a class="sl2" id="city18">�㶫 </a></span>
-                                <span><a class="sl2" id="city19">���� </a></span>
-                                <span><a class="sl2" id="city20">���� </a></span>
-                                <span><a class="sl2" id="city21">���� </a></span>
-                                <span><a class="sl2" id="city22">�Ĵ� </a></span>
-                                <span><a class="sl2" id="city23">���ɹ� </a></span>
-                                <span><a class="sl2" id="city24">���� </a></span>
-                                <span><a class="sl2" id="city25">���� </a></span>
-                                <span><a class="sl2" id="city26">�ຣ </a></span>
-                                <span><a class="sl2" id="city27">���� </a></span>
-                                <span><a class="sl2" id="city28">�½� </a></span>
-                                <span><a class="sl2" id="city29">����</a></span>
-                                <span><a class="sl2" id="city30">�㽭 </a></span>
-                                <span><a class="sl2" id="city31">���� </a></span>
-                                <span><a class="sl2" id="city32">��� </a></span>
-                                <span><a class="sl2" id="city33">̨�� </a></span>
-                                <span><a class="sl2" id="city34">���� </a></span>
-                                <span><a class="sl2" id="city35">���� </a></span>
-                            </div>
-                            <input type="button" class="closebutton" value="�ر�" id="closecity" />
-                        </div>
-                    </li>
-                    <li>
-                        <div id="agree">
-                            <input id="checkedbox" type="checkbox" name="agree" checked="checked">&nbspͬ��<a href="#">��������������</a></div>
-                    </li>
-                    <li>
-                        <div id="button">
-                            <input id="submit" type="submit" value="����ע��" /></div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-        <div class="right">
-            <b>���ǿ������û���<a href="#">ֱ�ӵ�¼</a></b>
-            <p class="right_note">
-                ʹ�ú�����վ�˺ŵ�¼</p>
-            <div id="pic">
-                <a href="#">
-                    <img class="image" src="images/p2.jpg" alt="ͼ��"></a> <a href="#">
-                        <img class="image" src="images/p3.jpg" alt="ͼ��"></a> <a href="#">
-                            <img class="image" src="images/p4.jpg" alt="ͼ��"></a> <a href="#">
-                                <img class="image" src="images/p5.jpg" alt="ͼ��"></a>
-            </div>
-            <div class="line">
-            </div>
-            <div id="words">
-                <p id="words_h">
-                    ������</p>
-                <p class="words_p">
-                    ƽ��ÿ��ӵ��<span class="words_span">80</span>λ����</p>
-                <p class="words_p">
-                    ÿ�죬ƽ��ÿ���ϴ�<span class="words_span">10</span>����Ƭ</p>
-                <p class="words_p">
-                    ÿ�죬��<span class="words_span">1000��</span>�λ����ں��Ѽ俪�ĵط�����</p>
-                <p class="words_p">
-                    �й��˶�<span class="words_span">�罻����</span>�������˽⣬�����￪ʼ</p>
-            </div>
-        </div>
-    </div>
-    <div class="footer">
-        <div id="footer_first">
-            <div class="footer1_left">
-                <a class="footer1left_a" href="#">��������</a> <a class="footer1left_a" href="#">�ֻ�����</a>
-                <a class="footer1left_a" href="#">����ƽ̨</a> <a class="footer1left_a" href="#">Ӧ������</a>
-                <a class="footer1left_a" href="#">�������</a> <a class="footer1left_a" href="#">������Ƹ</a>
-                <a class="footer1left_a" href="#">�ͷ�</a> <a class="footer1left_a" href="#">����</a>
-            </div>
-            <div class="footer1_right">
-                c2012 ������.
-            </div>
-        </div>
-        <div id="footer_second">
-            <span class="footer2_one">������������Ϣ�������޹�˾�� ������[2009]157��(��)</span> <span class="footer2_two">
-                <a style="color: rgb(153,153,153);" href="#">��ICP֤080482��</a></span> <span class="footer2_two">
-                    ����������1100003��</span> <span class="footer2_two">(��)-�Ǿ�Ӫ��-2009-0009</span>
-            <span class="footer2_two"><a style="color: rgb(153,153,153);" href="#">δ����ҳ��໤</a></span>
-        </div>
-    </div>
-    </form>
-</body>
-</html>

From 7844803c50f2b5f0956c00db23404ad17b78544b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B?= <331082933@qq.com>
Date: Thu, 20 Dec 2012 22:55:29 +0800
Subject: [PATCH 10/10] =?UTF-8?q?=E5=BC=A0=E5=9B=BD=E6=A0=8B=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=E7=AC=AC=E4=B8=89=E6=AC=A1=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zhangguodong/{ => css}/validate.css       |   2 +-
 .../KaixinJavascript/zhangguodong/kaixin.js   | 256 ++++++++++++++-
 .../zhangguodong/kaixinJavaScript.html        | 300 ++++++++++++++++++
 3 files changed, 542 insertions(+), 16 deletions(-)
 rename 2012-Autumn-Homework/KaixinJavascript/zhangguodong/{ => css}/validate.css (99%)
 create mode 100644 2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinJavaScript.html

diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/validate.css
similarity index 99%
rename from 2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
rename to 2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/validate.css
index e614360..958d365 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/validate.css
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/css/validate.css
@@ -139,4 +139,4 @@ width: 178px;
 	background-color:rgb(250,250,250);
 	text-align:center;
 	line-height:30px;
-}
\ No newline at end of file
+}
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixin.js b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixin.js
index d51572f..89ace7f 100644
--- a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixin.js
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixin.js
@@ -1,15 +1,17 @@
-window.addEvent =function(element,event,fn){   //fn��ʾ������  
+window.addEvent =function(element,event,fn){  
   if(element.addEventListener)
   {
 	  element.addEventListener(event,fn,false);
 	  
   }
   else if(element.attachEvent){
-     element.attachEvent("on"+event, function(){ fn.call(element) });//��һ��������onclick��,��onload���ȵȣ��ڶ��������Ǿ�����¼�����
+	  //��һ��������onclick��,��onload���ȵȣ��ڶ��������Ǿ�����¼�����
+     element.attachEvent("on"+event, function(){ fn.call(element) });
      
    }
 }
-function tip(title,isInfo,id)   //isinfo��ʾ�ı����е������Ƿ����,������ʾʱ�Ƿ��̾��ͼƬ
+ //isinfo��ʾ�ı����е������Ƿ����,������ʾʱ�Ƿ��̾��ͼƬ
+function tip(title,isInfo,id)  
 {
   this.title=title;
   this.isInfo=isInfo;
@@ -22,11 +24,18 @@ tip.prototype=(function()
 	//���ɺ��ʵ�Tip���ڲ�����
     function genTip(tipDomObject,title,isInfo)
 	{
-     tipDomObject.className="tipFormat";     //�ö����cssΪtipFormat
      if(isInfo===false)
-      tipDomObject.innerHTML="<img src='error.gif' /><span>"  + title + "</span>";
+	 {
+      tipDomObject.innerHTML="<img src='images/error.gif' style='margin-top:-6px;'/><span>"  + title + "</span>";
+	  //���ı����е����ݴ���ʱ�޸�tip�ı���ɫ��������ɫ
+	 tipDomObject.className="tipFormatFalse";
+	 }
 	 else
+	 {
+		  //�ö����cssΪtipFormat
+	  tipDomObject.className="tipFormatTrue";    
 	  tipDomObject.innerHTML="<span>"+title+"</span>";
+	 }
 	}
 	//������ �����ڴ˴�Ӧ��this
 	//alert(this.title+" in closure");
@@ -48,17 +57,144 @@ tip.prototype=(function()
 
 function prepareTip()
  {
+	 //ȡ��body����
+	var bd=document.getElementsByTagName('body')[0];  
+	//�ر�ע��ð��ִ�У���ִ���Ǹ�С��div��click�¼���Ȼ����ִ��body��onclick
+	window.addEvent(bd,'click',autoemailhide);   
 	var e=document.getElementById("email");
-	window.addEvent(e,'blur',blurFn);  //��email��һ���¼�
+	 //��email��һ���¼�
+	window.addEvent(e,'blur',blurFn); 
 	window.addEvent(e,'focus',focusFn);
-	/* ��ʱע����
+	window.addEvent(e,'keypress',autoemailshow);
+	 //����һ���ַ�ʱ������writeemail
+	window.addEvent(e,'keyup',writeEmail);
+	for(i=1;i<11;i++)
+	{
+		  //�����е�С��������ʾ�����¼�
+		var mail=document.getElementById("mail"+i);       
+		window.addEvent(mail,'mouseover',mailmouseover);
+	    window.addEvent(mail,'mouseout',mailmouseout);
+	    window.addEvent(mail,'click',writeOnText);
+	}
 	var n=document.getElementById("name");
 	window.addEvent(n,'blur',blurFn);
 	window.addEvent(n,'focus',focusFn);
 	var p=document.getElementById("password");
 	window.addEvent(p,'blur',blurFn);
 	window.addEvent(p,'focus',focusFn);
-	*/
+	//��ѡ����а��¼�
+	var citytext=document.getElementById("city");
+	window.addEvent(citytext,'click',showcity);
+	var closebutton=document.getElementById("closecity");
+	window.addEvent(closebutton,'click',hidecity);
+    //�����еij��а��¼�
+	for(j=1;j<36;j++)
+	{
+		var selectcity=document.getElementById("city"+j);
+	    window.addEvent(selectcity,'click',writeOnCity);
+	}
+	//���������еĵ��������¼�
+	var headdirdiv=document.getElementById("directiondiv");
+	window.addEvent(headdirdiv,'mouseover',dirshow);
+	window.addEvent(headdirdiv,'mouseout',dirhide);
+	//���±ߵĴ�ĵ��������¼���ֹ��������ʧ
+	var direction=document.getElementById("direction");
+	window.addEvent(direction,'mouseover',dirshow);
+	window.addEvent(direction,'mouseout',dirhide);
+	for(i=1;i<10;i++)
+	{
+	var littleDirLeft=document.getElementById("dleft"+i);
+	window.addEvent(littleDirLeft,'mouseover',alterRed);
+	window.addEvent(littleDirLeft,'mouseout',alterBackColor);
+	var littleDirRight=document.getElementById("dright"+i);
+	window.addEvent(littleDirRight,'mouseover',alterRed);
+	window.addEvent(littleDirRight,'mouseout',alterBackColor);
+	}
+ }
+ function alterRed()
+ {
+	 this.style.backgroundColor="rgb(235, 75, 85)";
+ }
+ function alterBackColor()
+ {
+	 this.style.backgroundColor="rgb(250,250,250)";
+ }
+ function dirshow()
+ {
+	 var dir=document.getElementById("direction");
+	 var headdiv=document.getElementById("directiondiv")
+	 headdiv.style.backgroundColor="#F04E58";
+	 dir.style.display="block";
+ }
+ function dirhide()
+ {
+	 var dir=document.getElementById("direction");
+	 var headdiv=document.getElementById("directiondiv")
+	 headdiv.style.backgroundColor="rgb(228, 64, 73)";
+	 dir.style.display="none";
+ }
+ function writeOnCity()
+ {
+	 var citytext=document.getElementById("city");
+	 citytext.value=this.firstChild.nodeValue;
+	 hidecity();
+	 var image=document.getElementById("rightimgcity");
+	 image.style.display="inline";
+ }
+ function showcity()
+ {
+	 var citydiv=document.getElementById("selctcity");
+	 citydiv.style.display="block";
+ }
+ function hidecity()
+ {
+	 var citydiv=document.getElementById("selctcity");
+	 citydiv.style.display="none";
+ }
+ function autoemailshow()
+ {
+	
+	var ae=document.getElementById("autoemail");
+	ae.style.display='block';
+ }
+ function autoemailhide()
+ { 
+	 var ae=document.getElementById("autoemail");
+	 ae.style.display='none';
+ }
+ function writeOnText()
+ {
+	    //�ر�ע�⣡�������ʱ���ı����ʧȥ���㣬�����autoemail�Զ�����
+     var emailtext=document.getElementById("email");
+     emailtext.value=this.innerHTML;
+	 var emailtip=document.getElementById("emailtip");
+	  //�����ȫ�������Ҫ���ı��������ʾ�����أ���
+	 emailtip.style.display="none";     
+ }
+ function mailmouseover()
+ {
+   // var mail=document.getElementById(m.id);
+    this.style.backgroundColor="#f4f4f4";
+ }
+ function mailmouseout()
+ {
+    // var mail=document.getElementById("mail1");
+	 this.style.backgroundColor="#FFFFFF";
+ }
+
+ function writeEmail()
+ {
+	 var emailtextvalue=document.getElementById("email").value;
+	 document.getElementById("mail1").innerHTML=emailtextvalue+"@qq.com";
+	 document.getElementById("mail2").innerHTML=emailtextvalue+"@126.com";
+	 document.getElementById("mail3").innerHTML=emailtextvalue+"@163.com";
+	 document.getElementById("mail4").innerHTML=emailtextvalue+"@sina.com";
+	 document.getElementById("mail5").innerHTML=emailtextvalue+"@sina.cn";
+	 document.getElementById("mail6").innerHTML=emailtextvalue+"@hotmail.com";
+	 document.getElementById("mail7").innerHTML=emailtextvalue+"@gmail.com";
+	 document.getElementById("mail8").innerHTML=emailtextvalue+"@sohu.cn";
+	 document.getElementById("mail9").innerHTML=emailtextvalue+"@yahoo.cn";
+	 document.getElementById("mail10").innerHTML=emailtextvalue+"@139.cn";
  }
  function blurFn()
  {
@@ -66,13 +202,13 @@ function prepareTip()
 	switch(this.id)
 	{
 	  case "email":
-		   title="�����ʽ����";
+		   title="�������������";
 		   break;
 	  case "password":
-		   title="���벻��";
+		   title="����Ӧ����6-20����ĸ�����ֻ������ַ����";
 		   break;
 	  case "name":
-		   title="����������Ҫ��";
+		   title="����д�����ʵ��������";
 		   break;
 	}
 	var t=new tip(title,false,this.id+"tip");
@@ -80,12 +216,102 @@ function prepareTip()
 	t.hideTip();
 	//����д����ʱ���� error tip
 	if(checkFormat(this))
+	{
+	hiderightimg(this.id);
 	t.showTip();
+	}
+	else
+	showrightimg(this.id);
+	//���ı����е�����Ϊ��ʱ��Ҳ����ʾ��ɫ�ĶԺţ�
+	if(this.value.toString().length==0)
+	hiderightimg(this.id);
+ }
+ function showrightimg(id)
+ {
+	 var img
+	 switch(id)
+	 {
+		 case "email":
+			 img=document.getElementById("rightimgemail");
+			 break;
+		 case "password":
+		     img=document.getElementById("rightimgpassword");
+			 break;
+		 case "name":
+		     img=document.getElementById("rightimgname");
+		     break;
+	 }
+	 img.style.display="inline";
+ }
+ function hiderightimg(id)
+ {
+	// alert("��ִ��");
+	 var img
+	 switch(id)
+	 {
+		 case "email":
+			 img=document.getElementById("rightimgemail");
+			 break;
+		 case "password":
+		     img=document.getElementById("rightimgpassword");
+			 break;
+		 case "name":
+		     img=document.getElementById("rightimgname");
+		     break;
+	 }
+	 img.style.display="none";
  }
  function checkFormat(o)
  {
 	// o ��Ҫ����ʽ��dom����
-	return true;
+//	alert(o.id);
+    var check=o.value.toString();
+	switch(o.id)
+	{
+		case "email":
+		{
+           if(check.indexOf("@qq.com")>0)
+	           return false;
+	      else if(check.indexOf("@126.com")>0)
+	           return false;
+	      else if(check.indexOf("@163.com")>0)
+	           return false;
+	      else if(check.indexOf("@sina.com")>0)
+	           return false;
+	      else if(check.indexOf("@hotmail.com")>0)
+	           return false;
+	      else if(check.indexOf("@gmail.com")>0)
+	           return false;
+	      else if(check.indexOf("@sohu.cn")>0)
+	           return false;
+	      else if(check.indexOf("@yahoo.cn")>0)
+	           return false;
+	      else if(check.indexOf("@139.cn")>0)
+	           return false;
+			     //���ı���Ϊ��ʱҲ����ʾtip
+		  else if(check.length==0)     
+		       return false;
+	      else
+	           return true;
+		}
+		break;
+		case "password":
+		{
+			if(check.length<6&&check.length!=0)
+			return true;
+			else
+			return false;
+		}
+		break;
+		case "name":
+		{   //���������ʽ�ж��ı������Ƿ�������
+			if(/.*[u4e00-u9fa5]+.*$/.test(o.value)) 
+			return true;
+			else
+			return false;
+		}
+		break;
+	}
  }
  function focusFn()
  {
@@ -93,13 +319,13 @@ function prepareTip()
 	switch(this.id)
 	{
 	  case "email":
-		   title="����������";
+		   title="����д��Ч�������䣬�Ƽ�ʹ��<span style='color:rgb(211, 37, 3);'>QQ����</span>";
 		   break;
 	  case "password":
-		   title="����������";
+		   title="��6-20����ĸ�����ֻ������ַ����";
 		   break;
 	  case "name":
-		   title="����������";
+		   title="����д�����ʵ��������";
 		   break;
 	}
 	var t=new tip(title,true,this.id+"tip");
diff --git a/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinJavaScript.html b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinJavaScript.html
new file mode 100644
index 0000000..1027a58
--- /dev/null
+++ b/2012-Autumn-Homework/KaixinJavascript/zhangguodong/kaixinJavaScript.html
@@ -0,0 +1,300 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>������ </title>
+    <meta name="Generator" content="EditPlus">
+    <meta name="Author" content="">
+    <meta name="Keywords" content="">
+    <meta name="Description" content="">
+    <link rel="stylesheet" href="css/main.css" type="text/css"></link>
+    <link rel="stylesheet" href="css/validate.css" type="text/css"></link>
+    <script type="text/javascript" src="kaixin.js" ></script>
+</head>
+<body onload="prepareTip();">
+    <form method="post">
+    <div class="header">
+        <div class="header_pic">
+            <a href="#">
+                <img class="picborder" src="images/p1.jpg" alt="kaixinlogo"></a>
+        </div>
+        <div class="header_t">
+            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">ע��</a></div>
+            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">��¼</a></div>
+            <div><a class="dirdivstyle" style="color: #FFFFFF;" href="#">����</a></div>
+            <div id="directiondiv" class="dirdivstyle"><a id="headdirection" style="color: #FFFFFF;" href="#">����</a></div>
+            <div id="direction" class="directionstyle">
+                   <div id="dleft1" class="leftdir">�ֻ���</div><div id="dright1" class="rightdir">��Ƭ</div>
+                   <div id="dleft2" class="leftdir">ת��</div><div id="dright2" class="rightdir">����</div>
+                   <div id="dleft3" class="leftdir">ͶƱ</div><div id="dright3" class="rightdir">��Ӱ</div>
+                   <div id="dleft4" class="leftdir">��¼</div><div id="dright4" class="rightdir">��Ƶ</div>
+                   <div id="dleft5" class="leftdir">ר��</div><div id="dright5" class="rightdir">���ļ�Ʒ</div>
+                   <div id="dleft6" class="leftdir">�Ź�</div><div id="dright6" class="rightdir">��ҳ��Ϸ</div>
+                   <div id="dleft7" class="leftdir">С��Ϸ</div><div id="dright7" class="rightdir">�罻��Ϸ</div>
+                   <div id="dleft8" class="leftdir">������ҳ</div><div id="dright8" class="rightdir">����</div>
+                   <div id="dleft9" class="leftdir">��������</div><div id="dright9" class="rightdir">��Ʒ�ۿ�</div>
+            </div>
+        </div>
+    </div>
+    <div class="midd">
+        <div class="left">
+            <div class="title">
+                <h2>
+                    ʮ����뿪�������ҵ�ȫ������</h2>
+            </div>
+            <div>
+                <ul>
+                    <li style="position: relative">
+                        <label class="ultit">
+                            �������䣺</label>
+                        <div class="input">
+                            <input class="txt" type="text" id="email" name="" />
+                            <img id="rightimgemail" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
+                        <div id="autoemail" class="autoemailstyle">
+                            <div class="manyemail">
+                                ��ѡ�����������</div>
+                            <div id="mail1" class="manyemail">
+                                @qq.com</div>
+                            <div id="mail2" class="manyemail">
+                                @126.com</div>
+                            <div id="mail3" class="manyemail">
+                                @163.com</div>
+                            <div id="mail4" class="manyemail">
+                                @sina.com</div>
+                            <div id="mail5" class="manyemail">
+                                @sina.cn</div>
+                            <div id="mail6" class="manyemail">
+                                @hotmail.com</div>
+                            <div id="mail7" class="manyemail">
+                                @gmail.com</div>
+                            <div id="mail8" class="manyemail">
+                                @sohu.cn</div>
+                            <div id="mail9" class="manyemail">
+                                @yahoo.cn</div>
+                            <div id="mail10" class="manyemail">
+                                @139.cn</div>
+                        </div>
+                        <div id="emailtip">
+                        </div>
+                        <div class="note">
+                            ���û�����䣬�������<a href="#">�˺�ע��</a></div>
+                    </li>
+                    <li style="position: relative">
+                        <label class="ultit">
+                            �������룺</label>
+                        <div class="input">
+                            <input class="txt" type="password" id="password" name="">
+                            <img id="rightimgpassword" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
+                        <div id="passwordtip">
+                        </div>
+                    </li>
+                    <li style="position: relative">
+                        <label class="ultit">
+                            ��&nbsp&nbsp&nbsp&nbsp����</label>
+                        <div class="input">
+                            <input class="txt" type="text" id="name" name="">
+                            <img id="rightimgname" class="rightStyle" src="images/right.gif" alt="��ȷ"></div>
+                        <div id="nametip">
+                        </div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            ��&nbsp&nbsp&nbsp&nbsp��</label>
+                        <div class="check">
+                            <input type="radio" value="male" name="sex" />&nbsp��&nbsp &nbsp &nbsp &nbsp &nbsp<input
+                                type="radio" value="female" name="sex" checked="checked" />&nbspŮ</div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            ��&nbsp&nbsp&nbsp&nbsp�գ�</label>
+                        <div id="birth">
+                            <select name="year">
+                                <option value="choose1">��ѡ��</option>
+                                <option value="1980">1980</option>
+                                <option value="1981">1981</option>
+                                <option value="1982">1982</option>
+                                <option value="1983">1983</option>
+                                <option value="1984">1984</option>
+                                <option value="1985">1985</option>
+                                <option value="1986">1986</option>
+                                <option value="1987">1987</option>
+                                <option value="1988">1988</option>
+                                <option value="1989">1989</option>
+                                <option value="1990">1990</option>
+                                <option value="1991">1991</option>
+                                <option value="1992">1992</option>
+                                <option value="1993">1993</option>
+                                <option value="1994">1994</option>
+                                <option value="1995">1995</option>
+                                <option value="1996">1996</option>
+                                <option value="1997">1997</option>
+                                <option value="1998">1998</option>
+                                <option value="1999">1999</option>
+                                <option value="2000">2000</option>
+                            </select>��
+                            <select name="mounth">
+                                <option value="choose2">--&nbsp</option>
+                                <option value="01">01</option>
+                                <option value="02">02</option>
+                                <option value="03">03</option>
+                                <option value="04">04</option>
+                                <option value="05">05</option>
+                                <option value="06">06</option>
+                                <option value="07">07</option>
+                                <option value="08">08</option>
+                                <option value="09">09</option>
+                                <option value="10">10</option>
+                                <option value="11">11</option>
+                                <option value="12">12</option>
+                            </select>��
+                            <select>
+                                <option value="choose3">--&nbsp</option>
+                                <option value="01">01</option>
+                                <option value="02">02</option>
+                                <option value="03">03</option>
+                                <option value="04">04</option>
+                                <option value="05">05</option>
+                                <option value="06">06</option>
+                                <option value="07">07</option>
+                                <option value="08">08</option>
+                                <option value="09">09</option>
+                                <option value="10">10</option>
+                                <option value="11">11</option>
+                                <option value="12">12</option>
+                                <option value="13">13</option>
+                                <option value="14">14</option>
+                                <option value="15">15</option>
+                                <option value="16">16</option>
+                                <option value="17">17</option>
+                                <option value="18">18</option>
+                                <option value="19">19</option>
+                                <option value="20">20</option>
+                                <option value="21">21</option>
+                                <option value="22">22</option>
+                                <option value="23">23</option>
+                                <option value="24">24</option>
+                                <option value="25">25</option>
+                                <option value="26">26</option>
+                                <option value="27">27</option>
+                                <option value="28">28</option>
+                                <option value="29">29</option>
+                                <option value="30">30</option>
+                                <option value="31">31</option>
+                            </select>��
+                        </div>
+                    </li>
+                    <li>
+                        <label class="ultit">
+                            ��&nbsp��&nbsp�ڣ�</label>
+                        <div class="check">
+                            <input type="radio" value="work" name="job" />&nbsp�ڹ���&nbsp &nbsp &nbsp<input type="radio"
+                                value="school">&nbsp����ѧ</div>
+                    </li>
+                    <li style="position: relative">
+                        <label class="ultit">
+                            ��&nbspס&nbsp�أ�
+                        </label>
+                        <div id="address">
+                            <input type="text" class="cityStyle" value="����" id="city" name=""></input>
+                            <img id="rightimgcity" class="rightStyle" src="images/right.gif" alt="��ȷ">
+                        </div>
+                        <div class="cityBg" id="selctcity">
+                            <div id="provincebox" class="cbox">
+                                <span><a class="sl2" id="city1">���� </a></span>
+                                <span><a class="sl2" id="city2">�Ϻ� </a></span>
+                                <span><a class="sl2" id="city3">��� </a></span>
+                                <span><a class="sl2" id="city4">���� </a></span>
+                                <span><a class="sl2" id="city5">������ </a></span>
+                                <span><a class="sl2" id="city6">���� </a></span>
+                                <span><a class="sl2" id="city7">���� </a></span>
+                                <span><a class="sl2" id="city8">ɽ�� </a></span>
+                                <span><a class="sl2" id="city9">ɽ�� </a></span>
+                                <span><a class="sl2" id="city10">���� </a></span>
+                                <span><a class="sl2" id="city11">�ӱ� </a></span>
+                                <span><a class="sl2" id="city12">���� </a></span>
+                                <span><a class="sl2" id="city13">���� </a></span>
+                                <span><a class="sl2" id="city14">���� </a></span>
+                                <span><a class="sl2" id="city15">���� </a></span>
+                                <span><a class="sl2" id="city16">���� </a></span>
+                                <span><a class="sl2" id="city17">���� </a></span>
+                                <span><a class="sl2" id="city18">�㶫 </a></span>
+                                <span><a class="sl2" id="city19">���� </a></span>
+                                <span><a class="sl2" id="city20">���� </a></span>
+                                <span><a class="sl2" id="city21">���� </a></span>
+                                <span><a class="sl2" id="city22">�Ĵ� </a></span>
+                                <span><a class="sl2" id="city23">���ɹ� </a></span>
+                                <span><a class="sl2" id="city24">���� </a></span>
+                                <span><a class="sl2" id="city25">���� </a></span>
+                                <span><a class="sl2" id="city26">�ຣ </a></span>
+                                <span><a class="sl2" id="city27">���� </a></span>
+                                <span><a class="sl2" id="city28">�½� </a></span>
+                                <span><a class="sl2" id="city29">����</a></span>
+                                <span><a class="sl2" id="city30">�㽭 </a></span>
+                                <span><a class="sl2" id="city31">���� </a></span>
+                                <span><a class="sl2" id="city32">��� </a></span>
+                                <span><a class="sl2" id="city33">̨�� </a></span>
+                                <span><a class="sl2" id="city34">���� </a></span>
+                                <span><a class="sl2" id="city35">���� </a></span>
+                            </div>
+                            <input type="button" class="closebutton" value="�ر�" id="closecity" />
+                        </div>
+                    </li>
+                    <li>
+                        <div id="agree">
+                            <input id="checkedbox" type="checkbox" name="agree" checked="checked">&nbspͬ��<a href="#">��������������</a></div>
+                    </li>
+                    <li>
+                        <div id="button">
+                            <input id="submit" type="submit" value="����ע��" /></div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="right">
+            <b>���ǿ������û���<a href="#">ֱ�ӵ�¼</a></b>
+            <p class="right_note">
+                ʹ�ú�����վ�˺ŵ�¼</p>
+            <div id="pic">
+                <a href="#">
+                    <img class="image" src="images/p2.jpg" alt="ͼ��"></a> <a href="#">
+                        <img class="image" src="images/p3.jpg" alt="ͼ��"></a> <a href="#">
+                            <img class="image" src="images/p4.jpg" alt="ͼ��"></a> <a href="#">
+                                <img class="image" src="images/p5.jpg" alt="ͼ��"></a>
+            </div>
+            <div class="line">
+            </div>
+            <div id="words">
+                <p id="words_h">
+                    ������</p>
+                <p class="words_p">
+                    ƽ��ÿ��ӵ��<span class="words_span">80</span>λ����</p>
+                <p class="words_p">
+                    ÿ�죬ƽ��ÿ���ϴ�<span class="words_span">10</span>����Ƭ</p>
+                <p class="words_p">
+                    ÿ�죬��<span class="words_span">1000��</span>�λ����ں��Ѽ俪�ĵط�����</p>
+                <p class="words_p">
+                    �й��˶�<span class="words_span">�罻����</span>�������˽⣬�����￪ʼ</p>
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+        <div id="footer_first">
+            <div class="footer1_left">
+                <a class="footer1left_a" href="#">��������</a> <a class="footer1left_a" href="#">�ֻ�����</a>
+                <a class="footer1left_a" href="#">����ƽ̨</a> <a class="footer1left_a" href="#">Ӧ������</a>
+                <a class="footer1left_a" href="#">�������</a> <a class="footer1left_a" href="#">������Ƹ</a>
+                <a class="footer1left_a" href="#">�ͷ�</a> <a class="footer1left_a" href="#">����</a>
+            </div>
+            <div class="footer1_right">
+                c2012 ������.
+            </div>
+        </div>
+        <div id="footer_second">
+            <span class="footer2_one">������������Ϣ�������޹�˾�� ������[2009]157��(��)</span> <span class="footer2_two">
+                <a style="color: rgb(153,153,153);" href="#">��ICP֤080482��</a></span> <span class="footer2_two">
+                    ����������1100003��</span> <span class="footer2_two">(��)-�Ǿ�Ӫ��-2009-0009</span>
+            <span class="footer2_two"><a style="color: rgb(153,153,153);" href="#">δ����ҳ��໤</a></span>
+        </div>
+    </div>
+    </form>
+</body>
+</html>