网页制作（七）---照着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注册页面边学边写的一个网页相关推荐

HTML+CSS简单应用实例——购物网站的制作（二）注册页面
HTML+CSS简单应用实例--购物网站的制作(二)注册页面接上一篇文章,本片文章是注册页面. 下面是效果图: 分析:上方欢迎注册是DIV,下面是表单,点击登录按钮会出现注册成功提示.下方为脚本,同 ...
写的一个网页登录注册模板（css+js），注册成功后把账号保存到MySQL数据库，登录时从数据库查找进行验证（jsp+javabean）
首先是网页前端的设计,使用css美化(字体使用Google font,图标使用font awemome,颜色使用palettes|flat ui colors,谷歌可找到,个人觉得挺好用) 使用了简单 ...
Python 写了一个网页版的「P图软件」，惊呆了！
作者 | 小欣来源 | Python爱好者集中营今天是开工第一天,这篇文章可以算作是虎年的第一篇干货技术类文章了,今天小编用Python做了一个网页版的"P图软件",大致的流程 ...
用Python写了一个网页版的美图秀秀，惊呆了
今天小编用Python做了一个网页版的"P图软件",大致的流程在于我们可以将上传的照片进行黑白处理.铅笔素描处理.模糊化处理等一系列操作,具体如下下面我们来看一下该整个网页是怎么 ...
用css制作好看的登录注册页面
在这里插入代码片<!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
html页面tableview,用JS写的一个TableView控件代码
请看看编码是否规范,使用是否方便 HTML: 代码编号姓名 {value}{value} 编号名称 {value}{value} Javascript: 代码 //class TableView { ...
爽啊！写了一个网页：首字母索引的单词（十分垃圾，简单的不得了）
效果图: 无 GIF太难了 Html <!DOCTYPE html> <html lang="en"> <head><meta chars ...
jsp网页制作html页面,JSP制作静态网页.ppt
JSP制作静态网页 JSP制作静态网页主要内容 1 制作网站的原型 2 制作注册页面 2.1 HTML的常用标签 2.2 CSS简介 2.3 使用HTML+CSS制作注册页面 2.4 JavaScr ...
1号店html页面,1号店网页制作(HTML+CSS)
[实例简介] 初学网页制作运用html和css完成的1号店网页主页.登录和注册页面纯属个人学习制作在此分享特此声明感谢原网站资源1号店版权此资源纯属个人学习制作 [实例截图] [核心代码 ...

网页制作（七）---照着google注册页面边学边写的一个网页

网页制作（七）---照着google注册页面边学边写的一个网页相关推荐

最新文章

热门文章