1. HTML 基本结构
在使用 HTML、CSS 和 JavaScript 来密码保护页面之前，我们需要先构建页面的基本结构。
一个基本的 HTML 结构由若干个元素组成，其中必须包含 Head 和 Body 两个主要元素，Head 元素用于定义文档的头部信息，例如文档的标题、样式表等等，而 Body 元素用于定义文档的主要内容。
我们在 Body 元素中定义密码输入框，用户名输入框，以及提交按钮，具体的代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Password protected page</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>
</body>
</html>
2. CSS 样式设置
在 HTML 结构中定义好了密码输入框、用户名输入框和提交按钮之后，我们需要对这些元素进行样式设置，让其看起来更加美观、直观。这里我们主要使用 CSS 来实现。
我们可以设置输入框和提交按钮的字体样式、背景色、边框样式等等，来达到我们想要的效果。具体的 CSS 样式代码如下所示：
form {
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
width: 300px;
background-color: #f2f2f2;
border-radius: 5px;
}
label {
display: inline-block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 16px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
设置好样式之后，我们页面的效果图如下所示：
3. JavaScript 处理逻辑
在 HTML 和 CSS 部分都已经完成之后，我们现在需要通过 JavaScript 来对输入的用户名和密码进行验证，以确定用户是否有权限访问该页面。
3.1 获取输入的用户名和密码
首先，我们需要获取到用户输入的用户名和密码，然后进行进一步的处理判断。
const form = document.querySelector('form');
const username = document.querySelector('#username');
const password = document.querySelector('#password');
form.addEventListener('submit', e => {
e.preventDefault();
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
});
在上面的代码中，我们首先通过 document.querySelector 方法获取到页面中的 form 元素以及输入的用户名和密码信息。然后给 form 元素绑定了 submit 事件，以便在用户点击提交按钮时能够进行验证处理。
3.2 验证用户名和密码是否正确
在获取到用户输入的用户名和密码信息之后，我们需要通过 JavaScript 对其进行验证处理。
在这里，我们可以定义一个对象数组来存储已经注册的用户信息，以便在用户登录时可以进行验证。
const users = [
{
username: 'admin',
password: '123456'
},
{
username: 'test',
password: '654321'
}
];
然后，我们可以通过 for...of 循环来遍历这个对象数组，比对用户输入的用户名和密码是否与已注册的用户信息相符合。
const form = document.querySelector('form');
const username = document.querySelector('#username');
const password = document.querySelector('#password');
const users = [
{
username: 'admin',
password: '123456'
},
{
username: 'test',
password: '654321'
}
];
form.addEventListener('submit', e => {
e.preventDefault();
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
for (const user of users) {
if (user.username === usernameValue && user.password === passwordValue) {
alert('Login success!');
return;
}
}
alert('Invalid username or password!');
});
在上面的代码中，我们首先定义了一个对象数组 users 来存储已经注册的用户信息。然后在进行验证时，我们通过 for...of 循环来遍历这个对象数组，比对用户输入的用户名和密码信息是否与已注册的用户信息相符合。如果匹配成功，我们就弹出登录成功的提示框，如果匹配失败，则弹出无效的用户名或密码的提示框。
最终，我们的完整的 HTML、CSS 和 JavaScript 代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Password protected page</title>
<style>
form {
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
width: 300px;
background-color: #f2f2f2;
border-radius: 5px;
}
label {
display: inline-block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 16px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>
<script>
const form = document.querySelector('form');
const username = document.querySelector('#username');
const password = document.querySelector('#password');
const users = [
{
username: 'admin',
password: '123456'
},
{
username: 'test',
password: '654321'
}
];
form.addEventListener('submit', e => {
e.preventDefault();
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
for (const user of users) {
if (user.username === usernameValue && user.password === passwordValue) {
alert('Login success!');
return;
}
}
alert('Invalid username or password!');
});
</script>
</body>
</html>
最终，我们的网页效果图如下所示：
总结
通过本文的介绍，我们学习了如何使用 HTML、CSS 和 JavaScript 来密码保护页面。我们学习了 HTML 页面的基本结构，以及如何通过 CSS 样式来美化页面，让其看起来更加美观、直观。最后，我们通过 JavaScript 实现了用户输入的用户名和密码验证，从而保护了页面的安全性。