这份代码不仅仅是静态的HTML和CSS，还包含了必要的JavaScript来处理用户交互（如输入框焦点、密码显示/隐藏、登录按钮点击等），使其成为一个可以实际运行的、体验良好的登录页面。
（图片来源网络，侵删）
功能特点
- 响应式设计：在电脑和手机上都能完美显示。
- 交互体验：
- 输入框获得焦点时,边框和图标会高亮。
- 包含一个“显示/隐藏密码”的切换按钮。
- 登录按钮有悬停效果。
- 点击“微信登录”按钮会模拟登录过程并给出提示。
- 现代美观：采用了类似微信Web端的简洁、干净的设计风格。
- 代码清晰：代码结构清晰,易于理解和修改。
源代码
您可以直接将以下所有代码复制到一个 .html 文件中,然后用浏览器打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">微信登录</title>
<style>
/* --- 全局样式重置和基础设置 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: #f7f8fa;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #333;
}
/* --- 登录容器 --- */
.login-container {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 40px;
width: 100%;
max-width: 400px;
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h1 {
font-size: 24px;
font-weight: 500;
color: #333;
}
.login-header p {
font-size: 14px;
color: #999;
margin-top: 8px;
}
/* --- 输入表单 --- */
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #c0c4cc;
font-size: 18px;
transition: color 0.3s;
}
.input-group input {
width: 100%;
padding: 12px 15px 12px 45px; /* 为图标留出空间 */
font-size: 16px;
border: 1px solid #dcdfe6;
border-radius: 6px;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
/* 输入框获得焦点时的样式 */
.input-group input:focus {
border-color: #07c160;
box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}
/* 输入框获得焦点时图标的样式 */
.input-group input:focus + i {
color: #07c160;
}
/* 密码输入框的特殊样式 */
.password-input-wrapper {
position: relative;
}
.toggle-password {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #909399;
user-select: none;
}
.toggle-password:hover {
color: #333;
}
/* --- 登录按钮 --- */
.login-button {
width: 100%;
padding: 14px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
background-color: #07c160;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s, opacity 0.3s;
}
.login-button:hover {
background-color: #06ae56;
}
.login-button:active {
opacity: 0.8;
}
/* --- 分割线 --- */
.divider {
display: flex;
align-items: center;
margin: 25px 0;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background-color: #e4e7ed;
}
.divider span {
padding: 0 15px;
font-size: 14px;
color: #909399;
}
/* --- 微信登录按钮 --- */
.wechat-login-button {
width: 100%;
padding: 14px;
font-size: 16px;
font-weight: 500;
color: #07c160;
background-color: #ffffff;
border: 1px solid #07c160;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.wechat-login-button:hover {
background-color: #07c160;
color: #ffffff;
}
.wechat-icon {
width: 20px;
height: 20px;
background-color: #07c160;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 12px;
}
/* --- 其他链接 --- */
.other-links {
text-align: center;
margin-top: 20px;
font-size: 14px;
}
.other-links a {
color: #07c160;
text-decoration: none;
margin-left: 5px;
}
.other-links a:hover {
text-decoration: underline;
}
/* --- 提示信息 --- */
.message {
text-align: center;
margin-top: 15px;
font-size: 14px;
height: 20px;
color: #f56c6c; /* 错误信息为红色 */
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-header">
<h1>微信登录</h1>
<p>登录后即可使用完整功能</p>
</div>
<form id="loginForm">
<div class="input-group">
<input type="text" id="username" placeholder="手机号/微信号/邮箱" required>
<i>👤</i>
</div>
<div class="input-group">
<div class="password-input-wrapper">
<input type="password" id="password" placeholder="请输入密码" required>
<i>🔒</i>
<span class="toggle-password" id="togglePassword">👁️</span>
</div>
</div>
<button type="submit" class="login-button">登 录</button>
</form>
<div class="divider">
<span>或</span>
</div>
<button type="button" class="wechat-login-button" id="wechatLoginBtn">
<div class="wechat-icon">微</div>
<span>使用微信扫码登录</span>
</button>
<div class="other-links">
<a href="#">立即注册</a> ·
<a href="#">忘记密码？</a>
</div>
<div class="message" id="message"></div>
</div>
<script>
// 1. 密码显示/隐藏功能
const passwordInput = document.getElementById('password');
const togglePassword = document.getElementById('togglePassword');
togglePassword.addEventListener('click', function() {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
// 更新图标
this.textContent = type === 'password' ? '👁️' : '🙈';
});
// 2. 登录表单提交处理
const loginForm = document.getElementById('loginForm');
const messageDiv = document.getElementById('message');
loginForm.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 这里只是一个简单的模拟验证
if (username && password) {
messageDiv.textContent = '登录成功！正在跳转...';
messageDiv.style.color = '#07c160'; // 成功信息为绿色
// 在实际应用中，这里会发送数据到服务器进行验证
// fetch('/api/login', { method: 'POST', body: JSON.stringify({username, password}) })
// .then(response => response.json())
// .then(data => { /* 处理返回结果 */ });
// 模拟跳转
setTimeout(() => {
alert('登录成功！这是一个演示，实际不会跳转。');
messageDiv.textContent = '';
}, 1500);
} else {
messageDiv.textContent = '请输入用户名和密码！';
}
});
// 3. 微信登录按钮点击处理
const wechatLoginBtn = document.getElementById('wechatLoginBtn');
wechatLoginBtn.addEventListener('click', function() {
messageDiv.textContent = '正在打开微信扫码登录...';
messageDiv.style.color = '#07c160';
// 在实际应用中，这里会跳转到微信的授权登录页面
// window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=YOUR_APPID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect';
// 模拟过程
setTimeout(() => {
alert('这是一个演示，实际会打开微信扫码界面。');
messageDiv.textContent = '';
}, 1500);
});
</script>
</body>
</html>
代码解析
HTML 结构
<div class="login-container">: 整个登录页面的外层容器,用于居中和设置宽度。<div class="login-header">: 页面顶部的标题和描述文字。<form id="loginForm">: 登录表单，包含两个输入框和一个提交按钮。<div class="input-group">: 每个输入项的包装器,方便布局和添加图标。<i>: 用于显示输入框前的图标（这里用emoji代替，实际项目中可使用Font Awesome等图标库）。<input>: 用户名和密码输入框。<span class="toggle-password">: 切换密码可见性的按钮。
<div class="divider">: 一条分割线,用于分隔普通登录和微信登录。<button class="wechat-login-button">: 微信登录按钮,带有微信风格的图标和文字。<div class="other-links">: “立即注册”和“忘记密码”等辅助链接。<div class="message" id="message">: 用于显示登录成功、失败等提示信息的区域。
CSS 样式
- *全局样式 (`body`)**: 设置了基础的字体、背景色和让内容在页面中居中。
.login-container: 定义了白色背景、圆角、阴影和最大宽度,使其看起来像一个独立的卡片。.input-group和相关样式:- 使用
position: relative和position: absolute实现了图标和密码切换按钮的精确定位。 focus伪类用于在用户点击输入框时改变其边框颜色和阴影,提供清晰的视觉反馈。
- 使用
.login-button和.wechat-login-button:.login-button使用微信的绿色作为主色调。.wechat-login-button使用白色背景和绿色边框，鼠标悬停时背景变为绿色，文字变为白色,形成良好的交互效果。
.divider: 使用:before和:after伪元素创建了灵活的分割线。
JavaScript 交互
- 密码显示/隐藏:
- 监听
togglePassword的点击事件。 - 通过切换
passwordInput的type属性（在'password'和'text'之间）来控制密码的可见性。 - 同时更新按钮上的图标（👁️ 和 🙈）。
- 监听
- 表单提交处理:
- 监听
loginForm的submit事件，并使用event.preventDefault()阻止页面刷新。 - 获取输入框的值,进行简单的模拟验证。
- 根据验证结果，在
message区域显示不同的提示信息。 - 注意: 这里的验证是前端模拟，在实际开发中，你需要使用
fetch或axios等工具将用户名和密码发送到后端API进行验证。
- 监听
- 微信登录按钮:
- 监听点击事件,并显示提示信息。
- 注意: 实际的微信登录需要通过其开放平台接入，会引导用户到微信的授权页面,这里只是一个前端交互的演示。
希望这份详细的源代码和解析能帮助您！
（图片来源网络，侵删）
