请用html,javascript,css,写一个用户登录界面,给出代码及注释
时间: 2023-09-08 12:04:46 浏览: 77
### 回答1:
以下是使用HTML、JavaScript和CSS编写的用户登录界面代码及注释:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="username" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="submit" value="Submit">
</a>
</form>
</div>
</body>
</html>
```
CSS代码:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #4a9e4d;
font-family: sans-serif;
}
.login-box {
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.login-box h2 {
margin: 0 0 20px;
text-align: center;
}
.login-box form {
position: relative;
}
.login-box form input {
width: 100%;
margin-bottom: 20px;
}
.login-box form input[type="text"],
.login-box form input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box form input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: white;
font-size: 16px;
background: #4a9e4d;
cursor: pointer;
border-radius: 20px;
}
.login-box form a {
position: relative;
display: inline-block;
}
.login-box form a input[type="submit"] {
position: absolute;
top: 0;
left: 0;
}
.login-box form a span {
position: absolute;
display: block;
}
.login-box form a span:nth-child(1) {
top: -2px;
left: -2px;
width: 0;
height: 2px;
background: #fff;
animation: login-btn1 1s;
}
.login-box form a span:nth-child(2) {
top: -2px;
right: -2px;
width: 2px;
height: 0;
background: #fff;
animation: login-btn2 1s;
animation-delay: 0.5s;
}
.login-box form a span:nth-child(3) {
bottom: -2px;
right: -2px;
width: 0;
height: 2px;
background: #fff;
animation: login-btn3 1s;
animation-delay: 1s;
}
.login-box form a span:nth-child(4) {
bottom: -2px;
left: -2px;
width: 2px;
height: 0;
background: #fff;
animation: login-btn4 1s;
animation-delay: 0.5s;
}
@keyframes login-btn1 {
from {width: 0;}
to {width: 100%;}
}
@keyframes login-btn2 {
from {height:
### 回答2:
以下是一个使用HTML、JavaScript和CSS编写的简单用户登录界面的示例代码:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> <!-- 引入CSS样式文件 -->
<script src="script.js"></script> <!-- 引入JavaScript脚本文件 -->
</head>
<body>
<h2>用户登录</h2>
<div class="container">
<label for="username"><b>用户名</b></label>
<input type="text" placeholder="请输入用户名" name="username" required>
<label for="password"><b>密码</b></label>
<input type="password" placeholder="请输入密码" name="password" required>
<button type="button" onclick="login()">登录</button>
</div>
</body>
</html>
```
CSS部分(style.css):
```css
.container {
width: 300px;
padding: 16px;
margin: 0 auto;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
```
JavaScript部分(script.js):
```javascript
function login() {
var username = document.getElementsByName('username')[0].value; // 获取用户名输入框的值
var password = document.getElementsByName('password')[0].value; // 获取密码输入框的值
// 假设用户名为admin,密码为123456
if (username === 'admin' && password === '123456') {
alert('登录成功');
} else {
alert('用户名或密码错误');
}
}
```
这段代码创建了一个简单的用户登录界面。用户需要输入用户名和密码,然后点击“登录”按钮。JavaScript函数`login()`被绑定到按钮的点击事件上,当用户点击登录按钮时,会调用`login()`函数。
`login()`函数首先获取输入框的值,然后通过简单的条件判断判断用户名和密码是否正确。如果用户名和密码都匹配,则显示一个弹窗,提示登录成功。否则,显示另一个弹窗,提示用户名或密码错误。
CSS文件定义了输入框和按钮的样式,使其在页面中居中并具有一定的美观效果。
### 回答3:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>用户登录界面</title>
<style>
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
.login-button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>用户登录</h2>
<form id="login-form">
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名" required>
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码" required>
<button class="login-button" type="submit">登录</button>
</form>
</div>
<script>
// 获取表单元素
const form = document.querySelector('#login-form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 获取输入的用户名和密码
const username = usernameInput.value;
const password = passwordInput.value;
// 在此处可以进行用户名和密码的验证逻辑
// ...
// 清空输入框的内容
usernameInput.value = '';
passwordInput.value = '';
});
</script>
</body>
</html>
```
上述代码实现了一个用户登录界面。使用HTML定义了表单的结构,并使用CSS样式设置了界面的样式。JavaScript部分通过添加事件监听器来实现表单的提交逻辑,当用户点击登录按钮时,会触发事件处理函数。处理函数中,我们获取表单中输入的用户名和密码,并可以在此处对用户输入进行验证。最后,清空输入框中的内容,以便用户输入下一次的登录信息。