用js写一个售楼的登陆注册页面
时间: 2023-07-15 17:15:50 浏览: 60
以下是一个简单的售楼登陆注册页面的示例代码:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>售楼登陆注册页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<h2>登陆</h2>
<form>
<div class="user-box">
<input type="text" name="username" required="">
<label>用户名</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>密码</label>
</div>
<button type="submit" class="btn">登录</button>
<a href="#" class="register-link">还没有账号?请注册</a>
</form>
</div>
<div class="register-box">
<h2>注册</h2>
<form>
<div class="user-box">
<input type="text" name="username" required="">
<label>用户名</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>密码</label>
</div>
<div class="user-box">
<input type="password" name="confirm-password" required="">
<label>确认密码</label>
</div>
<button type="submit" class="btn">注册</button>
<a href="#" class="login-link">已有账号?请登录</a>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
}
.login-box, .register-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #ffffff;
padding: 40px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
text-align: center;
}
.login-box h2, .register-box h2 {
margin-bottom: 30px;
color: #333333;
font-size: 28px;
font-weight: 400;
}
.user-box {
position: relative;
margin-bottom: 30px;
}
.user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #333333;
border: none;
border-bottom: 2px solid #cccccc;
outline: none;
background-color: transparent;
}
.user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #333333;
pointer-events: none;
transition: 0.5s;
}
.user-box input:focus ~ label,
.user-box input:valid ~ label {
top: -20px;
left: 0;
color: #ff8c00;
font-size: 14px;
}
.btn {
display: inline-block;
background-color: #ff8c00;
color: #ffffff;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 25px;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-color: #333333;
}
.register-link, .login-link {
display: block;
margin-top: 20px;
color: #333333;
text-decoration: none;
transition: 0.5s;
}
.register-link:hover, .login-link:hover {
color: #ff8c00;
}
```
JavaScript:
```
const loginBtn = document.querySelector('.login-box button');
const registerLink = document.querySelector('.login-box .register-link');
const registerBtn = document.querySelector('.register-box button');
const loginLink = document.querySelector('.register-box .login-link');
const loginBox = document.querySelector('.login-box');
const registerBox = document.querySelector('.register-box');
// 显示注册表单
registerLink.addEventListener('click', () => {
loginBox.style.display = 'none';
registerBox.style.display = 'block';
});
// 显示登录表单
loginLink.addEventListener('click', () => {
registerBox.style.display = 'none';
loginBox.style.display = 'block';
});
// 登录表单提交验证
loginBtn.addEventListener('click', (e) => {
e.preventDefault();
const username = document.querySelector('.login-box input[name="username"]').value;
const password = document.querySelector('.login-box input[name="password"]').value;
// 在这里进行登录验证
console.log(`用户名:${username},密码:${password}`);
});
// 注册表单提交验证
registerBtn.addEventListener('click', (e) => {
e.preventDefault();
const username = document.querySelector('.register-box input[name="username"]').value;
const password = document.querySelector('.register-box input[name="password"]').value;
const confirmPassword = document.querySelector('.register-box input[name="confirm-password"]').value;
// 在这里进行注册验证
console.log(`用户名:${username},密码:${password},确认密码:${confirmPassword}`);
});
```
该示例页面包含一个登陆表单和一个注册表单。用户可以在登陆表单中输入用户名和密码进行登陆,或者在注册表单中输入用户名、密码和确认密码进行注册。
在JavaScript中,我们通过监听按钮的点击事件来获取用户输入的值,并在控制台中打印出来。在实际开发中,需要将这些值发送到服务器进行验证,并根据验证结果返回相应的提示信息。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)