登录注册及登录状态的判断界面html源代码
时间: 2023-11-24 17:07:07 浏览: 36
以下是一个示例的HTML源代码,用于实现登录注册功能和登录状态的判断界面:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录注册</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.container {
width: 300px;
margin: 0 auto;
text-align: center;
}
h2 {
margin: 20px 0;
}
#loginForm, #registerForm, #loggedInUser {
display: none;
}
#loggedInUser {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<h2>登录注册</h2>
<div id="loginForm">
<h3>登录</h3>
<input type="text" id="loginUsername" placeholder="用户名"><br><br>
<input type="password" id="loginPassword" placeholder="密码"><br><br>
<button onclick="login()">登录</button>
</div>
<div id="registerForm">
<h3>注册</h3>
<input type="text" id="registerUsername" placeholder="用户名"><br><br>
<input type="password" id="registerPassword" placeholder="密码"><br><br>
<button onclick="register()">注册</button>
</div>
<div id="loggedInUser">
<h3>欢迎!</h3>
<p id="username"></p>
<button onclick="logout()">退出登录</button>
</div>
</div>
<script>
function login() {
var username = $("#loginUsername").val();
var password = $("#loginPassword").val();
// 在此处添加登录验证的代码,可以向服务器发送请求进行验证
// 假设验证通过,并且返回用户信息
var user = {
username: username
};
// 显示登录后的界面
$("#loginForm").hide();
$("#registerForm").hide();
$("#loggedInUser").show();
$("#username").text(user.username);
}
function register() {
var username = $("#registerUsername").val();
var password = $("#registerPassword").val();
// 在此处添加注册的代码,可以向服务器发送请求进行注册
// 假设注册成功,并且返回用户信息
var user = {
username: username
};
// 显示登录后的界面
$("#loginForm").hide();
$("#registerForm").hide();
$("#loggedInUser").show();
$("#username").text(user.username);
}
function logout() {
// 在此处添加退出登录的代码
// 显示登录注册界面
$("#loggedInUser").hide();
$("#loginForm").show();
$("#registerForm").show();
}
</script>
</body>
</html>
```
这段代码包含了一个登录表单、一个注册表单和一个显示已登录用户信息的界面。通过JavaScript函数进行登录、注册和退出登录的操作。你可以根据需要修改样式和添加服务器端验证和操作的代码。