Js实战–02登录注册

效果展示网站：https://www.bilibili.com/video/BV1yf4y1a7qv?share_source=copy_web

一、HTML布局

  <main class="container">
      <!-- 注册 -->
      <div class="container_form container_signup">
        <form action="#" class="form" id="form1">
          <h2 class="form_title">注册账号</h2>
          <input type="text" placeholder="User" class="input" id="sign_user"/>
          <input type="email" placeholder="Email" class="input" id="sign_email" />
          <input type="password" placeholder="Password" class="input" id="sign_password" />
          <button class="btn" onclick="sign()">点击注册</button>
        </form>
      </div>
      <!-- 登录 -->
      <div class="container_form container_signin">
        <form action="#" class="form" id="form2">
          <h2 class="form_title">欢迎登录</h2>
          <input type="text" placeholder="User" class="input" id="login_user" />
          <input type="password" placeholder="Password" class="input" id="login_password" />
          <a href="#" class="link">忘记密码？</a>
          <button class="btn" onclick="login()">登录</button>
        </form>
      </div>

      <div class="overlay_panel overlay_left">
        <button class="btn"  id="signIn">已有账号，直接登录</button>
      </div>
      <div class="overlay_panel overlay_right">
        <button class="btn"  id="signUp">没有账号，点击注册</button>
      </div>
    </main>

二、样式

1.页面效果图

三、Js特效

const container = document.getElementsByClassName("container")[0];
const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");

signUpBtn.addEventListener("click", () => {
  container.classList.add("right_panel_active");
});

signInBtn.addEventListener("click", () => {
  container.classList.remove("right_panel_active");
});

function login() {}

function sign() {}