实训第七天个人相册制作_安卓实训相册制作-CSDN博客

本文链接：https://blog.csdn.net/qq_45647409/article/details/117745488

要求：
1.完成《个人相册》项目登录页面
（1）使用正则表达式验证邮箱
（2）密码长度至少为6位且为字母与数字的组合
2.完成《个人相册》项目注册页面
（1）使用正则表达式验证邮箱
（2）用户名长度不能超过五位
（3）密码长度至少为6位且为字母与数字的组合
（4）两次密码输入须一致
3.完成《个人相册》项目相册页面

登录页面：

<!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{
            background-image: url(img/d.jpg);
            background-size: cover;
        }
        input {
            border-style:none none solid none;
            width: 50%;
            border-bottom: #000000 solid;
            font-size: 15px;
        }
        #one{
            width: 300px;
            height: 300px;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
            border-radius: 50%;
            background-color:rgba(221, 216, 221, 0.5);
            text-align: center;
            color: rgb(227, 233, 232);
            position: absolute;
            top: 30%;
            left: 40%;
            animation: aa 5s linear 1 forwards;
            animation-delay:calc(var(--x)*-1s);

        }
        @keyframes aa{
            0%,100%{
                transform:rotateY(0deg);
            }
            50%{
                transform: rotateY(180deg);
            }

        }
        
        
        button{

            border-radius: 35%;
            background-color: darkgoldenrod;
        }

    </style>
</head>
<body>
    <div id="one"><br><br><hi>立即登录</h1><br><br>
        <from action="">
        
         
            邮箱：<br><input type="text" id="email" name="email"><br>
            密码：<br><input type="password" id="pwd"  placeholder="密码长度至少为6位" name="password"><br>
            <a href="相册注册.html">忘记密码？</a><br><br>
            <button id="login" >登录</button>&nbsp;
            <button id="register" >注册</button>
        </from>
    </div>
    
</body>
<script>
    var em=document.getElementById("email");
    em.onchange=function(){
        var re=/^\w+@[0-9a-z]+\.[a-z]+$/;
        if( re.test(em.value)){
            alert("您写的是合法邮箱")
        }else{
            alert("您写错了呀！")
        }
    }
    var pw=document.getElementById("pwd");
    pw.onchange=function(){
        var re=/^(?![0-9]*$(?![a-zA-Z]*$[0-9A-Za-z]))/;
        if( re.test(pw.value)){
            
        }else{
            alert("您写错了呀！")
        }
    }

    var login=document.getElementById("login");
        login.onclick=function(){
            var em=document.getElementById("email").value;
             var pwd=document.getElementById("pwd").value;
             var em2=localStorage.getItem("emaila");
             var pwd2=localStorage.getItem("pwda");
         if(em==em2&&pwd==pwd2){
            window.location.href="相册内容.html";
        }else{
            alert("邮箱或密码不正确")
        }
    }
      var register=document.getElementById("register");
       register.onclick =function(){
        window.location.href="相册注册.html"
    }
      localStorage.getItem("email",em);
      localStorage.getItem("pwd",pw);
</script>
</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{
            background-image: url(img/d.jpg);
            background-size: cover;
        }
        
        
        #a{
            width: auto;
            height: auto;
            position: absolute;
            top: 10%;
            left: 20%;
        }
        #b{
            width: 400px;
            height: 600px;
            border:none;
            background-color:rgba(221, 216, 221, 0.5);
            text-align: center;
            color: rgb(227, 233, 232);
            float: left;
            
        }
        #c{
            width: 400px;
            height: 600px;
            border:none;
            background-image: url(img/f.jpg);
            background-size: cover;
            margin: 0px;
            float:left;
            text-align: center;
            

           
        }
        #registera{
            background-color: darkgoldenrod;
            border-radius: 25%;
        }
        #logina{
            position: relative;
            top: 50%;

        }
        
    </style>
</head>
<body>
    <from>
    <div id="a">
       <div id="b"><br><br>
           <h1>立即注册</h1><br>
           邮箱<br><input type="text" id="email" name="email"><br><br>
           用户名<br><input type="text" id="name"   placeholder="用户名长度不超过5位"name="name"><br><br>
           性别<br><input type="radio"id="sex " name="gender" value="male" checked>男&nbsp;
                   <input type="radio"id="sex" name="gender" value="female">女<br><br>
           头像<br><input type="file" id="tou"><br><br>
           密码<br><input type="password" id="pwd"  placeholder="密码长度至少为6位，且为数字与字母的组合" name="password"><br><br>
           再次确认密码<br><input type="password" id="gpwd" placeholder="两次密码须一致" ><br/><br/>
           <button id="registera" onclick="zc()"  >&nbsp;&nbsp;&nbsp;&nbsp;注&nbsp;&nbsp;册&nbsp;&nbsp;&nbsp;&nbsp;</button>
        </div>
          <div id="c"><br><br>
             <h1>已有账号？</h1>
              <h3>有账户就登录吧，好久不见！</h3>
                <button id="logina" onclick="dl()" >登录</button>
          </div>
   </div>

    </from>
</body>
<script>
     var em2=document.getElementById("email");
    em2.onchange=function(){
        var re=/^\w+@[0-9a-z]+\.[a-z]+$/;
        if( re.test(em2.value)){
            alert("您写的是合法邮箱")
        }else{
            alert("您写错了呀！")
        }
    } 
     var na=document.getElementById("name");
      na.onchange=function(){
        var x=na.value.length;
        if( x<=5){
            alert("对了呀！")
           
        }else{
            alert("您用户名格式错了呀！")
        }
    }
    //密码
         
           pwd.onchange= function(){ 
               var pwd=this.value;
             var reg=/^(?![0-9]*$(?![a-zA-Z]*$[0-9A-Za-z]))/;
             if( reg.test(pwd)){
             }else{
             alert("您密码写错了呀！")
            }
    }
         gpwd.onchange=function() {
          var gpwd=this.value;
          var pw2=document.getElementById("pwd").value;
        

        if(pw2==gpwd){
            alert("两次密码一致！")
        
        }else {
            alert("密码不一致！")
        }
    }
    
    
    
          function zc(){
            var em2=document.getElementById("email").value;
            var na=document.getElementById("name").value;
            var se=document.getElementById("sex").value;
            var to=document.getElementById("tou").value;
            var pw2 =document.getElementById("pwd").value;
            var gpw =document.getElementById("gpwd").value;
            localStorage.setItem("name",na);
            localStorage.setItem("emaila",em2);
            localStorage.setItem("pwda",pw2 );
            window.location.href="我的相册登录.html"
            return false;

        }
        var logina=document.getElementById("logina");
          function dl(){
            window.location.href="我的相册登录.html";
    }
        
</script>
</html>

相册墙：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3D旋转</title>
    <style type="text/css">
        *{padding: 0;
        margin: 0;}
        body,html{height:100%;}
        /* 背景图片在这里设置 */
        body{background-image: url("img/d.jpg");background-size: 100% 100%;}
        #qq{
            height: 50px;
            width: auto;
            background-color: rgb(236, 227, 213);

        }
        #ss{
            margin: 10px;
            float: left;
        }
        #gg{
            margin: 10px;
            float: right;
        }
        #ff{
            margin: 10px;
            float: right;
        }
        #box{width: 280px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: go 45s linear infinite;
           }
        #box img{width: 280px;
                 height: 400px;
                 position: absolute;
                 left: 0;
                 top: 0;
        }
        #box img:nth-child(1){
            transform: rotateY(0deg) translateZ(650px);}
        #box img:nth-child(2){
            transform: rotateY(36deg) translateZ(650px);}
        #box img:nth-child(3){
            transform: rotateY(72deg) translateZ(650px);}
        #box img:nth-child(4){
            transform: rotateY(108deg) translateZ(650px);}
        #box img:nth-child(5){
            transform: rotateY(144deg) translateZ(650px);}
        #box img:nth-child(6){
            transform: rotateY(180deg) translateZ(650px);}
        #box img:nth-child(7){
            transform: rotateY(216deg) translateZ(650px);}
        #box img:nth-child(8){
            transform: rotateY(252deg) translateZ(650px);}
        #box img:nth-child(9){
            transform: rotateY(288deg) translateZ(650px);}
        #box img:nth-child(10){
            transform: rotateY(324deg) translateZ(650px);}
		@keyframes go {
		    0%{transform: rotateX(0deg) rotateY(0deg);}
		    25%{transform: rotateX(20deg) rotateY(180deg);}
		    50%{transform: rotateX(0deg) rotateY(360deg);}
		    75%{transform: rotateX(-20deg) rotateY(540deg);}
		    100%{transform: rotateX(0deg) rotateY(720deg);}
		
		}
    </style>
</head>
	<body>
        
        <div id="qq">
            <div id="ss">欢迎登录！</div>
            <button id="gg" >退出</button>
            <div id="ff">个人信息</div>
            
        </div>
		<div id="box">
		    <img src="img/d.jpg">
		    <img src="img/e.jpg">
		    <img src="img/g.jpg">
		    <img src="img/j.jpg">
		    <img src="img/k.jpg">
		    <img src="img/l.jpg">
		    <img src="img/f.jpg">
            <img src="img/q.jpg">
            <img src="img/w.jpg">
            <img src="img/t.jpg">
            
		</div>
	</body>
    <script>
            var name=localStorage.getItem("name");
            var ss=document.getElementById("ss");
            ss.innerHTML="欢迎"+name+"登录！";
            var gg=document.getElementById("gg");
               gg.onclick =function () {
                localStorage.clear();
                window.location.href="我的相册登录.html";
            }
        </script>
</html>

略微粗糙，请各位大佬多多指教！