ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

HTML+CSS+JS实现个人相册登录注册

2021-06-10 19:30:52  阅读：202  来源： 互联网

标签：width transform JS rotateY HTML 个人相册 background var regExp


一、任务一
完成《个人相册》项目登录页面
要求：

  1. 使用正则表达式验证邮箱
  2. 密码长度至少为6位且为字母与数字的组合
    在这里插入图片描述
    二、任务二
    完成《个人相册》项目注册页面
    要求：
  3. 使用正则表达式验证邮箱
  4. 用户名长度不能超过五位
  5. 密码长度至少为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>

项目演示视频

标签：width,transform,JS,rotateY,HTML,个人相册,background,var,regExp
来源： https://blog.csdn.net/maojiaolin/article/details/117789661

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有