JS——用户登录界面
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
body{
background: moccasin;
}
.login-form
{
/*background: #6A5ACD;*/
width:26%;
margin: 10% auto 5% auto;
position: relative;
}
.head
{
position: absolute;
top: -15%;
left: 35%;
}
.main
{
position: relative;
}
.main h1
{
font-size: 25px;
color: #676767;
padding-top: 19%;
text-align: center;
}
.main form
{
width: 80%;
margin: 0 auto;
padding: 6% 0 9% 0;
}
.main p
{
text-align: center ;
}
.main form p a
{
color: #888;
}
form p a:hover
{
color: #21A957;
}
input[type="text"],
input[type="password"]
{
text-align: left;
position: relative;
width: 92%;
padding: 3%;
background: #D3D3D3;
margin-bottom: 6%;
color: #676767;
font-weight: 600;
font-size: 16px;
outline: none;
border: none;
border-radius: 5px;
border: 1px solid #DED6D6;
}
input[type="text"]:hover,
input[type="password"]:hover
{
border: 1px solid #949494;
transition: 0.5s;
}
input[type="submit"]
{
width: 99%;
padding: 3%;
background: #3385FF;
color: #ECECEC;
font-size: 20px;
border: none;
cursor: pointer;
font-weight: 500;
border-radius: 5px;
transition: 0.5s;
}
input[type="submit"]:hover
{
background: #0066FF;
color: #fff;
}
</style>
</head>
<body>
<div class="main">
<div class="login-form">
<h1>用户登录</h1>
<div class="head">
<img src="img/登录图标.png" width="120PX"/>
</div>
<form id="loginForm">
<input type="text" id="user" placeholder="用户名" />
<input type="password" id="pass" placeholder="密码" />
<p>
<a href="#">忘记密码</a>
<input type="checkbox" id="remember" /><span style="color: #888;">记住密码</span></p>
<input type="submit" value="登录" onclick="return dl()">
</form>
</div>
</div>
<script type="text/javascript">
//设置cookie
function setCookie(name, value, expires) {
var d = new Date();
d.setTime(d.getTime() + 1000 * 60 * 60 * 24 * expires);
document.cookie = name + "=" + value + ";expires=" + d.toUTCString();
}
//获取cookie
function getCookie(name) {
var str = document.cookie.split("; ")
for(var i = 0; i < str.length; i++) {
var kv = str[i].split("=");
if(kv[0] == name) return kv[1];
}
}
//函数调用，获取cookie，把id="user" 传给id
function $(id) {
return document.getElementById(id);
}
var user = getCookie("user");
var pass = getCookie("password");
$("user").value = (user == undefined ? "" : user);
$("pass").value = (pass == undefined ? "" : pass);
/**
* 登录
*/
function dl() {
//判断CheckBox是否被选中，选中则设置Cookie
if($("remember").checked) {
setCookie("user", $("user").value, 7);
setCookie("password", $("pass").value, 7);
}
//不让（submit）提交，则返回false
return false;
}
</script>
</body>
</html>
