登录页面
登录名：admin 密码：123456
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
height: 100%;
background-image: linear-gradient(to right, #999999, #330867);
}
.login-wrapper {
background-color: bisque;
width: 358px;
height: 588px;
border-radius: 15px;
padding: 0 50px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.header {
font-size: 38px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
.input-item {
display: block;
width: 100%;
margin-bottom: 20px;
border: 0;
padding: 10px;
border-bottom: 1px solid rgb(128,125,125);
font-size: 15px;
outline: none;
}
.input-item::placeholder {
text-transform: uppercase;
}
.btn {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 40px;
background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);
color: #fff;
}
.msg {
text-align: center;
line-height: 88px;
}
a {
text-decoration-line: none;
color: #abc1ee;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.querySelector('.btn').addEventListener('click', check);
};
function check(){
var username = document.getElementById("username").value;
var pass = document.getElementById("password").value;
if(username == "admin" && pass == "123456"){
window.open("用户管理系统.html");
} else {
alert("密码不正确");
}
}
</script>
</head>
<body>
<div class="container">
<div class="login-wrapper">
<div class="header">登录</div>
<div class="form-wrapper">
<input type="text" name="username" placeholder="username" class="input-item" id="username">
<input type="password" name="password" placeholder="password" class="input-item" id="password">
<div class="btn" onclick="check()">登录</div>
</div>
<div class="forgot-password">
<a href="忘记密码.html">忘记密码？</a>
</div>
<div class="msg">
没有帐户?
<a href="注册.html">注册</a>
</div>
</div>
</div>
</body>
</html>
注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
<style>
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: Arial, sans-serif;
background-color:white;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
input[type="text"],
input[type="password"] {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
.error {
color: red;
margin-bottom: 15px;
}
.button {
background-color: #5cb85c;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="container">
<h2>注册</h2>
<form id="registrationForm">
<div class="error" id="usernameError"></div>
<input type="text" id="username" placeholder="用户名" required>
<div class="error" id="passwordError"></div>
<input type="password" id="password" placeholder="密码" required>
<div class="error" id="confirmPasswordError"></div>
<input type="password" id="confirmPassword" placeholder="确认密码" required>
<button type="submit" class="button">注册</button>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById('registrationForm');
var usernameInput = document.getElementById('username');
var passwordInput = document.getElementById('password');
var confirmPasswordInput = document.getElementById('confirmPassword');
var usernameError = document.getElementById('usernameError');
var passwordError = document.getElementById('passwordError');
var confirmPasswordError = document.getElementById('confirmPasswordError');
usernameInput.addEventListener('blur', function() {
var username = this.value;
var regex = /^[a-zA-Z0-9_]{5,20}$/;
if (!regex.test(username)) {
usernameError.textContent = '用户名格式不正确,请输入5-20位字母、数字或下划线组合';
} else {
usernameError.textContent = '';
}
});
passwordInput.addEventListener('blur', function() {
var password = this.value;
var regex = /^[a-zA-Z0-9_]{8,20}$/;
if (!regex.test(password)) {
passwordError.textContent = '密码格式不正确,请输入8-20位字母、数字或下划线组合';
} else {
passwordError.textContent = '';
}
});
confirmPasswordInput.addEventListener('blur', function() {
var password = passwordInput.value;
var confirmPassword = this.value;
if (password !== confirmPassword) {
confirmPasswordError.textContent = '两次输入的密码不一致';
} else {
confirmPasswordError.textContent = '';
}
});
form.addEventListener('submit', function(event) {
event.preventDefault();
// 这里可以添加表单提交的逻辑，例如使用 AJAX 发送数据到服务器
if (usernameInput.value && passwordInput.value && confirmPasswordInput.value) {
// 表单数据有效，可以提交表单
// 例如使用 AJAX 发送数据到服务器
// 如果服务器端返回成功响应，执行以下代码
window.location.href = '登录页面.html'; // 重定向到登录页面
}
});
});
</script>
</body>
</html>
忘记密码
用户管理页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理系统</title>
<style>
body {
font-family: Arial, sans-serif;
background-image: url(3.jpg);
background-size: cover;
}
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
.form-input { margin: 10px 0; width: 100%; }
.error { color: red; }
#student-form { display: none; padding: 20px; border: 1px solid #ddd; margin-top: 20px; }
</style>
</head>
<body>
<h1>用户管理系统</h1>
<div id="error-message" class="error"></div>
<button onclick="showAddForm()" style="margin-bottom: 20px;">Add New Student</button>
<form id="student-form" style="display: none;">
<input type="text" id="name" placeholder="姓名" class="form-input" required>
<input type="text" id="student-id" placeholder="学号" class="form-input" required>
<input type="number" id="age" placeholder="年龄" class="form-input" required>
<button type="submit">保存</button>
</form>
<table id="student-table">
<tr>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>操作</th>
</tr>
<!-- 学生数据将动态插入这里 -->
</table>
<script src="app.js"></script>
</body>
</html>