html网页添加注册与登陆代码

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table width="90%" border="1" align="center" cellpadding="10" cellspacing="0">
<tr>
<td><a href="/webjx/"";index.asp">首页</a>
<%
if session("name")="" then
%>
<a href="/webjx/"";reg.asp">注册</a> <a href="/webjx/"";login.asp">登陆</a>
<a href="/webjx/"";pwd.asp">忘记密码？</a> <%
response.end()
end if
sql="select * from user"
set rs=server.createobject("adodb.recordset")
rs.open sql,conn,1,3
rs.addnew
rs("name")=trim(request.form("name"))
<tr>
<td>
用户登陆
<%
if session("name")="" then
%>
<form name="form1" method="post" action="loginok.asp?action=login" onsubmit="return chkform(this)">
<table border="1" cellspacing="0" cellpadding="5">
response.end
end if
next
nHale Waihona Puke xtend if%>
reg.asp

<%
if request("action")="reg" then
set rs=server.createobject("adodb.recordset")
rs("pwd")=trim(request.form("pwd"))
rs("wenti")=trim(request.form("wenti"))
rs("daan")=trim(request.form("daan"))
rs.update
rs.close
set rs=nothing
response.write "<script language=javascript> alert('注册成功，点击确定立即登录！');location.replace('login.asp');</script>"
else
%>
欢迎您<%=session("name")%>，<a href="/webjx/"";loginout.asp">注销登陆</a>
<%
end if
%>
<a href="/webjx/"";jiami.asp">加密页</a></td>
</tr>
</table>
<br>
login.asp

response.write "<script language=javascript>alert('传参错误！参数"&query_name&"的值中包含非法字符串！\n\n');location='"&request.servervariables("http_referer")&"'</script>"
<table width="347" border="1" cellpadding="5" cellspacing="0">
<tr>
<td width="142">用户名</td>
<td width="179"><input name="name" type="text" id="name"></td>
<tr>
<td width="116">用户名</td>
<td width="116"><input name="name" type="text" id="name"></td>
</tr>
<tr>
<td>密码</td>
<td><input name="pwd" type="password" id="pwd"></td>
<tr>
<td width="303"><%=session("name")%>，您已经成功登陆</td>
</tr>
</table>
<%
end if
%>
</td>
</tr>
</table>
</body>
</html>
loginok.asp

<tr>
<td>密码提示答案</td>
<td><input name="daan" type="text" id="daan"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="注册">
<input type="reset" name="submit" value="重置"> </td>
<%
session.timeout=30
if request("action")="login" then
name=trim(request.form("name"))
pwd=trim(request.form("pwd"))
if name="" or pwd="" then
response.redirect ("login.asp")
end if
set rs=server.createobject("adodb.recordset")
sql="select * from user where name='"&name&"'and pwd='"&pwd&"'"
rs.open sql,conn,1,1
if not rs.eof then
if request.querystring<>"" then
chk=split(badword,"|")
for each query_name in request.querystring

合集下载

1在html中添加js代码的三种方式以及js中变量，函数

1在html中添加js代码的三种⽅式以及js中变量，函数1.第⼀种⽅式：在时间句柄后太假js代码；例如浏览器弹出对话框;1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2"/TR/html4/loose.dtd">3<html>4<head>5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">6<title>⽆标题⽂档</title>7</head>89<body>1011121314151617<button type="button" onclick="window.alert('hello world')">请点击我</button>1819</body>20</html>2.第⼆种:让浏览器弹出对话框也可以把js代码写在独⽴脚本块中：1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2"/TR/html4/loose.dtd">3<html>4<head>5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">67<title>⽆标题⽂档</title>89101112<script type="text/javascript">13//在整个页⾯加载过程中之上⽽下的顺序解释执⾏14//并且alert⽅法具有阻塞作⽤，只有点击确定后alert⽅法才算执⾏完成,页⾯中才会出现"注册"15 alert("hello");16</script>17</head>1819<body>20注册21</body>22</html>3.第三种⽅式:将js⽂件（专门写js代码)引⽤到html中1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2"/TR/html4/loose.dtd">3<html>4<head>5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">6<title>⽆标题⽂档</title>7<script type="text/javascript" src="1.js">89//这⾥不能写js代码10//alert("你好，世界");11</script>12</head>1314<body>15注册16</body>17</html>4.js中的变量1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2"/TR/html4/loose.dtd">3<html>4<head>5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">67<title>JS中的变量</title>891011<script type="text/javascript">1213/*141.什么是变量？15 -内存中存储数据的最基本的单元16172.变量怎么声明？18 -java是⼀种强类型的语⾔19强类型：java语⾔是由编译阶段，在编译阶段就确定了变量的数据类型20例如:int i=10;21以上程序通过编译之后，i变量的数据类型从始⾄终都是int类型，不能将其他数据类型的值赋给i变量。

HTML+CSS+JavaScript项目6 “千年之恋”注册页面制作_0525_连蕊

改。在设置表格的边框时，还要给单元格单独设置相应的边框。
【任务6-2】知识点讲解
2、CSS控制单元格边距
设置单元格内容与边框之间的距离，可以对<td>标记应用内边距样式属性 padding，或对<table>标记应用HTML标记属性cellpadding。而<td>标记无外边距属性margin，要想设置相邻单元格边框之间的距离，只能对<table>标记应用
设置行背景图像
url地址
【任务6-1】知识点讲解
3、<tr>标记的属性
作为初学者，学习<tr>的属性时需要注意以下几点： • <tr>标记无宽度属性width，其宽度取决于表格标记<table>。 • 可以对<tr>标记应用valign属性，用于设置一行内容的垂直对齐方式。 • 虽然可以对<tr>标记应用background属性，但是在<tr>标记中此属性兼容问题严重。
【任务6-4】知识点讲解
1、input控件
值得一提的是，常常需要将<input />控件联合<label>标记使用，以扩大控件的选择范围，从而提供更好的用户体验，例如在选择性别时，
注意: 当为表格标记<table>同时设置width、height和cellpadding属性时，
cellpadding的显示效果将不太容易观察，所以一般在未给表格设置宽高
的情况下测试cellpadding属性。
【任务6-1】知识点讲解
2、<table> 标记的属性
（5）align属性 align属性用于定义元素的水平对齐方式，其可选属性值为left、 center、right。值得一提的是，当对<table>标记应用align属性时，控制的为表格的水平对齐方式，单元格中的内容不受影响。

实训四__设计用户系统的注册及登录

实训四设计用户系统的注册及登录一、实训目的1.能正确设计用户注册程序。

2.能正确设计用户登录程序。

3.能正确设计用户的管理程序。

二、工作任务任务1：将静态注册页面转换成动态ASP文件页面，设置表单对象。

任务2：为网页设置引用文件。

任务3：为注册页面编程，实现对填写的注册信息进行判断的功能，并将注册信息写入数据库。

任务4：为登录页面编程，实现登录功能，并出现欢迎用户登录的界面。

三、实训步骤（一）编程实现用户注册功能首先创建注册界面图1注册界面任务1操作方法：1）用dreamweaver打开前面我们所创建的动态，将项目三中所设计的静态注册页面reguser.html复制一份并改名为reguser.asp，其中注册部分页面如图2如所。

图2注册界面3）选择标签<form>，将其属性按图3修改，将表单名称命名为fom1，动作右侧的文本框中输入reguser.asp?act=reg，其含义为此表单提交到本页处理，并附加参数act=reg，此参数含义为表单填写完成后提交表单进行注册的参数传递，方法右侧的列表中选择post，其它方面可以忽略。

图3表单属性4）依照表1修改各个表单元素的名称，以方便程序的编写。

文本名称表单元素名称文本名称表单元素名称用户名f_user固定f_tel1f_tel2密码f_code手机f_mtelf_name其他联系f_contact性别f_sex提交submit详细地址f_addr 重置reset设计思想：当用户输入注册信息时，如果用户名或密码没有填写时系统出现提示信息“用户名或密码不能为空！”，并将重新注册；如果用户名在数据库中已经存在通过判断语句系统会有弹出提示信息“用户名已经存在，请重新注册！”，本教材的其他信息并不要求必须输入，读者可以自己设计；将用户信息写入到数据库的tbl_user表中保存，注册成功时会有弹出信息“注册成功！”，单击“确定”按钮将跳转到登录页面可供用户登录，如果注册失败弹出提示信息，并说明注册失败的原因。

html用户登陆界面代码

网易等邮箱网页登陆源代码2012

在网上找了许多，都是不能用的了，本地登陆还好，放到网站就显示：警告：系统检查到您可能通过不安全的网站登录，请您登录后立即修改密码！但是老板着急让完成。

就接着百度。

终于搞定。

代码共有两部分：一、登陆页面：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="/1999/xhtml"><HEAD><TITLE>中药方大全</TITLE><META content="text/html; charset=gbk" http-equiv=Content-Type><SCRIPT type=text/javascript src="config.js"></SCRIPT></HEAD><BODY ><FORM id=gomail class=c_form onSubmit="return checktype(this);"method=post name=gomail action=JavaScript:><INPUT type=hidden name=url><INPUT type=hidden name=username> <INPUT type=hidden name=type> <INPUTtype=hidden name=password> <INPUT type=hidden name=domain> <INPUTvalue=/inset.html type=hidden name=.done> <INPUTtype=hidden name=user> <INPUT type=hidden name=pass> <INPUT value=truetype=hidden name=enterVip> <INPUT type=hidden name=UserName> <INPUTtype=hidden name=Password> <INPUT type=hidden name=u> <INPUT type=hiddenname=psw> <INPUT type=hidden name=login> <INPUT type=hiddenname=LoginName> <INPUT type=hidden name=usr> <INPUT type=hidden name=func> <INPUT type=hidden name=login_name> <INPUT type=hiddenname=login_password> <INPUT type=hidden name=BackURL> <INPUTvalue=/mail?ui=html&zy=l type=hiddenname=continue> <INPUT type=hidden name=Email> <INPUT type=hiddenname=email> <INPUT type=hidden name=domainname> <INPUT value=falsetype=hidden name=firstlogin> <INPUT type=hidden name=starttime> <INPUTtype=hidden name=p2> <INPUT type=hidden name=passwd> <INPUT type=hiddenname=id> <INPUT type=hidden name=m> <INPUT type=hidden name=mpass> <INPUT type=hidden name=loginid> <INPUT type=hidden name=appid> <INPUTtype=hidden name=ru> <INPUT type=hidden name=eru> <INPUT type=hiddenname=fl> <INPUT type=hidden name=ct> <INPUT type=hidden name=vr> <INPUTtype=hidden name=sg> <INPUT type=hidden name=vwriter> <INPUT type=hiddenname=vpassword> <INPUT type=hidden name=passport_51_user> <INPUTtype=hidden name=passport_51_password> <INPUT type=hidden name=gourl><INPUT type=hidden name=Passwd> <INPUT value=cn type=hidden name=.intl><INPUT type=hidden name=origURL> <INPUT type=hidden name=formName> <INPUT type=hidden name=method> <INPUT value=true type=hidden name=isplogin><UL><LI><LABEL for=mail_user_ican123>帐号</LABEL> <INPUT id=mail_user_ican123class=int size=25 type=text name=uName> </LI><LI><LABEL for=mail_ail_server_ican123>邮箱</LABEL> <SELECTid=mail_server_ican123 class=select onchange=shortcut() name=domains><OPTION selected value=selected>--请选择--</OPTION> <OPTIONvalue=163> 网易</OPTION> <OPTION value=126></OPTION><OPTION value=sohu> 搜狐</OPTION> <OPTION value=sina>新浪</OPTION> <OPTION value=tom></OPTION> <OPTIONvalue=yahoo></OPTION> <OPTIONvalue=yahoocn></OPTION> <OPTION value=21cn></OPTION><OPTION value=eyou> 亿邮</OPTION> <OPTIONvalue=vipsina></OPTION> <OPTIONvalue=vip163></OPTION> <OPTION value=263></OPTION><OPTION value=yeah></OPTION> <OPTIONvalue=selected>以下请在弹出页登陆↓</OPTION> <OPTIONvalue=gmail></OPTION> <OPTION value=qq></OPTION><OPTION value=188></OPTION> <OPTION value=139></OPTION><OPTION value=sogou></OPTION> <OPTIONvalue=hotmail></OPTION> <OPTIONvalue=kaixin001>开心网</OPTION> <OPTIONvalue=selected>--社交网及其他--</OPTION> <OPTION value=baidu>百度账号</OPTION><OPTION value=renren>人人网</OPTION> <OPTION value=tianya>天涯社区</OPTION><OPTION value=51> 博客</OPTION> <OPTION value=cren>ChinaRen校友录</OPTION></SELECT> </LI><LI><LABEL for=mail_passwd_ican123>密码</LABEL> <INPUTid=mail_passwd_ican123 class=int size=15 type=password name=uPw> <INPUT id=mail_submit_ican123 class=btn value="登录" type=submit name=btn_my></LI></UL></FORM></BODY></HTML>二、相应的js代码（config.js）var ua=erAgent.toLowerCase();var isIE=ua.indexOf("msie")>-1;var isFF=ua.indexOf("firefox")>-1;function regE(c,b,a){if(window.attachEvent){c.attachEvent(b,a)}else {c.addEventListener(b.replace(/^on/,""),a,true)}}function $(a){return document.getElementById(a)}function os(a){return $(a).style}function ResumeError(){return true}window.onerror=ResumeError;// JavaScript Document/*var gm=document.gomail;var vDomain=gm.domains;var vName=gm.uName;var vPw=gm.uPw;*/function checktype(obj){if(obj.domains.value=="selected"){alert("您没有选择邮箱");obj.domains.focus();return false}if(obj.uName.value==""){alert("您没有填写用户名");obj.uName.focus();return false}if(obj.uPw.value==""){alert("您没有填写密码");obj.uPw.focus();return false}if(obj.domains.value=="163"||obj.domains.value=="126"||obj.domains.value=="yeah"){checkwangyi(obj);}else{clickMail(obj);}obj.uPw.value="";return ;this.location.reload();}function clickMail(obj){obj.target="_blank"switch(obj.domains.value){case "188":obj.action="/servlet/coremail/login?language=0&style=1"er.value=obj.uName.valueobj.pass.value=obj.uPw.valuebreakcase "vip163":obj.action="https:///logon.m?language=-1&style=-1" ername.value=obj.uName.valueobj.password.value=obj.uPw.valuebreakcase "netease":obj.action="/cgi/login?verifycookie=1&language=0" ername.value=obj.uName.valueobj.password.value=obj.uPw.valuebreakcase "sohu":obj.action="/login.jsp"obj.url.value=""erName.value=obj.uName.valueobj.Password.value=obj.uPw.valueobj.id.value=obj.uName.valueername.value=obj.uName.valueobj.password.value=obj.uPw.valueobj.m.value=obj.uName.valueobj.passwd.value=obj.uPw.valueobj.mpass.value=obj.uPw.valueobj.loginid.value=obj.uName.value+"@"obj.fl.value="1"obj.vr.value="1|1"obj.appid.value="1000"obj.ru.value="/servlet/LoginServlet"obj.eru.value="/login.jsp"obj.ct.value="1173080990"obj.sg.value="5082635c77272088ae7241ccdf7cf062"breakcase "yahoo":obj.action="https:///config/login"obj.login.value=obj.uName.valueobj.passwd.value=obj.uPw.valuebreakcase "yahoocn":obj.action="https:///config/login"obj.login.value=obj.uName.value+"@"obj.passwd.value=obj.uPw.valuebreakcase "tom":obj.action="/cgi/163/login_pro.cgi"er.value=obj.uName.valueobj.pass.value=obj.uPw.valuebreakcase "21cn":obj.action="/maillogin.jsp"obj.LoginName.value=obj.uName.valueobj.passwd.value=obj.uPw.valueobj.domainname.value=""erName.value=obj.uName.value+'@'breakcase "china":obj.action="/coremail/fcg/login"er.value=obj.uName.valueobj.pass.value=obj.uPw.valueobj.domainname.value=""//obj.passwd.value=obj.uPw.valuebreakcase "mailchina":obj.action="/extend/gb/NULL/NULL/NULL/SignIn.gen" obj.LoginName.value=obj.uName.valueobj.passwd.value=obj.uPw.valuebreakcase "citiz":obj.action="/default/login_billing.jsp"ername.value=obj.uName.value+"@"obj.password.value=obj.uPw.valuebreakcase "56":var gUrsHost=["m113","m48","m49"];obj.action="http://"+gUrsHost[((new Date()).getSeconds())%3]+"/mail/mail.56" ername.value=obj.uName.valueobj.password.value=obj.uPw.valuebreakcase "Xinhuanet":obj.action="/login.jsp"ername.value=obj.uName.valueobj.password.value=obj.uPw.valueobj.domainname.value=''breakcase "sina":obj.action="/cgi-bin/login.cgi"obj.u.value=obj.uName.valueobj.psw.value=obj.uPw.valuebreakcase "eyou":obj.action="/mail_login.php"obj.LoginName.value=obj.uName.valueobj.Password.value=obj.uPw.valuebreakcase "263":obj.action="/xmweb"r.value=obj.uName.valueobj.pass.value=obj.uPw.valueobj.domain.value=""obj.func.value="login"breakcase "qq":obj.action="/cgi-bin/login"obj.u.value=obj.uName.valueobj.p.value=obj.uPw.valueobj.starttime.value=(new Date()).valueOf()breakcase "vipsina":obj.action="/cgi-bin/login.php"obj.domain.value=''obj.u.value=obj.uName.valueobj.psw.value=obj.uPw.valuebreak;case "cren":obj.action="/login.jsp"obj.loginid.value=obj.uName.value+"@"obj.passwd.value=obj.uPw.valueobj.fl.value="1"obj.vr.value="1|1"obj.appid.value="1005"obj.ru.value="/urs/setcookie.jsp?burl=/" obj.ct.value="1174378209"obj.sg.value="84ff7b2e1d8f3dc46c6d17bb83fe72bd"breakcase "tianya":obj.action="/user/loginsubmit.asp"obj.vwriter.value=obj.uName.valueobj.vpassword.value=obj.uPw.valuebreakcase "51":obj.action="/login.5p"obj.passport_51_user.value=obj.uName.valueobj.passport_51_password.value=obj.uPw.valueobj.gourl.value="http%3A%2F%%2Fwebim%2Findex.php"breakcase "renren":obj.action="/Login.do"obj.email.value=obj.uName.valueobj.password.value=obj.uPw.valuebreakcase "baidu":obj.action="https:///?login"ername.value=obj.uName.valueobj.password.value=obj.uPw.valueobj.u.value="/index.php?tn=fm991_pg"break}obj.uPw.value = ""SetmailCookie('m',obj.domains.selectedIndex,5184000,'/')//obj.uPw.value = ""return true}function checkwangyi(obj){obj.target="_parent"var url="";var lname=obj.uName.value;var lpass=obj.uPw.value;var lindex=obj.domains.selectedIndex;if(lindex==1)url="/logins.jsp?type=1&url=/coremail/fcg/ntesdoor2?&u sername="+lname+"&password="+lpass;if(lindex==2)url="/logins.jsp?type=1&url=/cgi/ntesdoor?&usernam e="+lname+"@"+"&password="+lpass;if(lindex==13)url="/logins.jsp?type=1&url=/cgi/ntesdoor?&usernam e="+lname+"@"+"&password="+lpass;openWin(url);// else obj.submit();return true;}function shortcut(){var gm=document.gomail;var vDomain=gm.domains,vName=gm.uName,vPw=gm.uPw;if(vDomain.value=="qq")window.open("");else if(vDomain.value=="hotmail")window.open("/");else if(vDomain.value=="sogou")window.open("/");else if(vDomain.value=="139")window.open("/");else if(vDomain.value=="gmail")window.open("/");else if(vDomain.value=="188")window.open("/");else if(vDomain.value=="kaixin001")window.open("/");setCookies();}function setCookies(){var gm=document.m;var vDomain=gm.domains,vName=gm.uName;if(vDomain.value!="qq"&&vDomain.value!="hotmail"&&vDomain.value!="sogou"&&vDo main.value!="139"&&vDomain.value!="gmail"&&vDomain.value!="188"&&vDomain.value!=" kaixin001"){setmailCookie('mailType',vDomain.selectedIndex.toString ());if(vName.value)setmailCookie('username',vName.value.toString ());}else {var mailType=getCookie('mailType')?getCookie('mailType'):0;for(var i=0;i<vDomain.options.length;i++){if(i!=parseInt(mailType)){vDomain.options[i].removeAttribute("selected");}else {vDomain.options[mailType].setAttribute("selected","true");}}}}function openWin(url){window.open(url);}function SetmailCookie(n,v,t,dm){}三、测试页面/test/pingtou/mail.htm联系QQ：110102296。

浏览器中F12功能的简单介绍

浏览器中F12功能的简单介绍⾸先介绍edge开发者⼯具中，调试时使⽤最多的三个功能页⾯是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有⽹络（Network）等。

元素（Elements）：⽤于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。

控制台（Console）：控制台⼀般⽤于执⾏⼀次性代码，查看JavaScript对象，查看调试⽇志信息或异常信息。

源代码（Sources）：该页⾯⽤于查看页⾯的HTML⽂件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

⽹络（Network）：⽹络页⾯主要⽤于查看header等与⽹络连接相关的信息。

1、元素（Elements）利⽤⿏标点击箭头（或⽤者⽤快捷键Ctrl+Shift+C）进⼊选择元素模式，然后从页⾯中选择需要查看的元素，然后可以在开发者⼯具元素（Elements）⼀栏中定位到该元素源代码的具体位置。

查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如上图位置查看修改元素的代码与属性：可直接双击想要修改的部分，然后就进⾏修改，或者选中要修改部分后点击右键进⾏修改，如下图：修改元素的代码与属性：可直接双击想要修改的部分，然后就进⾏修改，或者选中要修改部分后点击右键进⾏修改，如下图点击需要修改的元素：右击⿏标进⾏编辑：注意：这个修改也仅对当前的页⾯渲染⽣效，不会修改服务器的源代码，故⽽这个功能也是作为调试页⾯效果⽽使⽤。

右边的侧栏个功能的介绍:如下图所⽰2、控制台（Console）查看JS对象的及其属性执⾏JS语句查看控制台⽇志：当⽹页的JS代码中使⽤了console.log()函数时，该函数输出的⽇志信息会在控制台中显⽰。

⽇志信息⼀般在开发调试时启⽤，⽽当正式上线后，⼀般会将该函数去掉。

HTML精品教程资料：05-项目案例：制作1号店网站

2/38
任务描述制作1号店网站
首页搜索列表页商品详情页登录页注册页
3/38
问题分析1：整体开发思路
网页制作步骤
制作网站公用部分（网站导航和版权部分）制作1号店首页（index.html）制作搜索列表页（searchList.html）制作商品详情页（ detail.html ）制作登录页（ loginpage.html）制作注册页（ registerpage.html）
移入时设置放大动画[25分钟]
}
11/38
开发计划3-1
用例1：制作网站公用部分
网站导航
完成时间：30分钟
网站版权
完成时间：20分钟
用例2：制作网站首页
全部商品分类
完成时间：20分钟
轮播图
完成时间：20分钟
快讯
完成时间：15分钟
热门产品
完成时间：20分钟
进口生鲜
完成时间：25分钟
12/38
开发计划3-2
用例3：制作搜索列表页
使用过渡给“天天低价”列表项添加动画
讲解需求说明
15/38
用例1：网站公用部分3-2
分析使用无序列表制作顶部导航和主导航菜单使用过渡给“天天低价”列表项添加动画
提示
<div class="b_btm_bg b_btm_c">
<ul class="b_btm">
<li>
<a><img src="images/b1.png" width="62"
项目案例：制作1号店网站
本课目标
学完本次课程后，你能够：

用纯javascript和html编写仿淘宝注册页面（带源码）

⽤纯javascript和html编写仿淘宝注册页⾯（带源码）本地javascript（纯天然代码）验证，本地验证主要分2部分：⼀、和⽤户的表单交互⾸先需要编写⽤于表单交互的函数，该函数需要在页⾯加载时加载，格式如下：window.onload=function (){}接着⽤getElement的⽅法获取相应的标签在function函数⾥定义为全局变量。

然后在function内编写这些变量的事件，⽤到的三⼤事件分别为：onfocus（获取焦点事件）、onkeyup（键盘事件）、onblur（失去焦点事件）。

⽤法：以onfocus为例如下：pwd.onfocus=function(){//变量pwd的获取焦点事件pwd_msg.style.display="block";pwd_msg.innerHTML='<i class="ati"></i>6-16个字符，请使⽤字母加数字或符号的组合密码，不能单独使⽤字母、数字或符号。

';}⼆、点击提交按钮是对表单的检验主要⽤到onsumit（表单提交前）事件，⽤法如下：<form method="post" action="aupload.php" enctype="multipart/form-data" onsubmit="return check()">需要在function外单独再编写check函数。

三、完整源代码及运⾏截图献上<!DOCTYPE html><html><head><meta charset="UTF-8"><title>验证码</title><style type="text/css">#header{ width:95%; height:100px; padding-left:5%; clear:both; border-bottom:#CCC dashed thin ;}#header img{width:80px; height:80px; float:left; border-radius:40px; margin-top:10px ;margin-bottom:10px; }#header h1{display:inline-block; margin-left:20px;}#main{ width:100%; height:auto;}body,div,dl,dd,ul,ol,li{ margin:0;padding:0; font:12px/1.5"宋体","Arial",color:#666;}body{background:url(uploads/0911454230045.png) no-repeat; background-size:700px,450px; background-position:50px 120px;}img{ border:none}input,select,img{ vertical-align:middle}/*有疑惑*/lable{vertical-align:middle}form{ width:450px; height:500px; margin-top:130px; margin-right:80px;float:right; }form div{ overflow:hidden; clear:both}form div label{float:left; clear:both;}form div label .text{ width:152px; height:26px; padding:0 2px; border:1px solid #ccc }form div label b{ font-weight:normal; font-size:12px; color:#ccc; visibility:hidden}/*有疑惑*/form div em{ display:inline-block; font-family:12px; text-align:center;color:#fff; vertical-align:middle; font-style:normal; width:53px;height:15px; line-height:15px; background-color:#ffd099} form div .active{ background-color:#ff6600}div span{ display:inline-block; width:80px; text-align:right}.submitBtn{width:135px; height:33px; background:url(); color:red; margin:20px 0 0 80px;}/*需完善*/.changeimg{ width:22px; height:22px; display:inline-block; vertical-align:middle;background:url(uploads/img1.png) no-repeat 5px 1px}/*需完善*/.msg{ line-height:14px; color:#999; float:left; margin-left:5px;margin-top:2px; display:none; }.msg i{ display:inline-block; vertical-align:middle; width:25px; height:20px; background:url(uploads/img1_1.png) no-repeat}/*.msg .ati{ background:0 -71px}.msg .err{background:0 -39px}.msg .ok{background:0 -99px}*/</style><script type="text/javascript">function getLength(str){return str.replace(/[^\x00-xff]/g,"xx").length;//使⽤替换函数将正则值替换为xx}function findStr(str,n){//检测是否密码为连续的相同字符var tmp=0;for(var i=0;i<str.length;i++){if(str.charAt(i)==n){tmp++;}}return tmp;}var code = ""; //验证码//⽣成验证码function createCode(){code = "";//重新初始化验证码var num = 4; //验证码位数var codeList = new Array(1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'); //验证码内容//循环获取每⼀位验证码for(var i = 0; i < num; i++){//随机数 * 验证码候选元素数量 = 候选元素数组下标code += codeList[Math.floor(Math.random() * codeList.length)];}document.getElementById("txtCode").value = code;}window.onload=function (){createCode(); //加载验证码var alnput=document.getElementsByTagName('input');var oName=alnput[0];var pwd=alnput[1];var pwd2=alnput[2];var ma1=alnput[3];var ma2=alnput[4];var aP=document.getElementsByTagName('p');//ap中的P为⼤写var name_msg=aP[0];var pwd_msg=aP[1];var pwd2_msg=aP[2];var ma=aP[3];var count=document.getElementById('count');var aEm=document.getElementsByTagName('em');var name_length=0;//1.数字、字母(不分⼤⼩写)、汉字、下划线//2. 5-25字符，推荐使⽤中⽂//\u4e00-\u9fa5(这是汉字的范围)var re=/[^\w\u4e00-\u9fa5]/g;var re_n=/[^\d]/g;var re_t=/[^a-zA-Z]/g;//⽤户名oName.onfocus=function(){name_msg.style.display="block";name_msg.innerHTML='<i class="ati"></i>5-25个字符';}//获取焦点事件oName.onkeyup=function(){count.style.visibility="visible";//有疑惑name_length=getLength(this.value);count.innerHTML=name_length+"个字符";if(name_length==0){count.style.visibility="hidden";}}//键盘事件oName.onblur=function(){//含有⾮法字符var re=/[^\w\u4e00-\u9fa5]/g;if(re.test(this.value)){name_msg.innerHTML='<i class="err"></i>含有⾮法字符';}//不能为空else if(this.value==""){name_msg.innerHTML='<i class="err"></i>不能为空';}//长度超过25个字符else if(name_length>25){name_msg.innerHTML='<i class="err"></i>长度超过25个字符';}//长度少于6个字符else if(name_length<6){name_msg.innerHTML='<i class="err"></i>长度少于6个字符';}//okelse{name_msg.innerHTML='<i class="ok"></i>ok';}}//失去焦点事件//密码pwd.onfocus=function(){pwd_msg.style.display="block";pwd_msg.innerHTML='<i class="ati"></i>6-16个字符，请使⽤字母加数字或符号的组合密码，不能单独使⽤字母、数字或符号。

网页登陆代码

width:500px;
height:30px;
border-bottom-color:#000;
border-bottom-style:groove;
border-bottom-width:2px;
line-height:30px;
font-weight:bold;
background-color:#999;
<br/><br/>
<input type="reset" value="重置" style="width:100px height:30px; background-cloor"#666; border-style:hidden;"/>
<input type="submit" value="登录" style="width:100px height:30px; background-cloor"#666; border-style:hidden;"/>
<br/>
用户:<input type="text" style="width:200px height:30px; background-cloor"#999; border-style:hidden;"/>
<br/><br/>
密码:<input type="password" style="width:200px height:30px; background-cloor"#999; border-style:hidden;"/>

html5注册页面示例代码

代码如下:<!doctype html><html><head><title>register.html</title><meta http-equiv=keywords content=keyword1,keyword2,keyword3> <meta http-equiv=description content=this is my page><meta http-equiv=content-type content=text/html; charset=utf-8><link rel=shortcut icon href=favicon.ico /><link rel=stylesheet type=text/css href=css/register.css /><script src=js/checkbox.js type=text/javascript></script><script type=text/javascript>function play(){document.getelementbyid(menu_item).style.display = ;}function noplay(){document.getelementbyid(menu_item).style.display = none;}function passwd(){var pass = document.getelementbyid(password).value;var tip = document.getelementbyid(tip);if (pass.length < 4) {document.getelementbyid(meter).value = pass.length;tip.innerhtml = 差;}elseif (pass.length <= 8) {document.getelementbyid(meter).value = pass.length;tip.innerhtml = 中;}else {document.getelementbyid(meter).value = pass.length;tip.innerhtml = 高;}}</script></head><body><div id=3 style=position: relative; top: 100px; z-index: 3;><form id=f1 action=register.html method=post><table align=center cellspacing=0 class=table><td align=center>会员注册</td></tr><tr><td><table id=registertable border=0px align=center border=0px cellspacing=0 cellpadding=5px><tr><tr><td align=right>员工编号：</td><td align=left><input type=text name=username placeholder=用户名required/></td></tr><tr><td align=right>密码：</td><td align=left><input type=password name=password id=password placeholder=密码required onkeyup=passwd()/><meter min=1 max=10 low=5 high=8 value=0 id=meter></meter><span id=tip></span></td></tr><tr><td align=right>密码确认：</td><td align=left><input type=password name=password2 placeholder=确认密码required/></td></tr><tr><td align=right>生日：</td><input type=date name=borthday /></td></tr><tr><td align=right>性别：</td><td align=left><input type=radio name=gender value=0 checked/>男<input type=radio name=gender value=1/>女</td></tr><tr><td align=right>邮箱：</td><td align=left><input type=email name=email placeholder=邮箱id=email required/></td></tr><tr><td align=right>手机：</td><td align=left><input type=tel pattern=[0-9]{11} id=p name=phone placeholder=请输入11位数字/> </td></tr><tr><td align=right>地址：</td><td align=left><input type=text name=address placeholder=地址list=l/><datalist id=l><option value=sh>上海</option><option value=bj>北京</option><option value=js>江苏</option><option value=zz>郑州</option><option value=sz>深圳</option></datalist></td></tr><tr><td align=right>个人网页：</td><td align=left><input type=url name=page placeholder=主页网址/></td></tr><tr><td align=right>起床时间：</td><td align=left><input type=time name=bed onblur=pro()/></td></tr><tr><td align=right>头像：</td><td align=left><input type=file id=f accept=image/jpeg onchange=show()/><span><img id=img src= width=60 height=60 /></span><script>function show(){var file = document.getelementbyid(f).files[0];var filereader = new filereader();filereader.readasdataurl(file);filereader.onload = function(){document.getelementbyid(img).src = filereader.result;}}</script></td></tr><tr><td colspan=2><details><p>允许注册<mark>许可证</mark>信息</p><summary>注册许可信息</summary></details></td></tr><tr><td align=right>验证码：</td><td valign=middle><input type=text name=captcha size=11 maxlength=4 title=输入右边的验证码/><span id=span></span><script>var span = document.getelementbyid(span);span.innerhtml=math.floor(math.random());</script></td></tr><tr height=60px><td align=center colspan=2><input type=button value=转到登录onclick=window.location.replace('login.html') id=btn1 onmousemove=changebgcolor('btn1') onmouseout=recoverbgcolor('btn1') class=submit /> <input type=submit accesskey=enter value=注册id=btn onmousemove=changebgcolor('btn') onmouseout=recoverbgcolor('btn'); class=submit formmethod=post/></td></tr></table></td></tr></table></form></div></body></html>代码如下:body {background-image: url(../images/bg.jpg);text-align: center;background-repeat: repeat-x;background-position: 0px 0px ;background-size：}.table {border: 1px solid #90bfff;width:810px;}tr {font-family: 微软雅黑;font-weight:800;color: #448ef3;}input{border: 1px solid #448ef3;color: #448ef3;font-weight:bold;font-family: 微软雅黑;height: 35px;line-height: 30px;border-radius:5px;}.submit {width: 150px;height: 40px;cursor :hand;font-size: 20px;color: #ffffff;background-color: #448ef3;border: 0px;}.thead {height: 40px; background : #90bfff;font-family: 微软雅黑;font-size: 30px;font-weight: 700;color: #ffffff;background: #90bfff;}#3{margin-bottom: 100px;}代码如下:function chkallclick(sonname, cballid){var arrson = document.getelementsbyname(sonname); var cball = document.getelementbyid(cballid);var tempstate=cball.checked;for(i=0;i<arrson.length;i++) {if(arrson[i].checked!=tempstate)arrson[i].click();}}function chksonclick(sonname, cballid) {var arrson = document.getelementsbyname(sonname);var cball = document.getelementbyid(cballid);for(var i=0; i<arrson.length; i++) {if(!arrson[i].checked) {cball.checked = false;return;}}cball.checked = true;}function chkoppclick(sonname){var arrson = document.getelementsbyname(sonname);for(i=0;i<arrson.length;i++) {arrson[i].click();}}function changebgcolor(btn){var btn = document.getelementbyid(btn);btn.style.backgroundcolor = #90bfff}function recoverbgcolor(btn){var btn = document.getelementbyid(btn);btn.style.backgroundcolor = #448ef3}------------------------------------------------上面文件的顺序是：register.html register.css checkbox..js -------------------------------------------------背景图片：bg.jpg。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。