Visual Studio Code:Web前端——登录、注册界面、个人相册
制作一个网页，有登录界面、注册界面和个人相册界面，注册成功后在登录界面登录成功后进入个人相册界面,个人相册里的所有图片是顺时针旋转的。若失败返回登录界面，登录界面和注册界面可相互切换。
代码：
login.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录界面title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(E:/source/material/images/c.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 40%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
}
#name_trip {
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: rgb(2, 24, 24);
font-size: 20px;
}
input {
margin-left: 0px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width:300px;
background-color: rgba(204, 180, 204, 0.5);
outline: none;
color: #0c0116;
padding-left: 20px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
text-align: center;
}
style>
head>
<body>
<div id="loginDiv">
<div id="form">
<h1 style="text-align: center;color: rgb(13, 13, 14);">立即登录h1>
<p style="text-align: center;">邮箱p>
<input type="text" placeholder="请输入邮箱" id="email"/>
<p style="text-align: center;">密码p>
<input type="password" placeholder="密码长度至少为六位" id="passworld"/>
br>br>
<a href="#" id="forget" style="text-align: center;">忘记密码？a>
br>
<div style="text-align: center;margin-top: 30px;">
<button onclick="denlu()" class="button">登录button>
<button id="b2"onclick="click()" class="button">注册button>
div>
div>
div>
body>
<script language="javascript" type="text/javascript">
document.getElementById("b2").onclick = function click(){
window.location.href="register.html";
}
document.getElementById("forget").onclick = function click(){
window.location.href="register.html";
}
email.onchange = function(){
var email = this.value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(reg.test(email)){
//alert("邮箱格式正确");
}else{
alert("邮箱格式不正确");
}
}
passworld.onchange = function(){
var passworld = this.value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
if(reg.test(passworld)){
}else{
alert("密码格式不正确");
}
}
function denlu() {
var p = document.getElementById("passworld").value;
var e = document.getElementById("email").value;
var p2=localStorage.getItem("password");
var e2=localStorage.getItem("email");
if(p==p2&&e==e2)
window.location.href="photo wall.html";
else
alert("账号或密码不正确");
}
script>
html>
register.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册界面title>
<style>
body {
margin: 0px;
padding: 0px;
}
input {
border-style:none none solid none;
width: 50%;
border-bottom: #000000 solid;
font-size: 15px;
}
a {
font-size: 60px;
color:rgb(250, 201, 201);
}
p {
font-size: 15px;
font-weight:bold;
color: rgb(0, 0, 0);
}
h1 {
color: #fff;
}
h2 {
position: relative;
top: -73%;
left:34%;
}
h5 {
color: #fff;
}
button {
width: 200px;
height: 30px;
border-radius: 5%;
background-color: #fcb928;
border: none;
color: rgb(10, 10, 10);
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;}
button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
#bg {
background-image: url(E:/source/material/images/c.jpg);
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
#div1 {
margin:0 auto;
position: relative;
top:50px;
width: 1006px;
height: 563px;
filter:alpha(opacity=50);
opacity:0.5;
background-color: rgb(255, 255, 255);
}
#left {
float:left;
width: 653px;
height: 563px;
}
#right {
text-align:center;
float:left;
width: 353px;
height: 563px;
background-image: url(E:/source/material/images/a.jpg);
}
#center {
position: relative;
top: 3%;
left:3%;
text-align:center;
width: 581px;
height: 471px;
}
.radio {
margin: auto;
width: 10%;
}
style>
head>
<body>
<div id="bg">
<div id="div1">
<div id="left">
<div id="center">
br>
<p>邮箱p>
<input type="text" placeholder="请输入邮箱" id="email"/>
<p>用户名p>
<input id="name" type="text" onchange="namechange()" placeholder="用户名长度不能超过5位"/>
<p>性别p>
<p>男<input class="radio" type="radio" value="男" name="people" checked="checked">女<input class="radio" value="女" type="radio" name="people">p>
<p>头像p>
<input type="file"/>
<p>密码p>
<input id="passworld"type="password" placeholder="密码长度至少为6位，且为数字和字母的组合"/>
<p>确认密码p>
<input id="ispassworld"type="password" placeholder="两次密码必须一致"/>
br>br>
<button onclick="subm()">注册button>
div>
div>
<div id="right">
<h1>已有帐号？
<h5>有账号就登录吧，好久不见了！
br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>
<button id="b2" onclick="click()">登录button>
div>
div>
<h2>立即注册
div>
body>
<script language="javascript" type="text/javascript">
document.getElementById("b2").onclick = function click(){
window.location.href="login.html";
}
email.onchange = function(){
var email = this.value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(reg.test(email)){
}else{
alert("邮箱格式不正确");
}
}
function namechange(){
var x=document.getElementById("name").value.length;
if(x<=5){
}else{
alert("姓名格式不正确");
}
}
passworld.onchange = function(){
var passworld = this.value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
if(reg.test(passworld)){
}else{
alert("密码格式不正确");
}
}
ispassworld.onchange = function(){
var p1 = this.value;
var p2 = document.getElementById("passworld").value;
if(p2==p1){
}else{
alert("两次密码不相同");
}
}
function subm() {
var na = document.getElementById("name").value;
var pword = document.getElementById("passworld").value;
var emai = document.getElementById("email").value;
localStorage.setItem("username",na);
localStorage.setItem("password",pword);
localStorage.setItem("email",emai);
window.location.href="login.html";
}
script>
html>
photo wall.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>照片墙title>
<style>
body {
margin: 0px;
}
#div1 {
width: 100%;
height: 50px;
background: rgba(74, 105, 190, 0.966);
}
#div2 {
background-image: url(E:/source/material/images/b.jpg);
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
#photo_box{
width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: 200px auto;
transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/
transform: rotateX(-5deg) rotateY(0deg);
animation: run 30s linear infinite;/*循环执行run动画，每30秒执行一次*/
}
/*设置图像大小、边框、圆角、位置*/
#photo_box img{
width: 250px;
height: 350px;
border: 5px solid #ccc;
border-radius: 5px;
position: absolute;
left: 0;
top: 0;
}
/*依次设置图像盒子中每个图像旋转后位置*/
#photo_box img:nth-child(1){
transform: rotateY(0deg) translateZ(500px);
}
#photo_box img:nth-child(2){
transform: rotateY(36deg) translateZ(500px);
}
#photo_box img:nth-child(3){
transform: rotateY(72deg) translateZ(500px);
}
#photo_box img:nth-child(4){
transform: rotateY(108deg) translateZ(500px);
}
#photo_box img:nth-child(5){
transform: rotateY(144deg) translateZ(500px);
}
#photo_box img:nth-child(6){
transform: rotateY(180deg) translateZ(500px);
}
#photo_box img:nth-child(7){
transform: rotateY(216deg) translateZ(500px);
}
#photo_box img:nth-child(8){
transform: rotateY(252deg) translateZ(500px);
}
#photo_box img:nth-child(9){
transform: rotateY(288deg) translateZ(500px);
}
#photo_box img:nth-child(10){
transform: rotateY(324deg) translateZ(500px);
}
#photo_box img:nth-child(11){
transform: rotateY(360deg) translateZ(500px);
}
/*采用@keyframes 规则创建run动画。*/
@keyframes run {
0%{transform: rotateX(0deg) rotateY(0deg);
}
25%{transform: rotateX(10deg) rotateY(90deg);
}
50%{transform: rotateX(0deg) rotateY(180deg);
}
75%{transform: rotateX(-10deg) rotateY(270deg);
}
100%{transform: rotateX(0deg) rotateY(360deg);
}
}
#text1 {
float: left;
color:#fff;
width: 150px;
padding:12px 0;
height: 50px;
}
#text2 {
float: right;
width: 100px;
color:#fff;
padding:12px 0;
height: 50px;
}
#text3 {
float: right;
width: 100px;
color:#fff;
padding:12px 0;
height: 50px;
}
style>
head>
<body>
<div id="div1">
<div id="text1">欢迎登录！div>
<div id="text2" onclick="outclick()" >退出div>
<div id="text3">个人信息div>
div>
<div id="div2">
<div id="photo_box">
<img src="E:/source/material/images/a1.jpg">
<img src="E:/source/material/images/a2.jpg">
<img src="E:/source/material/images/a3.jpg">
<img src="E:/source/material/images/a4.png">
<img src="E:/source/material/images/a5.jpg">
<img src="E:/source/material/images/a6.jpg">
<img src="E:/source/material/images/a7.jpg">
<img src="E:/source/material/images/a8.jpg">
<img src="E:/source/material/images/a9.jpg">
<img src="E:/source/material/images/a10.jpg">
<img src="E:/source/material/images/a11.jpg">
div>
div>
body>
<script>
var name=localStorage.getItem("username");
var div1=document.getElementById("text1");
div1.innerHTML="欢迎"+name+"登录！";
function outclick() {
localStorage.clear();
window.location.href="login.html";
}
script>
html>
效果展示