自制静态登陆页面,在同一页面中，实现点击注册按钮，变换到注册的盒子，并且实现两次输入密码不一致的提示操作，登陆密码错误提示，并且3次失败后拒绝登陆
源代码获取：
https://github.com/akh5/web/tree/master/login
实现效果：
登陆，注册按钮有一个延时填充颜色的效果
点击注册后会切换盒子到注册
密码不一致时提示
密码错误提示
三次失败后，移除登陆按钮，禁止登陆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆界面</title>
<link type="text/css" href="regin.css" rel="stylesheet">
</head>
<body>
<div class="shadow">
<div class="front">
<h2>—————登录————-</h2>
<div class="account"><input placeholder="请输入用户名" id="racc"></div>
<div class="password"><input type="password" placeholder="请输入密码" id="rpass"></div>
<div class="style regin">登陆</div>
<div class="style signup">注册</div>
</div>
<div class="back">
<h2>-————注册————</h2>
<div class="signaccount"><p>请输入用户名:</p><input class="frame" id="acc1"></div>
<div class="signpassword"><p>请输入密码:</p><input class="frame" id="pass1"></div>
<div class="signpassword"><p>请再次输入密码:</p><input class="frame" id="pass2">
<p class="error">两次输入不 一 致</p></div>
<div class="signselect"><p>请选择性别:</p><label><input type="radio" name="gender" checked> 男</label><label><input type="radio" name="gender"> 女</label></div>
<div class="confirm">确认</div>
</div>
<div id="alert"></div>
</div>
<script src="regin.js"></script>
</body>
</html>
这里分为三层，一个shadow的灰色透明蒙层，为了遮盖背景鲜艳的颜色，不会被背景图吸引注意力，登陆的<div>容器，以及注册的<div>容器
CSS代码
body{
background-image: url("./img/1.jpg");
}
.shadow{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
}
.front{
width: 300px;
height: 300px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 8px;
background-color: rgba(255,255,255,.6);
transition: all 1.5s ease-out;
}
h2{
position: relative;
margin-top: 0;
top: 1px;
}
.front input{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
height: 30px;
width: 250px;
border-radius: 5px;
border-color: #00bcbc;
background-color: rgba(0,150,150,0.3);
}
.style{
width: 90px;
height:40px;
padding: 0;
position: absolute;
border: black solid 1px;
border-radius: 5px;
text-align: center;
line-height: 35px;
cursor: pointer;
overflow: hidden;
transition: 1s all ease;
}
.style::before{
background-color: rgba(50,0,255,1);
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
transition: all 0.6s ease;
}
.regin{
left: 22px;
top: 230px;
}
.regin::before{
width: 0;
height: 100%;
}
.regin:hover::before{
width: 100%;
}
.signup{
left: 181px;
top: 230px;
}
.signup::before{
width: 0;
height: 100%;
}
.signup:hover::before{
width: 100%;
}
.back{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 350px;
height: 550px;
background-color: rgba(255,255,255,0.6);
border-radius: 8px;
display: none;
transition: all 1.5s ease-in;
}
.back .frame{
position: relative;
left: 10px;
width: 300px;
height: 25px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 6px;
border-color: #443f8b;
}
.back .confirm{
left: 11px;
top: 50px;
font-weight: bold;
text-align: center;
position: relative;
width: 300px;
height: 30px;
border-radius: 8px;
cursor: pointer;
border: black solid 1px;
transition: background-color 1s ease;
}
.back .confirm:hover{
background-color: greenyellow;
}
.back .error{
position: relative;
left: 15px;
color: red;
margin: 0;
display: none;
}
#alert{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
width: 650px;
height: 40px;
border-radius: 8px;
background-color: rgba(0,0,255,0.8);
color: white;
line-height: 38px;
display: none;
}
核心JS代码
var front = document.getElementsByClassName("front");
var sign = document.getElementsByClassName("signup");
var back = document.getElementsByClassName("back");
var regin = document.getElementsByClassName("regin");
var racc = document.getElementById("racc");
var rpass = document.getElementById("rpass");
var alert = document.getElementById("alert");
var signacc = document.getElementsByClassName("signaccount");
var signpass = document.getElementsByClassName("signpassword");
var acc = document.getElementById("acc1")
var pass1 = document.getElementById("pass1");
var pass2 = document.getElementById("pass2");
var error = document.getElementsByClassName("error");
var confirm = document.getElementsByClassName("confirm");
sign[0].onclick = function regin() {
front[0].style.display = 'none';
back[0].style.display = 'block';
error[0].style.display='none';
};
function signup() {
error[0].style.display='none';
confirm[0].onclick = function () {
if(pass1.value!=pass2.value){
error[0].style.display='block';
pass1.value="";
pass2.value="";
}
if (acc.value!=""&&pass1.value!=""&&pass1.value==pass2.value){
front[0].style.display = 'block';
back[0].style.display = 'none';
acc.value="";
pass1.value="";
pass2.value="";
}
}
}
function reginin(){
var count = 3;
regin[0].onclick = function () {
if(count<=0){
regin[0].style.display="none";
}
if (racc.value!="abc"&&rpass.value!="123456"){
racc.value="";
rpass.value="";
alert.style.display="block";
alert.innerText=`用户名或密码错误，登陆失败，还剩${count--}次机会`
setTimeout (function () {
alert.style.display = 'none';
},1500)
}
}
}
signup();
reginin();
这里实现登陆与注册切换的方法是，通过点击事件，来将一个<div>的display属性设为none，就可以实现隐藏一个容器，显示一个容器。
因为这里是静态页面，所以我在JS里设了一个账号密码的固定值，来测试检验密码正确与否的方法，所以只要用户名输入的不是“abc”和123456 就会显示用户名密码错误。
