一、任务一
完成《个人相册》项目登录页面
要求:
- 使用正则表达式验证邮箱
- 密码长度至少为6位且为字母与数字的组合
二、任务二
完成《个人相册》项目注册页面
要求: - 使用正则表达式验证邮箱
- 用户名长度不能超过五位
- 密码长度至少为6位且为字母与数字的组合
- 两次密码输入须一致
三、任务三
完成《个人相册》项目相册页面
四、注册代码
<!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>
/*背景*/
.first {
background-image: url(1.jpg);
margin-left:150px ;
width: 1200px;;
height: 700px;
float: left;
}
.second{
width: 1100px;
height: 600px;
margin-left: 50px;
margin-top: 50px;
float: left;
}
.left {
background: rgba(241, 247, 241, 0.4);
width: 700px;
height: 600px;
margin-left:50px;
float: left;
}
.right{
background-image: url(4.jpg);
width: 300px;
height: 600px;
margin-right: 50px;
float: right;
}
#anniu1{
background-color: orange;
border-radius: 10px;
width: 164px;
height: 25px;
}
#anniu2{
border-radius: 10px;
width: 80px;
height: 30px;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="first">
<div class="second">
<div class="right" align="center">
<br><br><br><br><br><br>
<strong><a href="#end2" id="yes"><font color="#FFFFFF">已有账号?</font> </a></strong> <br>
<td align="center"><font color="#FFFFFF">有账号就登录吧,好久不见了</font></td><br>
<br><br><br><br><br><br>
<button type=“reset” id="anniu2" onclick="gologin()">登录</button></td>
</div>
<div class="left" align="center">
<h1 align="center">立即注册 </h1>
<tr>
<td align="center">邮箱</td><br>
</tr>
<tr>
<td align="center"><input type="text" name="username" id="email"></td><br>
</tr>
<tr>
<td align="center">用户名</td><br>
</tr>
<tr>
<td align="center"><input type="text" id="un"placeholder="用户名长度不能超过5位"></td><br>
</tr>
<tr>
<td align="center">性别</td><br>
</tr>
<tr>
<td align="center"><input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</td><br>
</tr>
<tr>
<td align="center">头像</td><br>
</tr>
<tr>
<td><input type="file" name="touxiang"></td><br>
</tr>
<tr>
<td align="center">密码</td><br>
</tr>
<tr>
<td align="center"> <input type="password" id="pwd"placeholder="密码长度至少为6位"></td><br>
</tr>
<tr>
<td align="center">确认密码</td><br>
</tr>
<tr>
<td align="center"><input type="password"id="pwd1"placeholder="两次密码必须一致"></td><br>
</tr>
<tr>
<td align="center">
<button id="anniu1" type=“reset” onclick="save()"> 注册</button></td>
</tr>
</div>
</div>
</div>
<script>
//验证邮箱
email.onchange = function() {
var emailNeme = this.value;
var regExp = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
console.log(regExp.test(emailNeme))
if (!(regExp.test(emailNeme))) {
alert("邮箱格式不正确!");
}
}
//验证用户名
un.onchange = function() {
var un = this.value;
var regExp = /^\S{1,5}$/;
console.log(regExp.test(un))
if (!(regExp.test(un))) {
alert("用户名格式不正确!");
}
}
//验证密码
pwd.onchange = function() {
var pwd = this.value;
var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
console.log(regExp.test(pwd))
if (!(regExp.test(pwd))) {
alert("密码格式不正确!");
}
}
//再次确认密码
pwd1.onchange = function() {
var pwd1 = this.value;
var pwd = document.getElementById("pwd");
var passwd = pwd.value;
var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
console.log(regExp.test(pwd1))
if (!(regExp.test(pwd1))) {
alert("密码格式不正确!");
} else if (pwd1 != passwd) {
alert("两次密码不一致!");
}
}
function save() {
var Email = document.getElementById("email").value;
var username = document.getElementById("un").value;
var sex = document.getElementsByName('sex').value;
var password = document.getElementById("pwd").value;
localStorage.setItem("Email", Email);
localStorage.setItem("username", username);
localStorage.setItem("sex", sex);
localStorage.setItem("password", password);
var testemail = localStorage.getItem(Email);
console.log(testemail);
alert("注册成功,请登录!");
window.location.href = "登录.html";
}
function gologin() {
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>Document</title>
<style>
.first {
background-image: url(1.jpg);
margin-left:150px ;
width: 1200px;;
height: 700px;
float: left;
}
.second{
/*border: 2px solid white;
background-color: white;*/
background: rgba(241, 247, 241, 0.4);
border-radius: 300px;
width: 600px;
height: 600px;
margin-left:300px;
margin-top: 50px;
float: left;
/*transform: rotateY(130deg);
/* 规定动画播放次数 infinite: 无限循环
animation-iteration-count: infinite;
opacity: 0.3;*/
animation: mykeyframe;
animation-duration: 1.8s;
animation-delay: 0.5s;
}
#third{
width: 400px;;
height: 400px;
margin-left: 100px;
margin-top: 100px;
float: left;
/*opacity: 0.3;*/
}
#anniu1{
background-color: orange;
border-radius: 10px;
}
#anniu2{
background-color: orange;
border-radius: 10px;
}
@keyframes mykeyframe {
0% {
transform: rotateY(0deg);
}
10% {
transform: rotateY(36deg);
}
20% {
transform: rotateY(72deg);
}
30% {
transform: rotateY(108deg);
}
40% {
transform: rotateY(144deg);
}
50% {
transform: rotateY(180deg);
}
60% {
transform: rotateY(216deg);
}
70% {
transform: rotateY(252deg);
}
80% {
transform: rotateY(288deg);
}
90% {
transform: rotateY(324deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="first">
<div class="second">
<div id="third" align="center">
<table align="center">
<h1>立即登录</h1>
<tr>
<td align="center">邮箱</td>
</tr>
<tr>
<td><input type="text" name="username" id="email"></td>
</tr>
<tr>
<td align="center">密码</td>
</tr>
<tr>
<td><input type="password"id="pwd" placeholder="密码长度至少为6位"></td>
</tr>
<tr>
<td align="center"> <a href="#end2">忘记密码? </a></td>
</tr>
<tr>
<td>
<div align="center"><button id="anniu1" onclick="denlu()">登录</button>
<button id="anniu2" onclick="goregister()">注册</button></td> </div>
</tr>
</table>
</div>
</div>
</div>
<script>
//验证邮箱
email.onchange = function() {
var emailNeme = this.value;
var regExp = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
console.log(regExp.test(emailNeme))
if (!(regExp.test(emailNeme))) {
alert("邮箱格式不正确!");
}
}
//验证密码
pwd.onchange = function() {
var pwd = this.value;
var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
console.log(regExp.test(pwd))
if (!(regExp.test(pwd))) {
alert("密码格式不正确!");
}
}
document.getElementById("anniu2").onclick = function click(){
window.location.href="safa.html";
}
document.getElementById("wangji").onclick = function click(){
window.location.href="safa.html";
}
//登录
function denlu() {
var upwd = localStorage.getItem("password");
var uemailneme = localStorage.getItem("Email");
var semail = document.getElementById("email").value;
var spwd = document.getElementById("pwd").value;
if ((semail == uemailneme) && (spwd == upwd)) {
window.location.href = "照片.html";
} else {
alert("邮箱或密码错误!");
}
}
//注册
function goregister() {
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>
body {
margin: 0px;
}
#div1 {
width: 100%;
height: 50px;
background-color: #fff;
}
#div2 {
background-image: url(1.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{
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 img{
width: 250px;
height: 350px;
border: 5px solid #ccc;
border-radius: 5px;
position: absolute;
left: 0;
top: 0;
}
/*依次设置图像盒子中每个图像旋转后位置*/
#photo img:nth-child(1){
transform: rotateY(0deg) translateZ(500px);
}
#photo img:nth-child(2){
transform: rotateY(36deg) translateZ(500px);
}
#photo img:nth-child(3){
transform: rotateY(72deg) translateZ(500px);
}
#photo img:nth-child(4){
transform: rotateY(108deg) translateZ(500px);
}
#photo img:nth-child(5){
transform: rotateY(144deg) translateZ(500px);
}
#photo img:nth-child(6){
transform: rotateY(180deg) translateZ(500px);
}
#photo img:nth-child(7){
transform: rotateY(216deg) translateZ(500px);
}
#photo img:nth-child(8){
transform: rotateY(252deg) translateZ(500px);
}
#photo img:nth-child(9){
transform: rotateY(288deg) translateZ(500px);
}
#photo img:nth-child(10){
transform: rotateY(324deg) translateZ(500px);
}
#photo 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>
<div id="div2">
<div id="photo">
<img src="11.jpg">
<img src="12.jpg">
<img src="13.jpg">
<img src="14.jpg">
<img src="15.jpg">
<img src="16.jpg">
<img src="17.jpg">
<img src="18.jpg">
<img src="19.jpg">
<img src="20.jpg">
<img src="21.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="登录.html";
}
</script>
</html>
七、实现效果
<iframe allowfullscreen="true" data-mediaembed="bilibili" id="IawFhpJr-1623323882694" src="https://player.bilibili.com/player.html?aid=846077484"></iframe>项目演示视频