用html+css+js写简单页面
用js写简单页面
效果图
html部分：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<script type="text/javascript" src="js/base.js">script>
head>
<body>
<div class="login">
<div class="login-box">
<span class="caption">欢迎您注册网站会员，如果您已有账户，则可就在此<s>登录s>span>
<div class="login-text">
用 户 名：<input type="text" class="username"> <span class="span1">用户名支持数字和字母，位数至少为四位span>
设置密码: <input type="password" class="password"> <span class="span2">密码支持数字和字母，位数至少为四位span>
确认密码: <input type="password" class="passwordss"> <span class="span3">再次输入密码span>
手 机：<input type="text" class="tel"><span class="span4">span>
邮 箱：<input type="email" class="email"><span class="span5">邮箱后面必须带有@号span>
验 证 码 : <input type="text" class="yzm"> <button class="picyzm">获取验证码button><span class="span6">span>
<input type="button" value="立即注册" class="zhuce">
div>
div>
div>
body>
html>
css部分：
.login{
width:780px;
height:350px;
background:url(img/bg.jpg)no-repeat;
background-size:780px 350px;
margin:100px auto;
opacity:0.8;
border:1px solid #999;
}
.login-box{
margin:35px auto;
width:509px;
height:280px;
border:1px solid #999;
background:rgba(255,255,255,0.7);
border-radius:10px;
color:#000;
box-shadow:2px 2px 8px ;
}
.caption{
margin-top:22px;
margin-left:14px;
padding-bottom:6px;
display:block;
font-size:8px;
width:480px;
height:15px;
color:#000;
border-bottom:1px solid #999;
}
.caption s,span{
color:blue;
}
.login-text{
font-size:8px;
width:460px;
height:197px;
margin:3px auto 50px;
}
.span1,.span2,.span3,.span4,.span5,.span6,.span7{
display:inline-block;
width:230px;
height:20px;
font-size:4px;
}
input{
width:160px;
height:20px;
border-radius:5px;
margin:3px 0px;
border:1px solid #ccc;
}
.yzm{
width:80px;
}
.picyzm{
width:76px;
height:26px;
font-size:6px;
}
.zhuce{
outline:none;
width:76px;
height:25px;
background:blue;
color:#fff;
border:1px solid #ccc;
margin-left:80px;
margin-top:10px;
}
js部分：
var username=document.getElementsByClassName("username")[0];
var pwd=document.getElementsByClassName("password")[0];
var pwds=document.getElementsByClassName("passwordss")[0];
var tel=document.getElementsByClassName("tel")[0];
var email=document.getElementsByClassName("email")[0];
var picyzm=document.getElementsByClassName("picyzm")[0];
var yzm=document.getElementsByClassName("yzm")[0];
var zhuce=document.getElementsByClassName("zhuce")[0];
var span1=document.getElementsByClassName("span1")[0];
var span2=document.getElementsByClassName("span2")[0];
var span3=document.getElementsByClassName("span3")[0];
var span4=document.getElementsByClassName("span4")[0];
var span5=document.getElementsByClassName("span5")[0];
var span6=document.getElementsByClassName("span6")[0];
var ureg=/[a-zA-Z0-9]{4,}/;
var treg=/[0-9]{11}/;
var ereg=/[@]{0}[A-Za-z]{3,}/g;
username.onfocus=function(){
username.lastIndex=0;
username.style.border="1px solid blue";
span1.innerHTML="用户名支持数字和字母，位数至少为四位";
span1.style.color="blue";
username.value="";
}
username.onblur=function(){
if(username.value==""){
span1.innerHTML="用户名不能为空";
span1.style.color="red";
username.style.border="1px solid red";
}
else if((username.value!="")&&(username.value.length<4)){
span1.innerHTML="用户名长度错误";
span1.style.color="red";
username.style.border="1px solid red";
}
else if(!ureg.test(username.value)){
username.style.border="1px solid red";
span1.innerHTML="用户名输入错误"
span1.style.color="red";
}else{
username.style.border="1px solid #ccc";
}
}
pwd.onfocus=function(){
pwd.lastIndex=0;
pwd.style.border="1px solid blue";
span2.innerHTML="密码支持数字和字母，位数至少为四位";
span2.style.color="blue";
pwd.value="";
}
pwd.onblur=function(){
if(pwd.value==""){
pwd.style.border="1px solid red";
span2.innerHTML="密码不能为空";
span2.style.color="red";
}
else if((pwd.value!="")&&(pwd.value.length<4)){
pwd.style.border="1px solid red";
span2.innerHTML="密码长度错误";
span2.style.color="red";
}
else if(!ureg.test(pwd.value)){
pwd.style.border="1px solid red";
span2.innerHTML="密码输入错误"
span2.style.color="red";
}else{
pwd.style.border="1px solid #ccc";
}
}
pwds.onfocus=function(){
pwds.lastIndex=0;
pwds.style.border="1px solid blue";
span3.innerHTML="再次输入密码";
span3.style.color="blue";
pwds.value="";
}
pwds.onblur=function(){
if(pwds.value==""){
pwds.style.border="1px solid red";
span3.innerHTML="密码不能为空";
span3.style.color="red";
}
else if((pwds.value!="")&&(pwds.value.length<4)){
pwds.style.border="1px solid red";
span3.innerHTML="密码长度错误";
span3.style.color="red";
}
else if(!ureg.test(pwds.value)){
pwds.style.border="1px solid red";
span3.innerHTML="密码格式输入错误"
span3.style.color="red";
}else if(pwd.value!=pwds.value){
pwds.style.border="1px solid red";
span3.innerHTML="两次密码不一致"
span3.style.color="red";
}else{
pwds.style.border="1px solid #ccc";
}
}
tel.onfocus=function(){
tel.lastIndex=0;
tel.style.border="1px solid blue";
span4.style.color="blue";
span4.innerHTML="";
tel.value="";
}
tel.onblur=function(){
if(tel.value==""){
tel.style.border="1px solid red";
span4.innerHTML="手机不能为空";
span4.style.color="red";
}else if(!treg.test(tel.value)){
tel.style.border="1px solid red";
span4.innerHTML="手机长度错误"
span4.style.color="red";
}else{
tel.style.border="1px solid #ccc";
}
}
email.onfocus=function(){
email.lastIndex=0;
email.style.border="1px solid blue";
span5.style.color="blue";
span5.innerHTML="";
email.value="";
}
email.onblur=function(){
if(email.value==""){
email.style.border="1px solid red";
span5.innerHTML="邮箱不能为空";
span5.style.color="red";
}else if(!ereg.test(email.value)){
email.style.border="1px solid red";
span5.innerHTML="邮箱输入错误"
span5.style.color="red";
}else{
email.style.border="1px solid #ccc";
}
}
picyzm.onclick=function(){
var num=Array();
var str="";
for(var i=0;i<4;i++){
num[i]=Math.floor(Math.random()*10);
str+=num[i];
}
picyzm.innerHTML=str;
}
yzm.onfocus=function(){
yzm.style.border="1px solid blue";
span6.style.color="blue";
span6.innerHTML="";
yzm.value="";
}
yzm.onblur=function(){
if(yzm.value==""){
yzm.style.border="1px solid red";
span6.innerHTML="验证码不能为空";
span6.style.color="red";
}else if(yzm.value!=picyzm.innerHTML){
yzm.style.border="1px solid red";
span6.innerHTML="验证码输入错误"
span6.style.color="red";
}else{
yzm.style.border="1px solid #ccc";
}
}
zhuce.onclick=function(){
if((ureg.test(username.value))&&(ureg.test(pwd.value))&&(ureg.test(pwds.value))
&&(treg.test(tel.value))&&(ereg.test(email.value))&&(yzm.value==picyzm.innerHTML)){
zhuce.style.background="red";
}
}