极客笔记JS登录页面完整代码
在现代Web开发中，用户登录页面是一个非常常见的功能。在这篇文章中，我们将详细介绍如何使用JavaScript创建一个简单的登录页面。我们将包括HTML、CSS和JavaScript代码，并逐步解释每一部分的作用。
HTML代码
首先，让我们来编写HTML代码，创建一个基本的登录页面。我们会包括一个用户名输入框、密码输入框和登录按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form id="loginForm">
<input type="text" id="username" placeholder="Username" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<p id="error"></p>
</div>
<script src="script.js"></script>
</body>
</html>
在上面的代码中，我们创建了一个包含用户名输入框、密码输入框和登录按钮的表单。我们还添加了一个用于显示错误信息的段落元素，用于在用户输入错误时显示错误信息。
CSS代码
接下来，让我们为登录页面添加一些样式，让页面看起来更加美观。
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
}
.container {
width: 400px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
margin-top: 20px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#error {
color: red;
text-align: center;
}
以上是我们为登录页面编写的CSS代码。我们设置了一些基本的样式，如页面背景颜色、边距、边框、圆角等。这些样式可以根据实际需求进行调整。
JavaScript代码
最后，让我们为登录页面添加JavaScript代码，实现用户输入验证和登录功能。
const form = document.getElementById('loginForm');
const username = document.getElementById('username');
const password = document.getElementById('password');
const error = document.getElementById('error');
form.addEventListener('submit', function(event) {
event.preventDefault();
error.innerHTML = '';
if (username.value === 'admin' && password.value === 'admin123') {
alert('Login successful!');
} else {
error.innerHTML = 'Invalid username or password. Please try again.';
}
});
在上面的JavaScript代码中，我们首先获取了表单元素、用户名输入框、密码输入框和用于显示错误信息的段落元素。然后，我们添加了一个事件监听器，当用户点击登录按钮时，会触发表单的submit事件。在事件处理程序中，我们首先阻止表单的默认提交行为，然后检查用户输入的用户名和密码是否正确。如果用户名和密码匹配，我们显示一个成功的提示框；否则，我们在错误信息段落中显示一条错误消息。
运行结果
现在我们已经完成了整个登录页面的代码。当用户在用户名输入框中输入”admin”，在密码输入框中输入”admin123″，然后点击登录按钮时，将会弹出一个提示框，提示”Login successful!”。如果用户输入的用户名或密码不正确，会在页面上显示一条错误信息，提示”Invalid username or password. Please try again.”。
通过以上代码，我们实现了一个简单的登录页面，展示了HTML、CSS和JavaScript的基本用法。你可以根据自己的需求对这个页面进行进一步的定制和扩展。