一、任务一
完成《个人相册》项目登录页面
要求：
使用正则表达式验证邮箱密码长度至少为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>
七、实现效果
项目演示视频
