Js实战--02登录注册
Js实战–02登录注册文章目录Js实战--02登录注册一、HTML布局二、样式1.代码2.页面效果图三、Js特效效果展示网站:https://www.bilibili.com/video/BV1yf4y1a7qv?share_source=copy_web一、HTML布局<main class="container"><!-- 注册 --><div class="co
·
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() {}
更多推荐
已为社区贡献1条内容
所有评论(0)