1.分别建立三个.html文件和一个.js文件;
2.分别是注册.html,登录.html,照片墙.html,正则表达式.js(验证邮箱、用户名和密码格式)。
(1)注册.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>
</head>
<style>
#box{
width: 400px;
height: 450px;
margin: 79px auto;
text-align: center;
background-color: white;
filter: opacity(0.6);
position: absolute;
left: 325px;
}
#box1{
width: 250px;
height: 450px;
background-image: url("bg2.jpg");
margin: 80px auto;
position: absolute;
left: 725px;
filter: opacity(0.9);
}
input{
border:none;
border-bottom:black 1px solid;
text-align: center;
outline: none;
}
p{
margin: 5px;
color: gray;
font-size: small;
}
body{
background-image: url('bg1.jpg');
}
#h{
text-align: center;
color:rgb(218, 231, 248);
}
#dl{
opacity: 0.5;
margin: 180px auto;
background-color: rgb(171, 220, 245);
width: 70px;
height: 30px;
line-height: 30px;
border: white;
border-radius: 13px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="box">
<br>
<h4>立即注册</h4>
<p>邮箱</p>
<input type="email" id="email">
<p>用户名</p>
<input type="text" id="username" placeholder="用户名长度不能超过5位">
<p>性别</p>
男<input type="radio" id="man" name="sex">
女<input type="radio" id="woamn" name="sex">
<p>头像</p>
<input type="file" id="file">
<p>密码</p>
<input type="password" id="password" placeholder="密码长度至少6位">
<p>确认密码</p>
<input type="password" id="password1" placeholder="两次密码须一致">
<p style="margin: 10px;"><button id="button" style="background-color: orange; border-radius: 11px; width: 150px;">注册</button></p>
</div>
<div id="box1">
<div id="h">
<br><br>
<h2>已有账号?</h2>
<h6>有账号就登录吧,好久不见了!</h6>
<div id="dl">
<a href="登录.html">登录</a>
</div>
</div>
</div>
<script src="正则表达式.js"></script>
<script>
//登录跳转
function tz(){
window.location.href="登录.html";
}
//验证邮箱
var email = document.getElementById("email");
email.onchange = function(){
var emailValue=this.value;
if(!isemail(emailValue))
alert("请输入正确的邮箱!");
else
console.log(emailValue);
}
//验证用户名
var un = document.getElementById("username");
un.onchange = function(){
var unlValue = this.value;
// console.log(unlValue);
if(!isname(unlValue))
alert("用户名格式错误!");
else
console.log(unlValue);
}
//验证密码
var psd = document.getElementById("password");
psd.onchange = function(){
var psdValue = this.value;
if(!ispsd(psdValue))
alert("密码格式错误!");
else
console.log(psdValue);
}
//确认密码
var psd1 = document.getElementById("password1");
psd1.onchange = function(){
var psd1Value = this.value;
var psdValue = document.getElementById("password").value;
if(psd1Value==psdValue)
console.log(psdValue);
else
alert("两次密码不一致!")
}
//验证文件
var file = document.getElementById("file");
file.onchange = function(){
var fileValue = this.value;
if(!fileValue)
alert("请选择头像文件!")
else
console.log(fileValue);
}
var btn = document.getElementById("button");
btn.onclick = function(){
var em = document.getElementById("email").value;
var un =document.getElementById("username").value;
var fl = document.getElementById("file").value;
var psd = document.getElementById("password").value;
var psd1 = document.getElementById("password1").value;
if(em=='' || un=='' || fl =='' || psd=='' || psd1=='')
// console.log("value空");
alert("请完善注册信息!");
else
{
// console.log(un);
localStorage.setItem("email",em);
localStorage.setItem("password",psd);
alert("注册成功!");
window.location.href="登录.html";
}
}
</script>
</body>
</html>
效果展示
(2)登录.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>
#box{
background-color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 80px auto;
text-align: center;
filter: opacity(0.7);
transition-duration:1s;
transition-timing-function:linear;
}
#box:hover{
transform:rotateY(360deg);
}
input{
border:none;
border-bottom:black 1px solid;
text-align: center;
outline: none;
}
p{
color: gray;
font-size: small;
}
button{
background-color: orange;
border-radius: 11px;
width: 70px;
}
<style>
</head>
<body style="background-image: url('bg1.jpg');">
<div id="box">
<br>
<br>
<h4>立即登录</h4>
<p>邮箱</p>
<input type="email" id="email">
<p>密码</p>
<input type="password" id="password" placeholder="密码长度至少6位">
<p><a style="font-size: 1px;" href="#">忘记密码?</a></p>
<button id="dl">登录<button>
<button id="zc">注册<button>
</div>
<script src="正则表达式.js"></script>
<script>
//验证邮箱
var email = document.getElementById("email");
email.onchange = function(){
var emailValue=this.value;
//console.log(emailValue);
if(!isemail(emailValue))
alert("请输入正确的邮箱!");
else
console.log(emailValue);
}
//注册按钮点击事件
var btn1 = document.getElementById("zc");
btn1.onclick = function(){
window.location.href="注册.html";
}
//登录按钮点击事件
var btn = document.getElementById("dl");
btn.onclick = function(){
var em = document.getElementById("email").value;
var psd = document.getElementById("password").value;
if(localStorage.getItem("email")==em && localStorage.getItem("password")==psd)
{
alert("登录成功!");
window.location.href="照片墙.html";
}
else
alert("邮箱或密码错误!");
}
</script>
</body>
<html>
效果展示
(3)照片墙.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;
}
body {
margin: 0;
padding: 0;
background: url("bg1.jpg") ;
}
:root{
height: 100%;
}
body{
height: 100%;
perspective: 2000px;
transform-style: preserve-3d;
}
#photos{
width: 250px;
height: 250px;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%,-50%);
transform-style: preserve-3d;
animation: run 10s linear infinite;
}
@keyframes run{
0%{
transform: translate(-50%,-50%) rotateY(0deg);
}
100%{
transform: translate(-50%,-50%) rotateY(360deg);
}
}
img{
width: 250px;
position: absolute;
opacity: 0.99;
backface-visibility: visible;
/* 默认值为visible,即能看见3d画面的背面,hidden看不见 */
}
img:nth-of-type(1){
transform: rotateY(45deg) translatez(450px);
}
img:nth-of-type(2){
transform: rotateY(90deg) translatez(450px);
}
img:nth-of-type(3){
transform: rotateY(135deg) translatez(450px);
}
img:nth-of-type(4){
transform: rotateY(180deg) translatez(450px);
}
img:nth-of-type(5){
transform: rotateY(225deg) translatez(450px);
}
img:nth-of-type(6){
transform: rotateY(270deg) translatez(450px);
}
img:nth-of-type(7){
transform: rotateY(315deg) translatez(450px);
}
img:nth-of-type(8){
transform: rotateY(360deg) translatez(450px);
}
a{
text-decoration: none;
float: right;
}
<style>
</head>
<body>
<div>
<a href="登录.html">退出</a>
</div>
<div id="photos">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
<img src="6.jpg" alt="">
<img src="7.jpg" alt="">
<img src="8.jpg" alt="">
</div>
</body>
<html>
效果展示
(4)正则表达式.js
//验证邮箱
function isemail(str){
var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
return pattern.test(str);
}
//验证用户名
function isname(str){
var pattern = /^[a-z0-9_-]{1,5}$/;
return pattern.test(str);
}
//验证密码
function ispsd(str){
var pattern = /[a-zA-Z0-9]{5}$/;
return pattern.test(str);
}
文件夹文件