-
Notifications
You must be signed in to change notification settings - Fork 0
/
login.html
163 lines (157 loc) · 4.88 KB
/
login.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="#"/>
<link type="text/css" rel="styleSheet" href="css/login.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
</head>
<body>
<div id="bg">
<!--<div id="hint"><!– 提示框 –>-->
<!-- <p>登录失败</p>-->
<!--</div>-->
<div id="login_wrap">
<div id="login"><!-- 登录注册切换动画 -->
<div id="status">
<i style="top: 0">Log</i>
<i style="top: 35px">Sign</i>
<i style="right: 5px">in</i>
</div>
<span>
<form>
<p class="form"><label for="user">
<input type="text" id="user" placeholder="username">
</label></p>
<p class="form"><label for="passwd">
<input type="password" id="passwd" placeholder="password">
</label></p>
<p class="form confirm"><label for="confirm-passwd">
<input type="password" id="confirm-passwd" placeholder="confirm password">
</label></p>
<input type="button" value="Log in" class="btn" onclick="login()" style="margin-right: 20px;">
<input type="button" value="Sign in" class="btn" onclick='signin()' id="btn">
</form>
<a href="#">Forget your password?</a>
</span>
</div>
<div id="login_img"><!-- 图片绘制框 -->
<span class="circle">
<span></span>
<span></span>
</span>
<span class="star">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<span class="fly_star">
<span></span>
<span></span>
</span>
<p id="title">AUTUMN</p><!-- ✪o● -->
</div>
</div>
</div>
</body>
<script>
let is_login = true //若为真，说明现在处于login状态
let confirm = document.getElementsByClassName("confirm")[0]
//var user = document.getElementById("user")
//var passwd = document.getElementById("passwd")
//var con_pass = document.getElementById("confirm-passwd")
//自动居中title
let name_c = document.getElementById("title")
name = name_c.innerHTML
name_c.innerHTML = ""
for (let i = 0; i < name.length; i++)
if (name[i] !== ",")
name_c.innerHTML += "<i>" + name[i] + "</i>"
//回调函数
/*function submit(callback) {
//if (passwd.value == con_pass.value) {
let request = new XMLHttpRequest()
let url = ""
request.open("post", url, true)
let data = new FormData()
data.append("user", user.value)
data.append("passwd", passwd.value)
request.onreadystatechange = function() {
if (this.readyState == 4) {
callback.call(this, this.response)
//console.log(this.responseText)
}
}
request.send(data)
}
else {
hit.innerHTML = "两次密码不同"
hitting()
}
}*/
//注册按钮
function signin() {
let status = document.getElementById("status").getElementsByTagName("i")
if (is_login) {
confirm.style.height = 51 + "px"
status[0].style.top = 35 + "px"
status[1].style.top = 0
is_login = !is_login
} else {
/*if (!/^[A-Za-z0-9]+$/.test(user.value))
hit.innerHTML = "账号只能为英文和数字"
else if (user.value.length < 6)
hit.innerHTML = "账号长度必须大于6位"
else if (passwd.value.length < 6)
hit.innerHTML = "密码长度必须大于6位"
else if (passwd.value != con_pass.value)
hit.innerHTML = "两次密码不相等"
else if (passwd.value = con_pass.value) {
submit(function(res) {
if (res == "exist")
hit.innerHTML = "该账号已存在"
else if (res == true) {
hit.innerHTML = "账号注册成功，两秒后自动刷新页面"
setTimeout("window.location.reload()", 2000)
} else if (res == false)
hit.innerHTML = "账号注册失败"
})
}
hint()*/
}
}
//登录按钮
function login() {
if (is_login) {
window.location.href = "main.html";
/*let request = new XMLHttpRequest()
let url = ""
request.open("post", url, true)
let data = new FormData()
data.append("user", user.value)
data.append("passwd", passwd.value)
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.responseText == false)
hint()
else
window.location.href = this.responseText;
}
}
request.send(data)*/
} else {
let status = document.getElementById("status").getElementsByTagName("i")
confirm.style.height = 0
status[0].style.top = 0
status[1].style.top = 35 + "px"
is_login = !is_login
}
}
</script>
</html>