網頁製作（七）---照着google註冊頁面邊學邊寫的一個網頁

花了五六個小時邊學邊寫了一個註冊頁面，仿照google郵箱註冊的樣子，剛開始，看了下google註冊頁面的原碼，當時就不夠淡定了，總計有六千多行代碼，當時就有點暈了。在心裏告訴自己：如果這次放棄，以後都會放棄的，那樣的話就徹底會遠離IT行業。

嗯！對。總有第一次，總要開始，不管面對什麼技術，不要逃避，因爲迎頭上始終是最好的克服恐懼的方法。

終於，到了昨天晚上就搞的差不多了，過程中，各種google，百度啥的。當然寫的很低水平的那種，還望大牛不要嘲笑哈！

下面分享下我寫的代碼：

首先是html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google賬戶註冊</title>
<script src="GOOGLE註冊腳本.js"></script>
<LINK   rel = "stylesheet"    type = "text/css"    href = "樣式表.css" >
</head>
<body background="背景.jpg" οnlοad="function()">

<img align="top" src="google2.jpg" width=100% height="200"/>

<marquee direction=left scrolldelay=100 behavior=alternate scrollamount=10 loop=100 bgcolor=blue hspace=0 vspace=1>歡迎註冊google郵箱</marquee>
<div id="column1">
<h2 align="center">註冊信息填寫</h2>
<form action="" method="post" name="register" >
  <p align="left">
  <label>姓名</label>
  <br />
  <input type="text" name="text1" align="left" value="姓氏" maxlength="10" class="myinput" onFocus="myfun1()" οnblur="myfun3()"/>
  <input type="text" name="text2" align="left" value="姓名" maxlength="10" class="myinput" onFocus="myfun2()" οnblur="myfun4()"/>
  <br />
  <label>用戶名</label>
  <br />
    <input name="text3" type="text" maxlength="20" οnblur="myfun5()"/>
   <label>@gmail.com</label>
     <br />
    <label>設置密碼</label>
   <br />
  <input name="text4" type="password" maxlength="20" οnblur="myfun6()" />
   <br />
  <label>確認密碼</label>
   <br />
  <input name="text5" type="password" maxlength="20" οnblur="myfun7()"/>
  <br />
  <label>生日</label>
  <br />

<select name=YYYY οnchange="YYYYMM(this.value)">  
<option value="">--請選擇出生年份--</option>  
</select>  
<select name=MM οnchange="MMDD(this.value)">  
<option value="">--請選擇出生月份--</option>  
</select>  
<select name=DD>  
<option value="">--請選擇出生日期--</option>  
</select>  

<br />
<label>性別</label>
<br />
<input name="myradio" type="radio" value="男" />男
<input name="myradio" type="radio" value="女" />女
<br />
<label>手機</label>
<br />
<input name="text6" type="text" maxlength="11" οnblur="myfun8()"/>
<br />
<label>當前郵件地址</label>
<br />
<input name="text7" type="text" maxlength="20" οnblur="myfun9()"/>
<br />
<label>位置</label>
<br />
<select id="s1" οnchange="check_city()">
<option selected="selected">四川</option>
<option>安徽</option>
<option>浙江</option></select>
<select id="s2" οnchange="check_town()">
<option selected="selected">成都</option>
<option>綿陽</option>
</select>
<select id="s3">
<option selected="selected">高新區</option>
<option>金牛區</option></select>
<p align="left">
<input name="submit" type="submit" value="註冊" οnclick="myfun10()"/>
<input name="reset" type="reset" value="重置" />
</form>
</div >
<div id="column2">
<img src="2.jpg" align="top" width="100%" height="200"/>
<h1>隨時隨地使用。</h1>
Google 帳戶可讓您在任何設備上訪問自己的所有資料（Gmail、照片等）。您可以通過拍照方式或語音方式進行搜索，還可以獲得免費的轉彎語音導航功能，自動上傳照片，而且不久之後還可通過手機用 Google 電子錢包進行購物。
<p>
<img src="1.jpg" align="top" width="100%" height="200"/>
<h1>您的 Google 帳戶不只是能用於Gmail哦！</h1>
您還可以通過自己的 Google 帳戶進行交談、聊天、分享、安排日程、存儲、整理、協作、查找信息以及創建內容。您只需一組用戶名和密碼，就可以使用 Google 的各種產品（包括 Gmail、Google+、Youtube 等），還可以查看自己的搜索記錄；系統會隨時對所有信息進行備份，您可以通過 Google.com（已經猜到了吧）輕鬆查找。
</p>
</div>
<div id="column3">
<img src="3.jpg" align="top" width="100%" height="200"/>
<h1>分享多少，自己決定。</h1>
在 Google+ 上有選擇地和您的朋友、家人（甚至老闆）分享各種內容。和朋友進行環聊、羣發消息或者僅關注您感興趣的人的帖子。一切由您決定。
<p>
<img src="4.jpg" align="top" width="100%" height="200"/>
<h1>提前享用未來的工作方式。</h1>
工作方式隨即躍入新時代，一切更出色。即使身在千里之外，也能實時看到同事或合作伙伴上傳照片、更新電子表格或潤色文章段落。只要註冊 Google 帳戶，還能免費獲得"Google 文檔"哦。

</p>
</div>
</body>
</html>

然後是javascript：

// JavaScript Documentlse
function change1()
{
	var p = document.register.location.selectionIndex;
}
function myfun1()
{
   if (document.register.text1.value=="姓氏")
       document.register.text1.value="" ;
}
function myfun2()
{
  if (document.register.text2.value=="姓名")
       document.register.text2.value="" ;
}
/*驗證姓氏，只有中文的正則表達式*/
function myfun3()
{
	var e=/^[\u4e00-\u9fa5]/;
	var obj=document.register.text1.value;
	if(obj=="")
	{
		alert("請輸入姓氏");
	}
	else if(!e.exec(obj))
	{
		alert("所輸入的姓氏不是漢字");
		document.register.text1.value="";
	}
}
/*驗證姓名，只有中文的正則表達式*/
function myfun4()
{
	var e=/^[\u4e00-\u9fa5]/;
	var obj=document.register.text2.value;
	if(obj=="")
	{
		alert("請輸入姓名");
	}
	else if(!e.exec(obj))
	{
		alert("所輸入的姓名不是漢字");
		document.register.text2.value="";
	}
}
/*驗證郵箱，只有字母、數字和下劃線且不能以下劃線開頭和結尾的正則表達式*/
function myfun5()
{
	var e=/^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;
	var obj=document.register.text3.value;
	if(obj=="")
	{
		alert("請輸入用戶名");
	}
	else if(!e.exec(obj))
	{
		alert("所輸入的內容不符合要求");
		document.register.text3.value="";
	}
}
/*驗證密碼，只有字母和數字的正則表達式*/
function myfun6()
{
	var e=/^[a-zA-Z0-9_]+$/;
	var obj=document.register.text4.value;
	if(obj=="")
	{
		alert("請輸入密碼");
	}
	else if(!e.exec(obj))
	{
		alert("所輸入的內容不符合要求");
		document.register.text4.value="";
	}
}
/*驗證密碼是否匹配*/
function myfun7()
{
	var e=/^[a-zA-Z0-9_]+$/;
	var obj1=document.register.text4.value;
	var obj2=document.register.text5.value;
	if(obj2=="")
	{
		alert("請再次輸入密碼");
	}
	else if(obj1!=obj2)
	{
		alert("兩次密碼不匹配");
	}
	
}
/*驗證手機號碼，全是數字的正則表達式*/
function myfun8()
{
	var e=/^\d{11}$/;
	var obj=document.register.text6.value;
	if(obj=="")
	{
		alert("請輸入手機");
	}
	else if(!e.exec(obj))
	{
		alert("請輸入有效的手機號碼");
	}
	
}
function myfun9()
{
	var e=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
	var obj=document.register.text7.value;
	if(obj=="")
	{
		alert("請輸入郵件地址");
	}
	else if(!e.exec(obj))
	{
		alert("請輸入有效的郵件地址");
	}
	
}

function myfun10()
{
	var obj1=document.register.text1.value;
	var obj2=document.register.text2.value;
	var obj3=document.register.text3.value;
	var obj4=document.register.text4.value;
	var obj5=document.register.text6.value;
	var obj6=document.register.text7.value;
	var objSex="先生";
	if ((document.register.myradio[0].checked==false)&&(document.register.myradio[1].checked==false))
	{
		alert("請選擇性別！");
		return false;
	}
	
	if(obj1=="姓氏")
	{
		alert("請輸入姓氏");
		return false;
	}
	if(obj2=="姓名")
	{
		alert("請輸入姓名");
		return false;
	}
	if(obj3=="")
	{
		alert("請輸入用戶名");
		return false;
	}
	if(obj4=="")
	{
		alert("請輸入密碼");
		return false;
	}
	if(obj5=="")
	{
		alert("請輸入手機號碼");
		return false;
	}
   if(obj6=="")
	{
		alert("請輸入郵件地址");
		return false;
	}
	
		if(document.register.myradio[0].checked==false)
		objSex = "女士";
		var message = objSex+"!   恭喜您！註冊成功！  ";
		message+="你的姓名是:"+obj1+obj2+"  您註冊的郵箱地址是:  "+obj3+"@gmail.com";
		alert(message);
}
function check_city()
{
	var obj1=document.getElementById("s1");
	var obj2=document.getElementById("s2");
	var obj3=document.getElementById("s3");
	obj2.options.length=0;
	obj3.options.length=0;
	if(obj1.selectedIndex==0)
	{
		obj2.options.add(new Option("成都","1"));
		obj2.options.add(new Option("綿陽","2"));
		obj3.options.add(new Option("高新區","1"));
		obj3.options.add(new Option("金牛區","2"));
	}
	else if(obj1.selectedIndex==1)
	{
		obj2.options.add(new Option("合肥","1"));
		obj2.options.add(new Option("六安","2"));
		obj3.options.add(new Option("瑤海區","1"));
		obj3.options.add(new Option("包河區","2"));
	}
	else if(obj1.selectedIndex==2)
	{
		obj2.options.add(new Option("杭州","1"));
		obj2.options.add(new Option("寧波","2"));
		obj2.options.add(new Option("溫州","3"));
		obj2.options.add(new Option("台州","4"));
		obj3.options.add(new Option("蕭山","1"));
	    obj3.options.add(new Option("富陽","2"));
	    obj3.options.add(new Option("餘杭","3"));
		obj3.options.add(new Option("淳安","4"));
	}
}
function check_town()
{
	var obj2=document.getElementById("s2");
	var obj3=document.getElementById("s3");
	obj3.options.length=0;
	if(obj2.options[obj2.selectedIndex].innerHTML=="成都")
	{
		obj3.options.add(new Option("高興區","1"));
	    obj3.options.add(new Option("金牛區","2"));
	}
	else if(obj2.options[obj2.selectedIndex].innerHTML=="自貢")
	{
		obj3.options.add(new Option("大安區","1"));
	    obj3.options.add(new Option("貢井區","2"));
	}
	else if(obj2.options[obj2.selectedIndex].innerHTML=="合肥")
	{
		obj3.options.add(new Option("瑤海區","1"));
	    obj3.options.add(new Option("包河區","2"));
	}
	else if(obj2.options[obj2.selectedIndex].innerHTML=="六安")
	{
		obj3.options.add(new Option("蕪湖","1"));
	    obj3.options.add(new Option("池州","2"));
	}
	else if(obj2.options[obj2.selectedIndex].innerHTML=="杭州")
	{
		obj3.options.add(new Option("蕭山","1"));
	    obj3.options.add(new Option("富陽","2"));
	    obj3.options.add(new Option("餘杭","3"));
		obj3.options.add(new Option("淳安","4"));
	}
	else if(obj2.options[obj2.selectedIndex].innerHTML=="寧波")
	{
		obj3.options.add(new Option("慈溪","1"));
	    obj3.options.add(new Option("四興","2"));
	}
}

window.onload = function(){  
strYYYY = document.register.YYYY.outerHTML;  
strMM = document.register.MM.outerHTML;  
strDD = document.register.DD.outerHTML;  
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
  
//先給年下拉框賦內容  
var y = new Date().getFullYear();  
var str = strYYYY.substring(0, strYYYY.length - 9);  
for (var i = (y-30); i < (y+30); i++) //以今年爲準，前30年，後30年  
{  
str += "<option value='" + i + "'> " + i + "</option>\r\n";  
}  
document.register.YYYY.outerHTML = str +"</select>";  
  
//賦月份的下拉框  
var str = strMM.substring(0, strMM.length - 9);  
for (var i = 1; i < 13; i++)  
{  
str += "<option value='" + i + "'> " + i + "</option>\r\n";  
}  
document.register.MM.outerHTML = str +"</select>";  
  
document.register.YYYY.value = y;  
document.register.MM.value = new Date().getMonth() + 1;  
var n = MonHead[new Date().getMonth()];  
if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;  
writeDay(n); //賦日期下拉框  
document.register.DD.value = new Date().getDate();  
}  
function YYYYMM(str) //年發生變化時日期發生變化(主要是判斷閏平年)  
{  
var MMvalue = document.register.MM.options[document.register.MM.selectedIndex].value;  
if (MMvalue == ""){DD.outerHTML = strDD; return;}  
var n = MonHead[MMvalue - 1];  
if (MMvalue ==2 && IsPinYear(str)) n++;  
writeDay(n)  
}  
function MMDD(str) //月發生變化時日期聯動  
{  
var YYYYvalue = document.register.YYYY.options[document.register.YYYY.selectedIndex].value;  
if (str == ""){DD.outerHTML = strDD; return;}  
var n = MonHead[str - 1];  
if (str ==2 && IsPinYear(YYYYvalue)) n++;  
writeDay(n)  
}  
function writeDay(n) //據條件寫日期的下拉框  
{  
var s = strDD.substring(0, strDD.length - 9);  
for (var i=1; i<(n+1); i++)  
s += "<option value='" + i + "'> " + i + "</option>\r\n";  
document.register.DD.outerHTML = s +"</select>";  
}  
function IsPinYear(year)//判斷是否閏平年  
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}  
/*
驗證數字的正則表達式集 
驗證數字：^[0-9]*$
驗證n位的數字：^\d{n}$
驗證至少n位數字：^\d{n,}$
驗證m-n位的數字：^\d{m,n}$
驗證零和非零開頭的數字：^(0|[1-9][0-9]*)$
驗證有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$
驗證有1-3位小數的正實數：^[0-9]+(.[0-9]{1,3})?$
驗證非零的正整數：^\+?[1-9][0-9]*$
驗證非零的負整數：^\-[1-9][0-9]*$
驗證非負整數（正整數 + 0）  ^\d+$
驗證非正整數（負整數 + 0）  ^((-\d+)|(0+))$
驗證長度爲3的字符：^.{3}$
驗證由26個英文字母組成的字符串：^[A-Za-z]+$
驗證由26個大寫英文字母組成的字符串：^[A-Z]+$
驗證由26個小寫英文字母組成的字符串：^[a-z]+$
驗證由數字和26個英文字母組成的字符串：^[A-Za-z0-9]+$
驗證由數字、26個英文字母或者下劃線組成的字符串：^\w+$
驗證用戶密碼:^[a-zA-Z]\w{5,17}$ 正確格式爲：以字母開頭，長度在6-18之間，只能包含字符、數字和下劃線。
驗證是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+
驗證漢字：^[\u4e00-\u9fa5],{0,}$
驗證Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$    \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
驗證InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
驗證電話號碼：^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$：--正確格式爲：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
驗證身份證號（15位或18位數字）：^\d{15}|\d{}18$
驗證一年的12個月：^(0?[1-9]|1[0-2])$ 正確格式爲："01"-"09"和"1""12"
驗證一個月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$    正確格式爲：01、09和1、31。
整數：^-?\d+$
非負浮點數（正浮點數 + 0）：^\d+(\.\d+)?$
正浮點數   ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮點數（負浮點數 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
負浮點數  ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮點數  ^(-?\d+)(\.\d+)?
*/

接着是CSS：

@charset "utf-8";
/* CSS Document */

.myinput 
{
	border: 1px solid;
	border-color:#D4BFFF;
	color:#339
}
body,select
{
font-size:9pt;
font-family:Verdana;
}
a
{
color:red;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1
{
	font-family:"MS Serif", "New York", serif;
	font-style:normal;
	font-weight:300;
	color:#06C;
}
h2
{
	font-family:"MS Serif", "New York", serif;
	font-weight:500;
	color:#00F;
}
#column1 
{ float:left; width: 33%; } 
#column2 
{ float:left; width: 33%; } 
#column3 
{ float:left; width: 33%; }

最後還剩下些資源（圖片啥的），要的話可以到下面的地址出下載哈！

http://download.csdn.net/detail/ergouge/4431547

網頁製作（七）---照着google註冊頁面邊學邊寫的一個網頁

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

sql求連續值問題

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

單擊鼠標右鍵--新建沒有word、 excel軟件了怎麼辦

網頁製作（七）---照着google註冊頁面邊學邊寫的一個網頁

破解文件只含有XX.jar文件怎麼搞呢

網頁製作（四）---重新聲明 JavaScript 變量

JavaScript自學ing（1）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結