HTML ,CSS ,JS 组合运用制作登录界面，注册界面，相册旋转展示界面，并相互跳转联系，源代码

本文链接：https://blog.csdn.net/qq_53162555/article/details/117767792

完成《个人相册》项目登录页面
要求：
1. 使用正则表达式验证邮箱
2. 密码长度至少为6位且为字母与数字的组合

可自行改变背景图片，此时所用图片与项目在同一目录下，只需写入文件名，图片要在与项目同级目录下，要写入路径及名称。

登录界面所有代码如下：

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>