可自行改变背景图片，此时所用图片与项目在同一目录下，只需写入文件名，图片要在与项目同级目录下，要写入路径及名称。
登录界面所有代码如下：
2、完成《个人相册》项目注册页面
要求：
1. 使用正则表达式验证邮箱
2. 用户名长度不能超过五位
3. 密码长度至少为6位且为字母与数字的组合
4. 两次密码输入须一致
注册界面所有代码如下：
<!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>Document</title>
<style>
body{
background-image: url(背景2.jpeg);
background-size: 100%;
}
div{
width: 400px;
height: 400px;
border-radius: 0%;
background-image: url(背景4.jpg);
position: absolute;
top:20%;
left:25%;
}
d{
width: 300px;
height: 400px;
border-radius: 0%;
background-image: url(背景3.jpg);
position: absolute;
top:20%;
left:50%;
}
</style>
</head>
<body>
<div>
<center>
<form action="">
<h2>立即注册</h2>
邮箱<br> <input type="text" id="e_m" class="inp"><br>
用户名<br> <input type="text" id="user_name" class="inp"><br>
性别<br> <input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女 <br>
密码<br><input type="password" id="password" class="inp"><br>
确认密码<br><input type="password" id="password1" class="inp"><br><br>
<input type="button" onclick="get_up()" value="注册" class="bt"><br>
</form>
</div>
<d> <center>
<form action="">
<h1>已有账号了？</h1>
<h3>那就登录吧！好久不见！</h3>
<input type="button" onclick="window.open('登录界面.html')" value="登录" class="bt1">
</form>
</d>
<script>
function get_up(){
var em = document.getElementById("e_m")
var e_mile = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if(!e_mile.test(em.value)) {
alert("邮箱格式不正确")
window.location.reload()
}
else{
var user_yz = /^\w{1,5}$/
var user = document.getElementById("user_name")
if(!user_yz.test(user.value)) {
alert("用户名不符合")
window.location.reload()
}
else{
var pwd = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){6,19}$/
var mm = document.getElementById("password")
if(!pwd.test(mm.value)) {
alert("密码格式不正确")
window.location.reload()
}
else{
var mm1 = document.getElementById("password1")
if(mm.value!=mm1.value){
alert("两次密码不一致！")
window.location.reload()
}
else{
localStorage.setItem("username",em.value)
localStorage.setItem("password",mm.value)
window.location.href="登录界面.html"
}
}
}
}
}
</script>
</body>
</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>
*{
padding: 0;
margin: 0;
}
body{
background:rgb(247, 240, 240);
}
#photo_box{
width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: 200px auto;
transform-style: preserve-3d;
transform: rotateX(-5deg) rotateY(0deg);
animation: run 30s linear infinite;
}
#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(60deg) translateZ(500px);
}
#photo_box img:nth-child(3){
transform: rotateY(120deg) translateZ(500px);
}
#photo_box img:nth-child(4){
transform: rotateY(180deg) translateZ(500px);
}
#photo_box img:nth-child(5){
transform: rotateY(240deg) translateZ(500px);
}
#photo_box img:nth-child(6){
transform: rotateY(300deg) translateZ(500px);
}
@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);
}
}
</style>
</head>
<body>
<div id="photo_box">
<img src="图片1.jpg">
<img src="图片2.jpg">
<img src="图片3.jpg">
<img src="图片4.jpg">
<img src="图片6.jpeg">
<img src="图片7.jpg">
</div>
</body>
<script>
</script>
</html>