当前位置：网站首页>登录页面js手写
登录页面js手写
2022-08-04 05:26:00 【游小北】
手写了一个登录注册页面。预览
主要使用到 js动效
html部分
<main class="fixed-box">
<img src="images/logo-bai.png" class="logo">
<div class="login-btn">
<div class="login-text">登录</div>
</div>
<div class="register-btn">
<div class="register-text">注册</div>
</div>
</main>
<!-- 登录页 -->
<div class="login-box">
<img src="images/logo-bai.png" class="logo">
<span>登录</span>
<input type="text" placeholder="请输入手机号、邮箱">
<input type="password" placeholder="请输入密码">
<a href="index.html"><button>登录</button></a>
<button class="register-text-btn1">注册</button>
<span class="line">第三方授权</span>
<a href=""><img src="images/weixin.png" class="wx">
<img src="images/qq.png" class="qq"></a>
</div>
<div class="register-box">
<img src="images/logo-bai.png" class="logo">
<span>注册</span>
<input type="text" placeholder="请输入手机号、邮箱">
<input type="text" placeholder="请输入验证码">
<input type="password" placeholder="请输入密码">
<input type="password" placeholder="请确认密码">
<button class="fasong">发送验证码</button>
<button class="register-text-btn2">注册</button>
</div>css部分（代码比较多）
body {
position: relative;
min-width: 600px;
background-color: rgb(255, 245, 235);
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #151515;
}
li {
list-style: none;
}
.logo {
position: absolute;
left: 8px;
top: 8px;
width: 70px;
}
main {
position: relative;
width: 500px;
height: 300px;
background-color: #5bb8c1;
margin: 140px auto;
/* filter: drop-shadow(3px 3px 2px rgba(123, 123, 123, .1)); */
border-radius: 6px;
}
.login-btn {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 300px;
background: url(../images/zuoxiong.png);
background-repeat: no-repeat;
background-position: 75px 30px;
background-size: 110px;
}
.login-btn:hover {
cursor: pointer;
}
.register-btn {
position: absolute;
left: 250px;
top: 0;
width: 250px;
height: 300px;
background: url(../images/youxiong.png);
background-repeat: no-repeat;
background-position: 90px 30px;
background-size: 110px;
}
.register-btn:hover {
cursor: pointer;
}
.login-text {
position: absolute;
bottom: 35px;
left: 100px;
width: 50px;
height: 25px;
color: rgb(255, 255, 255);
background-color: rgb(228, 146, 47);
text-align: center;
line-height: 25px;
font-size: 14px;
border-radius: 20px;
filter: drop-shadow(3px 3px 2px rgba(123, 123, 123, .2));
}
.register-text {
position: absolute;
bottom: 35px;
right: 90px;
width: 50px;
height: 25px;
color: rgb(255, 255, 255);
background-color: rgb(228, 146, 47);
text-align: center;
line-height: 25px;
font-size: 14px;
border-radius: 20px;
filter: drop-shadow(3px 3px 2px rgba(123, 123, 123, .2));
}
/* 登录盒子 */
.login-box {
opacity: 0;
box-sizing: border-box;
position: absolute;
left: 120px;
top: -50px;
width: 350px;
height: 400px;
text-align: center;
background-color: rgb(125, 144, 236);
border-radius: 10px;
filter: drop-shadow(4px 3px 3px rgba(123, 123, 123, .5));
}
.login-box span {
margin-top: 70px;
display: block;
color: rgb(255, 255, 255);
font-size: 17px;
}
.login-box span:hover {
cursor: pointer;
}
.login-box input {
display: block;
width: 200px;
height: 30px;
margin: 20px auto;
border-radius: 6px;
border: solid 1px rgb(255, 255, 255);
}
input[type="text"]:focus,
input[type="password"]:focus {
outline: none !important;
color: rgb(205, 73, 66);
border: solid 1px rgb(205, 73, 66);
transition: .3s;
filter: drop-shadow(5px 5px 3px rgba(123, 123, 123, 0.2));
}
.login-box button {
margin: auto 10px;
width: 40px;
height: 28px;
border-radius: 4px;
border: none;
background-color: rgb(228, 146, 47);
color: rgb(255, 255, 255);
}
.login-box button:hover {
cursor: pointer;
}
/* 微信qq */
.login-box .wx {
box-sizing: border-box;
padding: 1px;
display: block;
position: absolute;
left: 138px;
bottom: 50px;
width: 27px;
height: 27px;
background-color: rgb(250, 250, 250);
border-radius: 4px;
}
.login-box .qq {
box-sizing: border-box;
padding: 2px;
display: block;
position: absolute;
left: 180px;
bottom: 50px;
width: 27px;
height: 27px;
background-color: rgb(250, 250, 250);
border-radius: 4px;
}
.login-box .line {
box-sizing: border-box;
color: rgb(250, 250, 250, .7);
padding-top: 2px;
font-size: 13px;
margin: 50px auto;
width: 150px;
height: 20px;
border-bottom: solid 1px rgba(250, 250, 250, .5);
}
/* 注册盒子 */
.register-box {
opacity: 0;
box-sizing: border-box;
position: absolute;
right: 120px;
top: -50px;
width: 350px;
height: 400px;
text-align: center;
background-color: rgb(125, 144, 236);
border-radius: 10px;
filter: drop-shadow(4px 3px 3px rgba(123, 123, 123, .5));
}
.register-box span {
margin-top: 60px;
display: block;
color: rgb(255, 255, 255);
font-size: 17px;
}
.register-box span:hover {
cursor: pointer;
}
.register-box input {
display: block;
width: 200px;
height: 30px;
margin: 20px auto;
border-radius: 6px;
border: solid 1px rgb(255, 255, 255);
}
.register-box button:last-child {
margin: auto 10px;
width: 40px;
height: 28px;
border-radius: 4px;
border: none;
background-color: rgb(228, 146, 47);
color: rgb(255, 255, 255);
}
.register-box button:last-child:hover {
cursor: pointer;
}
.fasong {
margin: auto 10px;
width: 80px;
height: 28px;
border-radius: 4px;
border: none;
background-color: rgb(228, 146, 47);
color: rgb(255, 255, 255);
}
.fasong:hover {
cursor: pointer;
}js部分
window.addEventListener("load", function() {
//登录注册
let login_btn = document.querySelector(".login-btn")
let register_btn = document.querySelector(".register-btn")
let login_box = document.querySelector(".login-box");
let register_box = document.querySelector(".register-box");
let register_text_btn1 = document.querySelector(".register-text-btn1");
let register_text_btn2 = document.querySelector(".register-text-btn2");
let login_text = document.querySelector(".login-text");
let register_text = document.querySelector(".register-text");
// 注册事件
register_text_btn2.onclick = function() {
register_box.onmouseleave();
register_btn.onmouseover = null;
}
login_text.onclick = function() {
login_box.style.left = "420px";
login_box.style.opacity = "1";
login_box.style.transition = "1.2s"
register_box.onmouseleave();
}
register_text.onclick = function() {
register_box.style.right = "420px";
register_box.style.opacity = "1";
register_box.style.transition = "1.2s"
}
register_text_btn1.onclick = function() {
register_box.style.right = "420px";
register_box.style.opacity = "1";
register_box.style.transition = "1.2s"
login_btn.onmouseover = null;
login_box.onmouseleave()
}
login_btn.onmouseover = function() {
login_box.style.left = "420px";
login_box.style.opacity = "1";
login_box.style.transition = "1.2s"
register_box.onmouseleave();
}
register_btn.onmouseover = function() {
register_box.style.right = "420px";
register_box.style.opacity = "1";
register_box.style.transition = "1.2s"
login_box.onmouseleave();
};
// 复位
login_box.onmouseleave = function() {
login_box.style.left = "120px";
login_box.style.opacity = "0";
login_box.style.transition = "1.2s";
}
register_box.onmouseleave = function() {
register_box.style.right = "120px";
register_box.style.opacity = "0";
register_box.style.transition = "1.2s";
}
})感谢浏览！
边栏推荐
猜你喜欢
Can‘t connect to MySQL server on ‘localhost3306‘ (10061) 简洁明了的解决方法
Sublime Text 3 2021.8.3 个人配置
乱码解决方案
FFmpeg源码分析：avformat_open_input
Programming hodgepodge (4)
![Deploy LVS-DR cluster [experimental]](/img/ad/84e05a6421d668b0b6ba6eeba0c730.jpg)
Deploy LVS-DR cluster [experimental]
DP4398:国产兼容替代CS4398立体声24位/192kHz音频解码芯片
Unity Visual Effect Graph入门与实践
MySQL log articles, binlog log of MySQL log, detailed explanation of binlog log
npm报错Beginning October 4, 2021, all connections to the npm registry - including for package installa
随机推荐
利用Jenkins实现Unity自动化构建
FFmpeg源码分析：avformat_open_input
TensorRTx-YOLOv5工程解读（一）
Wwise入门和实战
Swoole学习（一）
去重的几种方式
EventBus源码分析
Swoole学习（二）
MySQL log articles, binlog log of MySQL log, detailed explanation of binlog log
JS代码预编译
PHP解决字符乱码问题（多种编码转换）
关于let var 和const的区别以及使用
Can 't connect to MySQL server on' localhost3306 '(10061) simple solutions
Oracle备份脚本
8.03 Day34---BaseMapper query statement usage
跨域问题的解决
npm报错Beginning October 4, 2021, all connections to the npm registry - including for package installa
MySQL date functions
CentOS7 —— yum安装mysql
程序员的财富观