制作二级菜单,内含注册和登录子菜单 (1)当单击注册时,弹出一个注册表单,表单中含有用户名、密码、性别、爱好、户籍所在地等信息,填写完成后单击“注册”按钮,显示表单中注册信息,同时隐藏注册表单。单击重置按钮是清空相关信息; (2)当单击登录时,弹出登录表单,表单中含有用户名和密码信息,当输入用户名为admin,密码是123456时,单击登录后显示正确,同时隐藏登录表单。单击“重置”按钮时清空所填信息。
时间: 2024-03-06 15:46:09 浏览: 16
好的,这是一个比较复杂的问题,需要使用前端技术来实现。以下是一个简单的 HTML、CSS、JavaScript 实现的示例代码,仅供参考:
HTML 代码:
```html
<div>
<button onclick="showMenu()">菜单</button>
<div id="menu" style="display: none;">
<button onclick="showRegisterForm()">注册</button>
<button onclick="showLoginForm()">登录</button>
</div>
</div>
<div id="register-form" style="display: none;">
<h2>注册</h2>
<form onsubmit="register(event)">
<label>用户名:<input type="text" name="username" required></label><br>
<label>密码:<input type="password" name="password" required></label><br>
<label>性别:<input type="radio" name="gender" value="男" required>男<input type="radio" name="gender" value="女" required>女</label><br>
<label>爱好:<input type="checkbox" name="hobbies" value="篮球">篮球<input type="checkbox" name="hobbies" value="足球">足球<input type="checkbox" name="hobbies" value="游泳">游泳</label><br>
<label>户籍所在地:<input type="text" name="address" required></label><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</div>
<div id="login-form" style="display: none;">
<h2>登录</h2>
<form onsubmit="login(event)">
<label>用户名:<input type="text" name="username" required></label><br>
<label>密码:<input type="password" name="password" required></label><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</div>
```
CSS 代码:
```css
button {
cursor: pointer;
}
```
JavaScript 代码:
```javascript
function showMenu() {
var menu = document.getElementById("menu");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
function showRegisterForm() {
var registerForm = document.getElementById("register-form");
registerForm.style.display = "block";
}
function showLoginForm() {
var loginForm = document.getElementById("login-form");
loginForm.style.display = "block";
}
function register(event) {
event.preventDefault();
var form = event.target;
var username = form.username.value;
var password = form.password.value;
var gender = form.gender.value;
var hobbies = [];
var hobbiesInputs = form.querySelectorAll("input[name='hobbies']:checked");
hobbiesInputs.forEach(function(input) {
hobbies.push(input.value);
});
var address = form.address.value;
alert("用户名:" + username + "\n密码:" + password + "\n性别:" + gender + "\n爱好:" + hobbies.join(",") + "\n户籍所在地:" + address);
form.reset();
var registerForm = document.getElementById("register-form");
registerForm.style.display = "none";
}
function login(event) {
event.preventDefault();
var form = event.target;
var username = form.username.value;
var password = form.password.value;
if (username === "admin" && password === "123456") {
alert("登录成功!");
} else {
alert("用户名或密码错误!");
}
form.reset();
var loginForm = document.getElementById("login-form");
loginForm.style.display = "none";
}
```
注:以上代码仅为示例,实际项目中需要根据具体需求进行修改和优化。