当然,以下是一个简单的示例代码,包含中文注释的登录功能的HTML、CSS和JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
.container {
width: 300px;
margin: 0 auto;
padding-top: 100px;
}
input[type="text"], input[type="password"] {
width: 100%;
height: 30px;
margin-bottom: 10px;
}
button {
width: 100%;
height: 40px;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h2>用户登录</h2>
<!-- 表单 -->
<!-- 用户名输入框 -->
<input type="text" id="username" placeholder="请输入用户名">
<!-- 密码输入框 -->
<input type="password" id="password" placeholder="请输入密码">
<!-- 登录按钮 -->
<button onclick="login()">登录</button>
<!-- 错误提示信息 -->
<p id="error-message"></p>
</div>
<!-- JavaScript代码 -->
<script>
function login() {
var username = document.getElementById("username").value; // 获取用户名
var password = document.getElementById("password").value; // 获取密码
// 进行登录验证
if (username === "admin" && password === "123456") {
alert("登录成功");
// 进行跳转或其他操作...
} else {
document.getElementById("error-message").innerText = "用户名或密码错误";
}
}
</script>
</body>
</html>
这是一个简单的登录页面示例,包含了HTML、CSS和JavaScript代码。你可以根据需要进行修改和扩展。希望对你有所帮助!
内容由零声教学AI助手提供,问题来源于学员提问