用JavaScript登陆注册➕主页
时间: 2023-07-01 16:11:33 浏览: 54
好的,我可以给您提供一个简单的示例代码,但是需要您具备一定的前端开发基础。
首先,我们需要准备一个 HTML 文件,包含三个部分:登陆表单、注册表单和主页。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login/Register</title>
</head>
<body>
<div id="login" style="display: block;">
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="button" value="Login" onclick="login()"><br><br>
<a href="#" onclick="showRegister()">Register</a>
</form>
</div>
<div id="register" style="display: none;">
<h2>Register</h2>
<form>
<label for="new_username">Username:</label>
<input type="text" id="new_username" name="new_username"><br><br>
<label for="new_password">Password:</label>
<input type="password" id="new_password" name="new_password"><br><br>
<input type="button" value="Register" onclick="register()"><br><br>
<a href="#" onclick="showLogin()">Login</a>
</form>
</div>
<div id="home" style="display: none;">
<h2>Welcome to the homepage!</h2>
<p>You are logged in as <span id="home_username"></span>.</p>
<a href="#" onclick="logout()">Logout</a>
</div>
<script src="main.js"></script>
</body>
</html>
```
接下来,我们需要编写 JavaScript 文件 `main.js`,实现登陆、注册和主页的功能。代码如下:
```javascript
// 定义用户数据
const users = [
{ username: "user1", password: "password1" },
{ username: "user2", password: "password2" },
{ username: "user3", password: "password3" }
];
// 获取 DOM 元素
const loginDiv = document.getElementById("login");
const registerDiv = document.getElementById("register");
const homeDiv = document.getElementById("home");
const homeUsername = document.getElementById("home_username");
// 显示登陆表单,隐藏注册表单和主页
function showLogin() {
loginDiv.style.display = "block";
registerDiv.style.display = "none";
homeDiv.style.display = "none";
}
// 显示注册表单,隐藏登陆表单和主页
function showRegister() {
loginDiv.style.display = "none";
registerDiv.style.display = "block";
homeDiv.style.display = "none";
}
// 显示主页,隐藏登陆表单和注册表单
function showHome(username) {
loginDiv.style.display = "none";
registerDiv.style.display = "none";
homeDiv.style.display = "block";
homeUsername.innerHTML = username;
}
// 登陆函数
function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// 验证用户名和密码
const user = users.find(u => u.username === username && u.password === password);
if (user) {
showHome(username);
} else {
alert("Invalid username or password!");
}
}
// 注册函数
function register() {
const newUsername = document.getElementById("new_username").value;
const newPassword = document.getElementById("new_password").value;
// 添加新用户
users.push({ username: newUsername, password: newPassword });
// 显示登陆表单
showLogin();
}
// 退出函数
function logout() {
showLogin();
}
```
这段代码中,我们首先定义了一个 `users` 数组,包含三个用户的用户名和密码。在 `showLogin`、`showRegister` 和 `showHome` 函数中,我们通过修改 DOM 元素的 `style.display` 属性来控制表单和主页的显示和隐藏。在 `login` 和 `register` 函数中,我们通过获取表单元素的值来验证用户名和密码,或者添加新用户。在 `logout` 函数中,我们调用 `showLogin` 函数来返回到登陆表单。
最后,我们将 HTML 文件和 JavaScript 文件放在同一个目录下,用浏览器打开 HTML 文件即可开始登陆注册。