我直接在登入里面设置了用户名和密码,注册页面我正在改进。用户名为liujiayi,密码为20030313,你们可以自己在源代码里面改。我还会改进;最近才开始学前端知识,望各位大佬指点。
else if(password.value == "20030313"&& username.value == "liujiayi"){ alert("登入成功")}
html段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登入注册</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class="login">
<div>
账号:
<input type="text" id="username">
<br>
密码:
<input type="password" id="password">
<span id="message">(请输入6~16位密码)</span>
<br>
<button>登入</button>
</div>
</div>
<script type="text/javascript" src="login.js"></script>
</body>
</html>
css段:
* {
margin: 0;
padding: 0;
}
.login {
width: 100%;
height: 900px;
background: url(../img/1.jpg) no-repeat 0px 0px;
}
.login div {
color: red;
padding-top: 163px;
padding-left: 630px;
}
button {
margin-left: 109px;
}
js段:
password.onblur= function() {
var password = document.getElementById("password"); //得到账户的对象
var username = document.getElementById("username"); //得到用户所输入的账户
if(password.value.length < 6 ||password.value.length > 16){ alert("你输入的密码长度不符合要求")}
else if(password.value == "20030313"&& username.value == "liujiayi"){ alert("登入成功")}
else if(username.value != "liujiayi"){alert("用户名错误!")}
else{ alert("密码错误!!!")}
}
然后图片我就不给出了,哈哈哈,你们自己去百度。
效果如下: