|
一、登录界面设计 使用正则表达式验证邮箱且密码长度至少为6位且为字母与数字的组合，如果输入框为空输出提示信息，能够提取localStorage中存的数据比较验证。 正则表达式验证邮箱： 邮箱的正则表达式为：/^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/ 验证函数：
function jd(){
var y=document.getElementById("email").value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(!reg.test(y)){
alert("邮箱格式错误");
}
}
密码长度至少为6位且为字母与数字的组合正则表达式为/^(?![0-9]+
)
(
?
!
[
a
−
z
A
−
Z
]
+
)(?![a-zA-Z]+
)(?![a−zA−Z]+)[0-9A-Za-z]{6,}$/，验证函数：
var p=document.getElementById("mima");
p.οnchange=function(){
var m=document.getElementById("mima").value;
var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}
}
完整代码:
DOCTYPE html>
Document
body{
background-image: url("背景.jpeg");
}
#dl{
width: 350px;
height: 350px;
margin: 10% auto;
background-color: white;
border-radius: 200px;
opacity: 0.6;
animation: move 2s ease-in-out 1s 1 alternate;
}
#box{
padding: 10%;
text-align: center;
}
input{
width: 200px;
border-top:0;
border-left:0;
border-right:0;
}
button{
width: 90px;
border-radius: 15px;
background-color:darkorange;
border-style:solid;
}
@keyframes move{
100%{
transform: rotateY(360deg);
}
}
立即登录
邮箱
密码
忘记密码？
登陆
注册
function jump(){
window.location.href="注册界面.html";
window.event.returnValue=false;
}
function jd(){
var y=document.getElementById("email").value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(!reg.test(y)){
alert("邮箱格式错误");
}
}
var p=document.getElementById("mima");
p.onchange=function(){
var m=document.getElementById("mima").value;
var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}
}
function yz(){
var m=document.getElementById("email").value;
var i=document.getElementById("mima").value;
var ml=localStorage.getItem("mailbox");
var mi=localStorage.getItem("password");
if(m.length==0||i.length==0)
{
alert("邮箱或密码不能为空");
}
else if(m!==ml){
alert("用户不存在");
}
else if(i!==mi){
alert("密码错误");
}
else{
window.location.href="个人相册.html";
window.event.returnValue=false;
}
}
实现效果：  二、注册界面设计 建立一个注册表单并且 使用正则表达式验证邮箱，用户名长度不能超过五位， 密码长度至少为6位且为字母与数字的组合验证两次密码输入是否一致。 完整代码：
DOCTYPE html>
Document
body{
background-image: url("背景.jpeg");
}
#box1{
width: 500px;
height: 500px;
background-color:white;
margin-left: 25%;
margin-top: 100px;
float: left;
opacity: 0.6;
}
#box2{
width: 250px;
height: 500px;
background-image: url("背景2.jpg");
margin-top: 100px;
float: left;
text-align: center;
}
#box{
text-align: center;
}
#box3{
margin-top: 100%;
}
input{
width: 220px;
border-top:0;
border-left:0;
border-right:0;
}
#btn1{
width: 200px;
border-radius: 20px;
border-style:solid;
background-color:darkorange;
}
#btn2{
width: 100px;
border-radius: 20px;
background-color:transparent;
border-style:solid;
border-color: white;
color:white;
}
立即注册
邮箱
用户名
性别
男
女
头像
密码
确认密码
注册
已有账号？
有账号就登录吧，好久不见了！
登录
var r=document.getElementById("btn2");
r.onclick=function(){
window.location.href="登陆界面.html";
}
function jd(){
var y=document.getElementById("email").value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(!reg.test(y)){
alert("邮箱格式错误");
// e.focus();
}
}
var u=document.getElementById("user");
u.onchange=function(){
var x=document.getElementById("user").value;
if(x.length>5){alert("用户名长度不能超过5位");}
}
var p=document.getElementById("mima");
p.onchange=function(){
var m=document.getElementById("mima").value;
var r = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
if(!r.test(m)){alert("密码长度至少6位数且包含字母与数字");}
}
var qr=document.getElementById("que");
qr.onchange=function(){
var m=document.getElementById("mima").value;
var q=document.getElementById("que").value;
if(p!==q){alert("两次密码不一样");}
}
var s=document.getElementById("btn1");
s.onclick=function(){
var ml=document.getElementById("email").value;
var uh=document.getElementById("user").value;
var mi=document.getElementById("mima").value;
var qmi=document.getElementById("que").value;
if(ml.length==0||uh.length==0||mi.length==0||qmi==0){
alert("错误，请完善信息");
}
else{
localStorage.setItem("mailbox",ml);
localStorage.setItem("username",uh);
localStorage.setItem("password",mi)
window.location.href="个人相册.html";
window.event.returnValue=false;
alert("注册成功");}
}
实现效果：  三、个人相册界面设计 实现图片3D旋转： 完整代码：
DOCTYPE html>
Document
body{
padding: 0px;
margin: 0px;
background-image: url("背景.jpeg");
}
#box4{
width: 100%;
height:55px;
background-color: rgb(94, 84, 84);
float: left;
}
#btn1{
border-radius: 15px;
opacity: 0.6;
position: relative;
left:85%;
top: 15px;
}
#box{width: 250px;
height: 350px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: move 20s linear infinite;
}
#box:hover {
animation-play-state: paused; /* 动画暂停 */
cursor: pointer;
}
#box img{width: 250px;
height: 350px;
position: absolute;
left: 0;
top: 0;
}
#box img:nth-child(1){
transform: rotateY(0deg) translateZ(550px);}
#box img:nth-child(2){
transform: rotateY(40deg) translateZ(550px);}
#box img:nth-child(3){
transform: rotateY(80deg) translateZ(550px);}
#box img:nth-child(4){
transform: rotateY(120deg) translateZ(550px);}
#box img:nth-child(5){
transform: rotateY(160deg) translateZ(550px);}
#box img:nth-child(6){
transform: rotateY(200deg) translateZ(550px);}
#box img:nth-child(7){
transform: rotateY(240deg) translateZ(550px);}
#box img:nth-child(8){
transform: rotateY(280deg) translateZ(550px);}
#box img:nth-child(9){
transform: rotateY(320deg) translateZ(550px);}
@keyframes move {
0%{transform: rotateX(0deg) rotateY(0deg);}
25%{transform: rotateX(-10deg) rotateY(180deg);}
50%{transform: rotateX(0deg) rotateY(360deg);}
75%{transform: rotateX(10deg) rotateY(540deg);}
100%{transform: rotateX(0deg) rotateY(720deg);}
}
欢迎您登陆:
个人信息
退出
function jump(){
window.location.href="登陆界面.html";
window.event.returnValue=false;
}
function getcookie() {
alert("邮箱"+localStorage.getItem("mailbox")+"用户名"+localStorage.getItem("username"))
}
var m=localStorage.getItem("username");
document.write(m);
实现效果： 
|