JS之单页面登录注册

曾经终败给现在 2022-05-10 01:44 231阅读 0赞

> 实现思路：通过js控制display的none和block

### 1：html ###

<div class="form">
            
            <ul class="tab-group">
                <li class="tab active"><a href="#">REGISTER</a></li>
                <li class="tab"><a href="#">LOGIN</a></li>
            </ul>
            
            <div class="tab-content">
                
                <div id="register">
                    <h1>REGISTER</h1>
                    <form action="/" method="post">
    
                        <div class="top-row">
                            <div class="field-wrap">
                                <label>Name</label>
                                <input type="text" required autocomplete="off" />
                            </div>
                        </div>
    
                        <div class="field-wrap">
                            <label>Email Address</label>
                            <input type="email"required autocomplete="off"/>
                        </div>
    
                        <div class="field-wrap">
                            <label>Set A Password</label>
                            <input type="password"required autocomplete="off"/>
                        </div>
    
                        <button type="submit" class="button button-block"/>Get Started</button>
    
                    </form>
    
                </div>
                
                <div id="login">
                    <h1>LOGIN</h1>
                    <form action="/" method="post">
    
                        <div class="field-wrap">
                            <label>Email Address</label>
                            <input type="email"required autocomplete="off"/>
                        </div>
    
                        <div class="field-wrap">
                            <label>Password</label>
                            <input type="password"required autocomplete="off"/>
                        </div>
    
                        <p>
                            <input type="checkbox" value="" name="ok" >
                            <label>Remember Me</label>
                        </p>
    
                        <button class="button button-block"/>Log In</button>
    
                    </form>
    
                </div>
    
            </div>
        </div>

### 2：css ###

*{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        body{
            background: #c1bdba;
        }
        .form{
            background: rgba(57, 71, 97, 0.9);
            padding: 40px;
            max-width: 600px;
            margin: 60px auto;
            border-radius: 4px;
            box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
    
        }
        ul{
            margin: 0 0 40px 0;
        }
        ul li{
            list-style: none;
            display: inline-block;
            width: 49%;
    
        }
        li a:hover{
            background-color: #9ecaff;
        }
    
        ul li a {
            display: block;
            padding: 15px;
            background: #5c83b7;
            color: #d8f2ee;
            font-size: 20px;
            float: left;
            width: 90%;
            overflow: hidden;
            text-align: center;
            cursor: pointer;
            -webkit-transition: .5s ease;
            transition: .5s ease;
        }
        .field-wrap{
            margin-bottom: 20px;
        }
        .field-wrap  input {
            font-size: 22px;
    
            background: none;
            /*去除输入框白色底*/
            display: block;
            width: 100%;
            height: 5%;
            padding: 6px 0px;
            /*控制输入框大小*/
            border: 2px solid #a0b3b0;
            color: #ffffff;
            border-radius: 3px;
        }
        .field-wrap input:focus {
            outline: 0;
            /*阻止输入框自带的聚焦颜色*/
            border-color: #9ecaff;
        }
    
        h1 {
            text-align: center;
            color: #ffffff;
            font-weight: 300;
    
        }
        label{
            color: #d8f2ee;
        }
    
        .button {
            width: 100%;
            margin: 20px auto;
            display: block;
            border: 0;
            outline: none;
            border-radius: 0;
            padding: 15px 0;
            font-size: 2rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .1em;
            background: #5c83b7;
            color: #ffffff;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
            -webkit-appearance: none;
        }
        .button:hover {
            background-color: #9ecaff;
        }
    
        #register{
            display: none;
        }
        #login{
            display: block;
        }

###  3: js ###

//获取切换面板
    var tabs=document.getElementsByClassName("tab");
    //获取显示和隐藏的div
    var register=document.getElementById("register");
    var login=document.getElementById("login");
    //显示注册
    tabs[0].onclick=function () {
        register.style.display="block";
        login.style.display="none";
    };
    //显示登录
    tabs[1].onclick=function () {
        register.style.display="none";
        login.style.display="block";
    }

### 4:效果图 ###

### ![70][] ###

[70]: /images/20220510/cfbe55b6bf6c4436add9ac902d26b215.png