js学生管理系统登录和注册页面html
时间: 2024-02-11 20:08:49 浏览: 18
以下是一个简单的学生管理系统登录和注册页面的 HTML 和 JavaScript 代码示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生管理系统</title>
<script>
// 创建用户对象
function User(username, password) {
this.username = username;
this.password = password;
}
// 初始化用户列表
var users = [
new User("admin", "admin123")
];
// 注册新用户
function register() {
var username = document.getElementById("input-username").value;
var password = document.getElementById("input-password").value;
if (username && password) {
for (var i = 0; i < users.length; i++) {
if (users[i].username === username) {
alert("该用户名已被注册!");
return;
}
}
users.push(new User(username, password));
alert("注册成功!");
}
else {
alert("请输入用户名和密码!");
}
}
// 用户登录
function login() {
var username = document.getElementById("input-username").value;
var password = document.getElementById("input-password").value;
for (var i = 0; i < users.length; i++) {
if (users[i].username === username && users[i].password === password) {
alert("登录成功!");
return;
}
}
alert("用户名或密码错误!");
}
</script>
</head>
<body>
<h1>学生管理系统</h1>
<h2>注册</h2>
<label>用户名:</label>
<input type="text" id="input-username">
<label>密码:</label>
<input type="password" id="input-password">
<button onclick="register()">注册</button>
<h2>登录</h2>
<label>用户名:</label>
<input type="text" id="input-username">
<label>密码:</label>
<input type="password" id="input-password">
<button onclick="login()">登录</button>
</body>
</html>
```
上述代码中,我们使用 HTML 创建了一个简单的登录和注册页面。JavaScript 代码实现了用户对象的创建、用户列表的初始化和注册、以及用户登录功能。当用户点击“注册”按钮时,我们根据用户输入的用户名和密码创建一个新的用户对象,将其添加到用户列表中,并提示注册成功。如果用户名已被注册,则提示该用户名已被注册。当用户点击“登录”按钮时,我们检查用户输入的用户名和密码是否与用户列表中的任意一个用户匹配,如果匹配成功,则提示登录成功,否则提示用户名或密码错误。