功能:点击登录界面的“注册”按钮,显示注册界面 显示注册界面的代码示例如下: 注:根据自己的设计来写代码,不能照搬,先理解每句代码的意思,也可参考前面登录界面的显示代码。 点击“注册”按钮的事件自己完成,模仿登录按钮的点击事件的注册
时间: 2024-02-06 17:08:47 浏览: 23
以下是一个简单的注册界面代码示例,可以根据需要进行修改:
HTML代码:
```
<div id="registerForm" style="display:none;">
<h2>用户注册</h2>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br>
<button type="submit">注册</button>
</form>
</div>
```
CSS代码:
```
#registerForm {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
width: 300px;
text-align: center;
}
```
JavaScript代码:
```
var registerButton = document.getElementById("registerButton");
var registerForm = document.getElementById("registerForm");
registerButton.addEventListener("click", function() {
registerForm.style.display = "block";
});
var registerFormSubmit = document.querySelector("#registerForm button[type='submit']");
registerFormSubmit.addEventListener("click", function(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
// 在这里添加注册逻辑
});
```
该代码会在页面加载时隐藏注册界面,当点击登录界面的“注册”按钮时,显示注册界面。点击注册界面的“注册”按钮时,会执行提交事件的回调函数,可以在这里添加注册逻辑。