首先看下效果图
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
margin: 0px auto;
width: 950px;
height: 750px;
/* border: 1px red solid; */
}
.div2{
width: 300px;
height: 700px;
float: left;
/* border: 1px red solid; */
}
.div21{
width: 300px;
height: 100px;
float: right;
/* border: 1px red solid; */
}
.p21{
line-height: 100px;
float: right;
font-size: 15px;
color: #999999;
margin-right: 20px;
}
.div3{
width: 300px;
height: 700px;
float: left;
/* border: 1px red solid; */
}
.div4{
width: 300px;
height: 700px;
float: left;
/* border: 1px red solid; */
}
span{
color: red;
}
.div31{
border: solid 1px #E8E8E8;
line-height: 100px;
width: 285px;
height: 50px;
margin-top: 25px;
margin-left: 5px;
background-color: #F8F8F8;
}
.inpu1{
border: 1px #999999 solid;
line-height: 100px;
width: 300px;
height: 50px;
margin-top: 25px;
margin-left: 0px;
}
.inpu1:hover{
border: 2px #94AA85 solid;
line-height: 100px;
width: 300px;
height: 50px;
margin-top: 25px;
margin-left: 0px;
}
.input2{
border: 1px #999999 solid;
line-height: 50px;
width: 300px;
height: 50px;
margin-top: 25px;
margin-left: 0px;
background-color: #E64348;
color:white;
font-size: 20px;
text-align: center;
}
.input3{
line-height: 100px;
}
.p2{
text-align: center;
line-height: 100px;
font-size: 12px;
}
.p3{
text-align: center;
line-height: 50px;
font-size: 12px;
}
.div{
margin: 0px auto;
width: 1050px;
height: 750px;
/* border: 1px red solid; */
}
.div ul{
margin-top: 10px;
margin-left: 240px;
width: 800px;
height: 100px;
list-style: none;
}
.div ul li{
float: left;
margin-left: 5px;
height: 70px;
}
.div ul li a{
display: block;
box-sizing: border-box;
padding: 10px 28px;
border: 1px silver solid;
font-weight: bold;
}
.div ul li a:hover{
display: block;
box-sizing: border-box;
padding: 10px 28px;
border: 1px silver solid;
font-weight: bold;
color: red;
}
.clear{
clear: both;
}
#pv1,#pv2,#pv3,#pv4,#pv5{
display: none;
}
</style>
<script src="jd.js"></script>
<script src="jdcode.js"></script>
</head>
<body>
<div class="div">
<ul>
<li><a href="#">个人用户</a></li>
<li><a href="#">企业用户</a></li>
<li><a href="#">internatioal Customers</a></li>
</ul>
<div class="clear"></div>
<div class="div1">
<div class="div2">
<div class="div21">
<p class="p21"><span>*</span>用户名:</p>
</div>
<div class="div21">
<p class="p21"><span>*</span>请设置密码:</p>
</div>
<div class="div21">
<p class="p21"><span>*</span>请确认密码:</p>
</div>
<div class="div21">
<p class="p21"><span>*</span>验证手机:</p>
</div>
<div class="div21">
<p class="p21"><span>*</span>短信验证:</p>
</div>
</div>
<div class="div3">
<div class="div21">
<input class="inpu1" type="text" name="yhm" id="t1" onblur="no1()" onfocus="yes1()"/>
</div>
<div class="div21">
<input class="inpu1" type="password" name="yhm" id="t2" onblur="no2()" onfocus="yes2()"/>
</div>
<div class="div21">
<input class="inpu1" type="password" name="yhm" id="t3" onblur="no3()" onfocus="yes3()"/>
</div>
<div class="div21">
<input class="inpu1" type="text" name="yhm" id="t4" onblur="no4()" onfocus="yes4()"/>
</div>
<div class="div21">
<input class="inpu1" type="text" name="yhm" id="t5" onblur="no()" onfocus="yes()"/>
</div>
<div class="div21">
<p class="p2"><input type="checkbox" class="input3"/> 我以阅读并同意<a href="#">《京东用户注册协议》</a></p>
</div>
<div class="div21">
<input class="input2" type="button" value="立即注册" onclick="check()" id="qidong"/>
</div>
</div>
<div class="div4">
<div class="div21" >
<div class="div31" id="pv1">
<p class="p3">4-20为字符,支持中英文,数字及“. ,—”组合</p>
</div>
</div>
<div class="div21">
<div class="div31" id="pv2">
<p class="p3">密码最少8位,必须同时包括英文,数字</p>
</div>
</div>
<div class="div21">
<div class="div31" id="pv3">
<p class="p3">必须与密码保持一致</p>
</div>
</div>
<div class="div21">
<div class="div31" id="pv4">
<p class="p3">手机号码为11为数字不能为空</p>
</div>
</div>
<div class="div21">
<div class="div31" id="pv5">
<p class="p3" >验证码为4位数字,请注意查收短信</p>
</div>
</div>
</div>
</div>
</div>
</body>
JS的jdcode.js代码如下
function $(str){
return document.getElementById(str);
}
function check(){
if(name()&&pass()&&rpass()&&phone()&¬e()){
document.write("<h2>恭喜您注册成功</h2>");
}
}
function name(){
var nameObj=$("t1");
var strName=nameObj.value;
if(strName.length==0){
alert("用户名不能为空");
nameObj.focus;
return false;
}
if(strName.length<4||strName>16){
alert("用户名应有4-20的字符组成");
nameObj.select();
return false;
}
return true;
}
function pass(){
var passObj=$("t2");
var strPass=passObj.value;
if(strPass.length==0){
alert("密码不能为空");
passObj.focus();
return false;
}
if(strPass.length<8){
alert("密码最小长度应该8位");
passObj.select();
return false;
}
var english=false;
var figure=false;
for(var i=0;i<strPass.length;i++){
if((strPass[i]>='a'&&strPass[i]<='z')||(strPass[i]>='A'&&strPass[i]<='Z'))
{
english=true;
}
if(strPass[i]>='0'&&strPass[i]<='9'){
figure=true;
}
}
if(!(english==true&&figure==true)){
alert("密码必须同时包括英文,数字");
return false;
}
return true;
}
function rpass(){
var passObj=$("t2");
var rPssObj=$("t3");
var strPass=passObj.value;
var strRpass=rPssObj.value;
if(strPass!=strRpass){
alert("密码与原密码不一致");
rPssObj.select();
return false;
}
return true;
}
function phone(){
var phoneObj=$("t4");
var strPhone=phoneObj.value;
if(strPhone.length==0){
alert("手机号码不能为空");
phoneObj.focus();
return false;
}
if(strPhone.length!=11){
alert("手机号码长度应为十一位数");
phoneObj.select();
return false;
}
for(var i=0;i<strPhone.length;i++){
// strPhone.charAt(i) --> str[i] 返回下标为I 的字符
if(!(strPhone.charAt(i)>='0'&&strPhone.charAt(i)<='9')){
alert("手机号码自能为数字");
phoneObj.select();
return false;
}
}
return true;
}
function note(){
var noteObj=$("t5");
var strNote=noteObj.value;
if(strNote.length!=6){
alert("验证码应为六位");
noteObj.select();
return false;
}
if(isNaN(strNote)){
alert("验证码应该为数字");
noteObj.select();
return false;
}
return true;
}
JS中 jd.js的代码如下
function yes(){
document.getElementById("pv5").style.display="block";
}
function no(){
document.getElementById("pv5").style.display="none";
}
function yes1(){
document.getElementById("pv1").style.display="block";
}
function no1(){
document.getElementById("pv1").style.display="none";
}
function yes2(){
document.getElementById("pv2").style.display="block";
}
function no2(){
document.getElementById("pv2").style.display="none";
}
function yes3(){
document.getElementById("pv3").style.display="block";
}
function no3(){
document.getElementById("pv3").style.display="none";
}
function yes4(){
document.getElementById("pv4").style.display="block";
}
function no4(){
document.getElementById("pv4").style.display="none";
}