forked from p59qpvlxt/tongxun
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
272 lines
7.9 KiB
272 lines
7.9 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>通讯录登入界面</title>
|
|
</head>
|
|
<style>
|
|
*{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
body{
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border:1px solide transparent;
|
|
background-color:ivory;
|
|
}
|
|
|
|
#account{
|
|
display:inline-block;
|
|
width:250px;
|
|
height:75px;
|
|
border:1px solid transparent;
|
|
margin-top:80px;
|
|
}
|
|
#account input{
|
|
height:25px;
|
|
}
|
|
#passwd{
|
|
display:inline-block;
|
|
width:250px;
|
|
height:75px;
|
|
border:1px solid transparent;
|
|
}
|
|
#passwd input{
|
|
height:25px;
|
|
}
|
|
input {
|
|
text-indent: 3em;
|
|
border:0.3px solid rgb(177, 161, 161);
|
|
border-radius: 5px;
|
|
box-shadow: 0.5px 0.5px 0.5px 0.05px rgb(247, 194, 227) inset;
|
|
text-align: justify;
|
|
}
|
|
input:focus{
|
|
outline:none;
|
|
}
|
|
#head{
|
|
text-align: center;
|
|
margin-top:50px;
|
|
font-size:5ch;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
|
|
}
|
|
div i{
|
|
color:rgb(151, 235, 227);
|
|
}
|
|
|
|
#login{
|
|
width:350px;
|
|
height:400px;
|
|
border:black solid 1px;
|
|
border-radius:3%;
|
|
background-color: rgb(255, 255, 255);
|
|
box-shadow: 1px 1px 3px 2px rgb(247, 194, 227);
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
transition:1s;
|
|
position: absolute;
|
|
transform:translateX(100px);
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
#button{
|
|
border: 1px solid rgb(223, 254, 252) ;
|
|
background-color: rgb(223, 254, 252);
|
|
height:35px;
|
|
width: 75px;
|
|
border-radius: 15%;
|
|
border-right: 0px;
|
|
}
|
|
|
|
#context{
|
|
width: 250px;
|
|
height: 400px;
|
|
border: 1px solid black;
|
|
box-sizing: border-box;
|
|
background-color: rgb(255, 255, 255);
|
|
box-shadow: 1px 1px 3px 2px rgb(247, 194, 227);
|
|
border-radius:3%;
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
flex-direction:column;
|
|
transition: 1s;
|
|
position: absolute;
|
|
transform:translateX(-200px);
|
|
z-index: 2;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
#context p{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 250px;
|
|
height: 75px;
|
|
font-family: 'Courier New', Courier, monospace ;
|
|
color: chartreuse;
|
|
font-size: 2.5ch;
|
|
}
|
|
|
|
#registration{
|
|
width:350px;
|
|
height:400px;
|
|
border:black solid 1px;
|
|
border-radius:3%;
|
|
background-color: rgb(255, 255, 255);
|
|
box-shadow: 1px 1px 3px 2px rgb(247, 194, 227);
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
transition:1s;
|
|
position: absolute;
|
|
transform:translateX(100px);
|
|
}
|
|
#box{
|
|
width: 1000px;
|
|
height: 500px;
|
|
background-color: ivory;
|
|
margin-top: 5%;
|
|
border: 1px solid transparent;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
</style>
|
|
<body>
|
|
|
|
|
|
<div id="box">
|
|
<div id="context">
|
|
<p></p>
|
|
<p>注册</p>
|
|
</div>
|
|
<form id="login" th:action="@{/postProcessorLogin}" target="_self">
|
|
<div id="head">
|
|
<i>登录页面</i>
|
|
</div>
|
|
<div id="account">
|
|
<i>账号 : </i>
|
|
<input type="text" placeholder="请输入账号" name="account">
|
|
</div>
|
|
|
|
<div id="passwd">
|
|
<i>密码 : </i>
|
|
<input type="password" placeholder="请输入密码" name="password">
|
|
</div>
|
|
|
|
<div><button id="button">登入</button></div>
|
|
</form>
|
|
|
|
<form id="registration" th:action="@{/postProcessorRegistration}" target="_self" >
|
|
<div id="head">
|
|
<i>注册页面</i>
|
|
</div>
|
|
<div id="account">
|
|
<i>账号 : </i>
|
|
<input type="text" placeholder="请输入账号" name="account">
|
|
</div>
|
|
|
|
<div id="passwd">
|
|
<i>密码 : </i>
|
|
<input type="password" placeholder="请输入密码" name="password">
|
|
</div>
|
|
|
|
<div><button id="button">注册</button></div>
|
|
<form>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script th:inline="javascript">
|
|
// 这里就写js代码 在我们点击上面的注册按钮之后就会转到注册界面上面
|
|
//注册完成之后就会显示 我们可以进行登录了，我们就在此点击登录按钮就可以了
|
|
|
|
|
|
|
|
var p = document.querySelector("#context p:nth-child(2)");
|
|
p.addEventListener("click", function(){
|
|
//我们可以通过判断当前的内容是什么来劲判断操作
|
|
if( p.innerText === '注册'){
|
|
//也就是是在我们点击了这个按钮之后我们就要将我们的登陆界面消掉
|
|
//将我们的注册界面显示出来
|
|
var login = document.querySelector("#login");
|
|
login.style.opacity=0;
|
|
login.zIndex='0';
|
|
|
|
var context = document.querySelector("#context");
|
|
context.style.transform='translateX(200px)';
|
|
p.innerText = '登入';
|
|
|
|
var registration = document.querySelector("#registration");
|
|
registration.style.transform = 'translateX(-100px)';
|
|
registration.style.zIndex = 1;
|
|
registration.style.opacity = 1;
|
|
}
|
|
else if( p.innerText==='登入') {
|
|
var registration = document.querySelector("#registration");
|
|
registration.style.opacity = 0;
|
|
registration.zIndex = '0';
|
|
|
|
var context = document.querySelector("#context");
|
|
context.style.transform = 'translateX(-200px)';
|
|
p.innerText = '注册';
|
|
|
|
var login = document.querySelector("#login");
|
|
login.style.transform = 'translateX(100px)';
|
|
login.style.zIndex = 1;
|
|
login.style.opacity = 1;
|
|
}
|
|
//这个是将我们显示的 账号已有进行刷新的操作
|
|
var secondP = document.querySelector("#context p:first-child");
|
|
secondP.innerText = "";
|
|
});
|
|
|
|
//这个是判断当前是否已经发有了账号
|
|
//账号 在数据库里已经有了的不能使用相同的账号
|
|
var isHaveAccount = [[${isHaveAccount}]];
|
|
if(isHaveAccount != null){
|
|
if(isHaveAccount === "当前账号已有"){
|
|
p.innerText = '注册';
|
|
|
|
console.log("没有账号")
|
|
var login = document.querySelector("#login");
|
|
login.style.opacity=0;
|
|
login.zIndex='0';
|
|
|
|
|
|
var context = document.querySelector("#context");
|
|
context.style.transform='translateX(200px)';
|
|
p.innerText = '登入';
|
|
|
|
var registration = document.querySelector("#registration");
|
|
registration.style.transform = 'translateX(-100px)';
|
|
registration.style.zIndex = 1;
|
|
registration.style.opacity = 1;
|
|
//要输出已有
|
|
var secondP = document.querySelector("#context p:first-child");
|
|
secondP.innerText = isHaveAccount;
|
|
secondP.style.color="red";
|
|
|
|
}else if(isHaveAccount ===''){
|
|
console.log("没有账号")
|
|
}
|
|
console.log("还没有置为null " + isHaveAccount);
|
|
isHaveAccount=null;
|
|
console.log("值为null " + isHaveAccount);
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |