login.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>Document</title>
<style>
body {
font-size: 16px;
background: #f1f1f1;
}
#errorMsg {
color: #f00;
}
.main {
width: 500px;
margin: 100px auto;
border: 1px #ccc solid;
display: flex;
flex-direction: column;
background: rgb(50, 201, 251);
color: #f1f1f1;
}
.login {
width: 500px;
height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
input {
height: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="login">
<h2>登录</h2>
<input type="text" name="username" id="username" placeholder="请输入用户名">
<input type="password" name="password" id="password" placeholder="请输入密码">
<input type="submit" id="login" onclick="login()" value="登录">
<p id="errorMsg"></p>
</div>
</div>
</body>
<script>
function login() {
var username = document.querySelector('#username').value;
var password = document.querySelector('#password').value;
var errorMsg = document.querySelector('#errorMsg');
console.log(username)
console.log(password)
if (username == "" || password == "") {
errorMsg.innerHTML = '请输出用户名或者密码'
} else {
if (username === 'admin' && password === 'admin') {
window.location.href = "index.html"
} else {
errorMsg.innerHTML = '用户名或者密码错误'
}
}
}
</script>
</html>
index.html 代码
<body>
<h2>登录成功</h2>
</body>