2021-06-10

最新推荐文章于 2022-11-16 14:20:49 发布

是酷婷呀～

最新推荐文章于 2022-11-16 14:20:49 发布

阅读量101

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46446321/article/details/117767796

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实训接近尾声昨天做了一个个人相册我觉得还是很有意义。具体要求及代码如下：
一。完成《个人相册》项目登录页面
要求：

使用正则表达式验证邮箱
密码长度至少为6位且为字母与数字的组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
            body{
                text-align: center;
                margin: 0;
                padding: 0;
            }
            #bg{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 1000px;
                height: 500px;
                background-image: url(22.jpg);
                
            }
            #xbg{
                border: 2px solid black;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 400px;
                height: 400px;
                border-radius: 100%;
                background-color: rgba(231, 222, 222, 0.3);
            }
            .inp{
                text-align: center;
                border: none;
                border-bottom:1px solid black;
                background-color: transparent;
                outline: none;
            }
            .bt{
                border-radius: 12px;
                background-color: yellow;
                width: 50px;
            }
            .bt:hover{
                background-color: yellowgreen;
            }
    </style>
</head>
<body>
        <center>
                <div id="bg">
                    <div id="xbg">
                        <div>
                            <form action="" method="post"></form>
                            <h2>立即登录</h2><br>
                            <span>邮箱</span><br>
                            <input type="text" id="e_m" class="inp"><br>
                            <span>密码</span><br>
                            <input type="password" id="password" class="inp" placeholder="密码长度至少为6位"><br><br>
                            <input type="submit" onclick="get_in()" value="登录" class="bt">
                            <input type="button" onclick="window.open('register.html')" value="注册" class="bt">
                        </form>
                        </div>
                    </div>
                </div>
            </center>
</body>
<script>
        var u = localStorage.getItem("username")
        var p = localStorage.getItem("password")
        function get_in(){
            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 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{
                    if(em.value==u && mm.value==p){
                        window.location.href="相册.html"
                    }
                    else{
                        alert("邮箱或密码不正确")
                        window.location.reload()
                    }
                }
            }
        }
    </script>
</html>

二：完成《个人相册》项目注册页面
要求：

使用正则表达式验证邮箱
用户名长度不能超过五位
密码长度至少为6位且为字母与数字的组合
两次密码输入须一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            body{
                text-align: center;
                margin: 0;
                padding: 0;
            }
            #bg{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 1000px;
                height: 500px;
                background-image: url(22.jpg);
                
            }
            #xbg{
                border: 2px solid black;
                display: flex;
                align-items: center;
                justify-content: center;
                
            }
            .inp{
                text-align: center;
                border: none;
                border-bottom:1px solid black;
                background-color: transparent;
                outline: none;
            }
            .bt{
                border-radius: 12px;
                background-color: yellow;
                width: 200px;
            }
            .bt:hover{
                background-color: yellowgreen;
            }
            #lbg{
                width: 400px;
                height: 450px;
                background-color: rgba(231, 222, 222, 0.3);
    
            }
            #rbg{
                width: 200px;
                height: 450px;
                background-image: url(./imges/bj2.jpg);
            }
            .bt1{
                border-radius: 12px;
                background-color: rgba(240, 228, 228, 0.3);
                width: 100px;
                margin-top: 250px;
            }
        </style>
</head>
<body>
        <center>
                <div id="bg">
                    <div id="xbg">
                        <div id="lbg">
                            <form action="" method="post"></form>
                                <h2>立即注册</h2><br>
                                <span>邮箱</span><br>
                                <input type="text" id="e_m" class="inp"><br>
                                <span>用户名</span><br>
                                <input type="text" id="user_name" class="inp" placeholder="用户名长度不超过5"><br>
                                <span>性别</span><br>
                                <input type="radio" name="sex"checked>男<input type="radio" name="sex">女<br>
                                <span>头像</span><br>
                                <input type="file" class="inp"><br>
                                <span>密码</span><br>
                                <input type="password" id="password" class="inp" placeholder="密码长度至少为6位"><br><br>
                                <span>再次输入密码</span><br>
                                <input type="password" id="password1" class="inp" placeholder="与上次一致"><br><br>
                                <input type="button" onclick="get_up()" value="注册" class="bt">
                            </form>
                        </div>
                        <div id="rbg">
                            <h2>已有账号？</h2>
                            <span>有账号就登录吧，好久不见了</span><br>
                            <input type="button" onclick="window.open('login.html')" value="登录" class="bt1">
                        </div>
                    </div>
                </div>
            </center>
        </body>
<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="login.html"
                    }
                }
            }
        }    
    }
</script>
</body>
</html>

三：完成《个人相册》项目相册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            *{  
                   padding: 0;  
                   margin: 0;  
                   border: none;  
                   outline: none;  
                   box-sizing: border-box;  
               } 
       
               *:before,*:after{  
                   box-sizing: border-box;  
               }  
       
               html {
                   height: 100%;
                   width: 100%;
                   overflow: hidden;
                   background: url(22.jpg) no-repeat 0px 0px;
                   background-repeat: no-repeat;
                   background-size: 100% 100%;
                   -moz-background-size: 100% 100%;
               }
                
               body {
                   height: 85%;
                   display: flex;
                   align-items: center;
               }
       
               .Container{  
                   margin: 4% auto;  
                   width: 240px;  
                   height: 150px;  
                   position: relative;  
                   perspective: 1000px;  
               }  
       
               #show_jpg{  
                   width: 100%;  
                   height: 100%;  
                   position: absolute;  
                   transform-style:preserve-3d;  
                   animation: rotation 20s infinite linear;  
               }  
       
               #show_jpg:hover{  
                   animation-play-state: paused;  
               }  
       
               #show_jpg figure{  
                   display: block; 
                   position: absolute;  
                   width: 140px;  
                   height: 200px;  
                   left: 10px;  
                   top: 10px;    
                   overflow: hidden;  
                   border: solid 1px white;  
               }  
               img{  
                   cursor: pointer;  
                   transition:all 0.2s ease 0s;  
                   width: 140px;  
                   height: 200px;  
               }  
       
               img:hover{  
                   filter: grayscale(1);  
                   transform: scale(1.1,1.1);  
               }  
       
               #show_jpg figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}  
               #show_jpg figure:nth-child(2) { transform: rotateY(50deg) translateZ(288px);}  
               #show_jpg figure:nth-child(3) { transform: rotateY(100deg) translateZ(288px);}  
               #show_jpg figure:nth-child(4) { transform: rotateY(150deg) translateZ(288px);}  
               #show_jpg figure:nth-child(5) { transform: rotateY(200deg) translateZ(288px);}  
               #show_jpg figure:nth-child(6) { transform: rotateY(250deg) translateZ(288px);}  
               #show_jpg figure:nth-child(7) { transform: rotateY(300deg) translateZ(288px);} 
       
               @keyframes rotation{  
                   from{  
                       transform: rotateY(0deg);  
                   }  
                   to{  
                       transform: rotateY(360deg);  
                   }  
               }  
       
           </style>
           <script>
               window.onload=function(){
                   var showimg = document.getElementById('show');
                   var i = 0;
                   timer=setInterval(function(){
                       showimg.innerHTML=story.innerHTML.substring(0,i);
                       i++;
                       if(showimg.innerHTML==story.innerHTML){
                           clearInterval(timer);
                       }
                   },200);
               }
           </script>
</head>
<body>
        <p id="show"></p>
        <div class="Container">
           <div id="show_jpg"> 
               <figure><img src="1.jpg" ></figure>
               <figure><img src="2.jpg"></figure>  
               <figure><img src="3.jpg" ></figure>  
               <figure><img src="4.jpg" ></figure>  
               <figure><img src="5.jpg"></figure>  
               <figure><img src="6.jpg" ></figure> 
               <figure><img src="7.jpg" ></figure> 
           </div>  
       </div> 
</body>
</html>