周三的博客

2023-11-24 23:13:34

登录页面效果及其代码（正则表达式）

<!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{
            text-align: center;
            margin: 0;
            padding: 0;
        }
        #bg{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1500px;
            height: 800px;
            background-image: url(./images/a.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('sign_up.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="login.html"
                }
                else{
                    alert("邮箱或密码不正确")
                    window.location.reload()
                }
            }
        }
    }
</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{
            text-align: center;
            margin: 0;
            padding: 0;
        }
        #bg{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1000px;
            height: 500px;
            background-image: url(./images/a.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(./images/i.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('sign_in.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="sign_in.html"
                    }
                }
            }
        }    
    }
</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>
        *{
            padding: 0;
            margin: 0;
        }

        body{
            background-image: url("./images/k.jpg");

;
        }

        #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(45deg) translateZ(500px);
        }
        #photo_box img:nth-child(3){
            transform: rotateY(90deg) translateZ(500px);
        }
        #photo_box img:nth-child(4){
            transform: rotateY(135deg) translateZ(500px);
        }
        #photo_box img:nth-child(5){
            transform: rotateY(180deg) translateZ(500px);
        }
        #photo_box img:nth-child(6){
            transform: rotateY(225deg) translateZ(500px);

        } #photo_box img:nth-child(7){
            transform: rotateY(270deg) translateZ(500px);

          }#photo_box img:nth-child(8){
            transform: rotateY(315deg) 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="./images/c.jpg">
        <img src="./images/t.jpg">
        <img src="./images/e.jpg">
        <img src="./images/f.jpg">
        <img src="./images/z.jpg">
        <img src="./images/h.jpg">
        <img src="./images/w.jpg">
        <img src="./images/m.jpg">
    </div>
</body>
<script>
    
</script>
</html>

码农公寓

相关文章