web复习

今天我们复习一下web的基础操作，为后续web安全打基础

WEB分为html、css、js

我这里一共五个文件，2个html、1个css、2个js

首先是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  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\'; // 跳转到登录页}

最后为执行的效果：