web复习
今天我们复习一下web的基础操作，为后续web安全打基础
WEB分为html、css、js
我这里一共五个文件，2个html、1个css、2个js
首先是Html:
注册页面
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title><link rel="stylesheet" href="./css/styles.css">
</head><body><div id="register-container"><h2>用户注册</h2><form><label for="name">姓名:</label><input type="text" id="name" required><label for="number">身份证号:</label><input type="text" id="number" required><label for="password">密码:</label><input type="password" id="password" required><button type="button" onclick="registry()">注册</button></form><p>已有账号？去<a href="login.html">登录</a></p ></div><script src="js/register.js"></script>
</body>登录页面：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户登录</title><link rel="stylesheet" href="./css/styles.css">
</head><body><div id="login-container"><h2>用户登录</h2><form><label for="loginNumber">编号:</label><input type="text" id="loginNumber" required><label for="loginPassword">密码:</label><input type="password" id="loginPassword" required><button type="button" onclick="login()">登录</button></form><p>没有账号？去<a href="register.html">注册</a></p ></div><script src="js/login.js"></script>
</body>
</html>接着是CSS：
body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;background-color: #000;background-image: url("../img/a.jpg");background-size: cover; background-position: center; /* 背景深色，可自行调整 */
}
#register-container,
#login-container {background-color: rgba(255, 255, 255, 0.3); /* 白色半透明背景，可调整透明度 */padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px); width: 25%;/* 毛玻璃模糊效果，可调整模糊程度 */
}h2 {text-align: center;color: white;
}label {display: block;margin-bottom: 5px;color: white;
}input {width: 95%;padding: 10px;margin-bottom: 15px;border: 1px solid rgba(255, 255, 255, 0.5); /* 半透明边框 */border-radius: 10px;background-color: rgba(255, 255, 255, 0.1); /* 输入框半透明背景 */color: white;
}button {width: 100%;padding: 10px;background-color: white;color: black;border: none;border-radius: 10px;cursor: pointer;
}button:hover {background-color: #f4f4f4;
}p {margin-top: 10px;color: white;text-align: center;
}最后是js：
登录的js
function login() {// 获取用户输入的 ID 和密码const userIdInput = document.getElementById('loginNumber').value;const passwordInput = document.getElementById('loginPassword').value;// 检查是否输入完整if (!userIdInput || !passwordInput) {alert("请输入用户ID和密码");return;}// 验证用户ID是否为6位数字（字符串形式）const isValidId = /^\d{6}$/.test(userIdInput);if (!isValidId) {alert("用户ID必须是6位数字");return;}// 从本地存储中获取所有已注册用户const usersData = localStorage.getItem('users');const users = usersData ? JSON.parse(usersData) : [];// 查找是否存在这个用户（ID 和密码都匹配）let matchedUser = null;for (let i = 0; i < users.length; i++) {const user = users[i];if (user.userId === userIdInput && user.password === passwordInput) {matchedUser = user;break;}}// 查找是否存在这个ID（无论密码是否正确）const idExists = users.some(user => user.userId === userIdInput);if (matchedUser) {// 登录成功alert(`登录成功，欢迎回来 ${matchedUser.name}！\n用户ID: ${matchedUser.userId}`);window.location.href = 'main.html'; // 跳转到主页} else if (!idExists) {// 用户ID不存在const goToRegister = confirm('用户ID不存在，是否前往注册？');if (goToRegister) {window.location.href = 'register.html';}} else {// 用户ID存在，但密码错误alert('密码错误，请重试');// 清空密码框并重新聚焦（提升用户体验）const passwordInputElement = document.getElementById('loginPassword');passwordInputElement.value = '';passwordInputElement.focus();}
}
注册的js：
function registry() {// 获取用户填写的姓名、身份证号和密码const nameInput = document.getElementById('name').value;const idNumberInput = document.getElementById('number').value; // 身份证号const passwordInput = document.getElementById('password').value;// 检查是否有空值if (!nameInput || !idNumberInput || !passwordInput) {alert("请填写完整信息");return;}// 检查身份证号格式：18位（前17位是数字，最后一位可以是数字或X/x）const isIdValid = /^\d{17}[\dXx]$/.test(idNumberInput);if (!isIdValid) {alert("身份证格式不正确");return;}// 从本地 localStorage 获取所有用户信息const storedUsers = localStorage.getItem('users');const usersList = storedUsers ? JSON.parse(storedUsers) : [];// 检查身份证号是否已经注册过const idAlreadyUsed = usersList.some(user => user.number === idNumberInput);if (idAlreadyUsed) {alert("该身份证号已注册，请直接登录");window.location.href = 'login.html'; // 跳转到登录页return;}// 创建一个新用户对象const newUser = {name: nameInput,number: idNumberInput,password: passwordInput};// 将新用户加入原有用户列表usersList.push(newUser);// 将更新后的用户列表保存回本地存储localStorage.setItem('users', JSON.stringify(usersList));// 提示注册成功alert("注册成功！");window.location.href = 'login.html'; // 跳转到登录页
}
最后为执行的效果：
