自制靜態登陸頁面,在同一頁面中，實現點擊註冊按鈕，變換到註冊的盒子，並且實現兩次輸入密碼不一致的提示操作，登陸密碼錯誤提示，並且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 就會顯示用戶名密碼錯誤。