<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成员真伪查询</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
width: 100%;
max-width: 600px;
margin: 50px auto;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h2 {
text-align: center;
color: #333;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #666;
}
.input-group input {
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.btn {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
color: #333;
display: none;
position: relative;
}
.result.success {
border-color: #4CAF50;
background-color: #e8f5e9;
color: #388E3C;
}
.result.error {
border-color: #F44336;
background-color: #FFEBEE;
color: #D32F2F;
}
.stamp {
position: absolute;
top: 10px;
right: 10px;
width: 80px;
height: 80px;
background-color: #4CAF50;
color: white;
font-size: 16px;
font-weight: bold;
display: none;
text-align: center;
line-height: 80px;
border-radius: 50%;
transform: rotate(-45deg);
opacity: 0;
animation: stampAnim 1s forwards;
}
@keyframes stampAnim {
0% {
opacity: 0;
transform: rotate(-45deg) scale(0);
}
100% {
opacity: 1;
transform: rotate(-45deg) scale(1);
}
}
.resume {
margin-top: 20px;
padding: 15px;
background-color: #f1f1f1;
border-radius: 8px;
font-size: 14px;
line-height: 1.6;
display: none;
}
.resume h3 {
margin-bottom: 10px;
color: #333;
}
.resume p {
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h2>成员真伪查询</h2>
<div class="input-group">
<label for="memberId">请输入成员ID：</label>
<input type="text" id="memberId" placeholder="例如：12345">
</div>
<button class="btn" onclick="checkMember()">查询</button>
<div id="result" class="result">
<div id="stamp" class="stamp">正版成员</div>
</div>
<div id="resume" class="resume">
<h3>个人简历</h3>
<p><strong>姓名：</strong><span id="resumeName"></span></p>
<p><strong>年龄：</strong><span id="resumeAge"></span></p>
<p><strong>职位：</strong><span id="resumePosition"></span></p>
<p><strong>简介：</strong><span id="resumeBio"></span></p>
</div>
</div>
<script>
// 模拟的成员数据，加入个人简历信息
const members = [
{
id: "12345", name: "张三", valid: true, age: 28, position: "开发工程师", bio: "张三是公司的一名资深开发工程师，参与过多个重要项目的开发与维护。"
},
{
id: "67890", name: "李四", valid: false, age: 34, position: "产品经理", bio: "李四曾在多个互联网公司担任产品经理，具有丰富的产品经验。"
},
{
id: "54321", name: "王五", valid: true, age: 25, position: "UI设计师", bio: "王五是一位创意十足的UI设计师，擅长视觉设计和用户体验。"
},
{
id: "98765", name: "赵六", valid: false, age: 30, position: "测试工程师", bio: "赵六是一位测试工程师，专注于软件的质量控制和自动化测试。"
}
];
// 查询成员函数
function checkMember() {
const memberId = document.getElementById('memberId').value.trim();
const resultDiv = document.getElementById('result');
const stampDiv = document.getElementById('stamp');
const resumeDiv = document.getElementById('resume');
// 清除先前的盖章、简历和结果
stampDiv.style.display = 'none';
resumeDiv.style.display = 'none';
resultDiv.classList.remove('success', 'error');
resultDiv.style.display = 'none';
if (!memberId) {
resultDiv.textContent = '请输入成员ID！';
resultDiv.className = 'result error';
resultDiv.style.display = 'block';
return;
}
const member = members.find(m => m.id === memberId);
if (member) {
if (member.valid) {
resultDiv.textContent = `成员 ${member.name}（ID: ${member.id}）是真实的。`;
resultDiv.className = 'result success';
resultDiv.style.display = 'block';
// 显示盖章效果
stampDiv.style.display = 'block';
// 显示成员个人简历
document.getElementById('resumeName').textContent = member.name;
document.getElementById('resumeAge').textContent = member.age;
document.getElementById('resumePosition').textContent = member.position;
document.getElementById('resumeBio').textContent = member.bio;
resumeDiv.style.display = 'block';
} else {
resultDiv.textContent = `成员 ${member.name}（ID: ${member.id}）是无效的。`;
resultDiv.className = 'result error';
resultDiv.style.display = 'block';
}
} else {
resultDiv.textContent = '没有找到该成员ID，请检查输入！';
resultDiv.className = 'result error';
resultDiv.style.display = 'block';
}
}
</script>
</body>
</html>
最后修改：2025 年 01 月 09 日
© 允许规范转载