Js实战–02登录注册

文章目录

Js实战--02登录注册
一、HTML布局
二、样式
- 1.页面效果图
三、Js特效

效果展示网站：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() {}

Js实战--02登录注册相关推荐

使用html+css+js实现的登录注册页面
使用html+css+js实现的登录注册页面这学期学了web,按照自己的想法实现下面的登录注册页面. 在注册页面里,使用js实现对邮箱格式.密码强度和密码一致性的检查. 源码放在github上,顺带 ...
node.js+vue.js+mysql实现登录注册的功能（前后端分离）
参考教程:github源码地址 Node.js+Mysql+Vue+ElementUI 实现登录注册注销功能 1 准备 1.1 MySQL数据库参考教程:NodeJS连接MySql.易百教程.菜鸟教 ...
JS新手案例---登录注册
登录注册案例又见面了!今天我们继续学习一起JS相关的小案例,登录注册案例.这个案例在日常生活中我们经常碰到,学完之后自己都能建一个漂亮的登录界面.首先先来看一下效果图(具体的图片和样式可以自己更改) ...
【HTML,CSS,JS】选项卡+登录注册界面
选项卡+登录注册界面源码 HTML CSS JavaScript 效果源码 HTML <!DOCTYPE html> <html><head><meta ...
Axure实战——实现登录注册功能
背景在做系分项目原型的时候,我需要做一个简单的登录注册模块.但要实现这个功能,只是看我之前写的博客中的相关教程是远远不够的.因此,我需要重新开始摸索,便有了这篇博客. 为了完成该功能,我们需要用到两 ...
Node.js模拟实现登录注册
一:建文件夹,搭建目录项目开始前先建好文件夹目录,如下图: 强调一点:是什么样的文件类型就放到什么类型的文件夹中,不要搞混,尤其是在项目当中要特别注意!!! 二:写静态页面 1./register注 ...
HTML+CSS+JS实现个人相册登录注册
一.任务一完成<个人相册>项目登录页面要求: 使用正则表达式验证邮箱密码长度至少为6位且为字母与数字的组合二.任务二完成<个人相册>项目注册页面要求: 使用正则表达 ...
html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下如果电话号码已经存在,页面: 如 ...

Js实战--02登录注册

Js实战–02登录注册

文章目录

一、HTML布局

二、样式

1.页面效果图

三、Js特效

Js实战--02登录注册相关推荐

最新文章

热门文章