写一个前端代码,用户登录
时间: 2023-02-28 11:13:16 浏览: 51
下面是一个基于 HTML, CSS 和 JavaScript 的用户登录代码示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
/* 美化表单样式 */
form {
padding: 30px;
background-color: lightgray;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
}
/* 美化输入框样式 */
input[type="text"], input[type="password"] {
padding: 10px;
margin-top: 20px;
font-size: 16px;
border-radius: 5px;
border: none;
}
/* 美化提交按钮样式 */
input[type="submit"] {
padding: 10px 20px;
margin-top: 20px;
background-color: blue;
color: white;
border-radius: 5px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<h2>用户登录</h2>
<label>用户名:</label>
<input type="text" name="username">
<label>密码:</label>
<input type="password" name="password">
<input type="submit" value="登录">
</form>
<script>
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
// 获取用户输入的用户名和密码
const username = form.elements.username.value;
const password = form.elements.password.value;
// 判断用户名和密码是否正确
if (username === "admin" && password === "123456") {
alert("登录成功");
} else {
alert("用户名或密码错误");
}
});
</script>
</body>
</html>
```
这个代码示例中,我们创建了一个简单的登录表单,通过 JavaScript 实现了登录功能。在代码中,我们模拟了一个用户