用JavaScript写登陆注册界面
时间: 2024-03-01 16:50:20 浏览: 20
好的,下面是一个简单的用JavaScript实现的登录注册界面的示例代码,您可以参考一下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录/注册</title>
<style>
.content {
width: 300px;
margin: 0 auto;
}
.form {
margin-top: 20px;
display: none;
}
.form.active {
display: block;
}
</style>
</head>
<body>
<div class="content">
<div class="tabs">
<span class="tab active" onclick="switchTab(0)">登录</span>
<span class="tab" onclick="switchTab(1)">注册</span>
</div>
<div class="form active" id="loginForm">
<form>
<label for="username">用户名:</label>
<input type="text" id="username"><br>
<label for="password">密码:</label>
<input type="password" id="password"><br>
<button type="button" onclick="login()">登录</button>
</form>
</div>
<div class="form" id="registerForm">
<form>
<label for="username2">用户名:</label>
<input type="text" id="username2"><br>
<label for="password2">密码:</label>
<input type="password" id="password2"><br>
<label for="password3">确认密码:</label>
<input type="password" id="password3"><br>
<button type="button" onclick="register()">注册</button>
</form>
</div>
</div>
<script>
var tabs = document.getElementsByClassName('tab');
var forms = document.getElementsByClassName('form');
function switchTab(index) {
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
}
tabs[index].classList.add('active');
for (var i = 0; i < forms.length; i++) {
forms[i].classList.remove('active');
}
forms[index].classList.add('active');
}
function login() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 进行登录验证
// ...
alert('登录成功');
}
function register() {
var username = document.getElementById('username2').value;
var password = document.getElementById('password2').value;
var confirmPassword = document.getElementById('password3').value;
if (password !== confirmPassword) {
alert('两次输入的密码不一致');
return;
}
// 进行注册操作
// ...
alert('注册成功');
}
</script>
</body>
</html>
```
这个示例代码中包含了一个登录注册界面,有两个选项卡,分别对应登录和注册两个表单。当点击选项卡时,会切换到对应的表单。登录和注册的实现都是通过JavaScript中的函数进行的,您可以根据自己的需要修改这些函数的实现。