完成一个登录界面:包括用户名输入、密码输入和确认登录按钮,接收并显示所输入的用户名和密码,
时间: 2023-11-30 07:02:53 浏览: 35
以下是一个基础的 HTML/CSS/JavaScript 登录界面示例,可以实现用户名输入、密码输入和确认登录按钮,并能够接收并显示所输入的用户名和密码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="login">
<div class="login-header">
<h2>用户登录</h2>
</div>
<div class="login-body">
<form>
<input type="text" id="username" placeholder="用户名" />
<input type="password" id="password" placeholder="密码" />
<button type="button" onclick="login()">登录</button>
</form>
</div>
<div class="login-footer">
<p id="login-message"></p>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
```
CSS 代码:
```css
body {
background-color: #eee;
}
.login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
width: 300px;
height: 350px;
}
.login-header {
background-color: #f2f2f2;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding: 10px;
text-align: center;
}
.login-body {
padding: 20px;
}
.login-body input[type="text"],
.login-body input[type="password"] {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.login-body button[type="button"] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.login-body button[type="button"]:hover {
background-color: #3e8e41;
}
.login-footer {
padding: 10px;
text-align: center;
}
```
JavaScript 代码:
```javascript
function login() {
// 获取用户名和密码输入框元素
var usernameInput = document.getElementById("username");
var passwordInput = document.getElementById("password");
// 获取输入的用户名和密码
var username = usernameInput.value;
var password = passwordInput.value;
// 显示登录信息
var loginMessage = document.getElementById("login-message");
loginMessage.innerHTML = "用户名:" + username + "<br>密码:" + password;
}
```
在该示例中,我们创建了一个登录表单,包含一个用户名输入框、一个密码输入框和一个确认登录按钮。当用户单击确认登录按钮时,JavaScript 代码会获取输入的用户名和密码,并将其显示在页面上。这个示例中的 CSS 样式可以在 `css/login.css` 文件中找到,JavaScript 代码可以在 `js/login.js` 文件中找到。