<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">🏆 球员评分最高者 · 实用脚本</title>
<style>
* {
box-sizing: border-box;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
body {
background: linear-gradient(145deg, #f8fafc 0%, #e9eef3 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 1.5rem;
}
.card {
max-width: 900px;
width: 100%;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 2rem;
box-shadow: 0 25px 40px -12px rgba(0, 20, 30, 0.35),
0 2px 8px -4px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
padding: 2rem 2rem 1.8rem;
border: 1px solid rgba(255, 255, 255, 0.7);
transition: all 0.2s;
}
h1 {
font-size: 2.1rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #0b2b3b;
margin: 0 0 0.25rem 0;
display: flex;
align-items: center;
gap: 10px;
}
h1 span {
background: #1e4a5f;
color: white;
font-size: 0.9rem;
font-weight: 500;
padding: 0.2rem 1rem;
border-radius: 40px;
letter-spacing: 0.3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
.subhead {
color: #2c4f63;
font-weight: 400;
font-size: 1rem;
margin: 0 0 1.8rem 0;
border-left: 4px solid #2c7a9e;
padding-left: 1rem;
background: linear-gradient(to right, rgba(44, 122, 158, 0.08), transparent);
border-radius: 0 8px 8px 0;
}
.table-wrap {
background: #ffffffd9;
border-radius: 1.5rem;
padding: 0.5rem 0.25rem 0.25rem 0.25rem;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.02), 0 6px 16px rgba(0, 20, 30, 0.08);
border: 1px solid #ffffff;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.98rem;
border-radius: 1.2rem;
overflow: hidden;
background: white;
}
th {
background: #132e3f;
color: #eef7fc;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 1rem 1.2rem;
text-align: left;
white-space: nowrap;
}
td {
padding: 0.9rem 1.2rem;
border-bottom: 1px solid #e2eef5;
color: #0d1e28;
font-weight: 500;
}
tr:last-child td {
border-bottom: none;
}
tr:hover td {
background: #f1f9ff;
}
.rating-badge {
display: inline-block;
background: #e8f0fe;
color: #1e4a5f;
font-weight: 700;
padding: 0.25rem 0.8rem;
border-radius: 30px;
font-size: 0.9rem;
border: 1px solid #bdd7e7;
}
.top-scorer {
background: #fef7e0;
font-weight: 700;
color: #7a5800;
}
.top-scorer td {
background: #fff6e0;
color: #2e2a1a;
border-bottom: 1px solid #ffe9b6;
}
.highlight-row {
position: relative;
}
.highlight-row td:first-child {
border-left: 4px solid #f1b24a;
}
.trophy {
font-size: 1.2rem;
margin-right: 6px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}
.result-box {
margin-top: 1.8rem;
background: linear-gradient(115deg, #ffffff 0%, #f3faff 100%);
border-radius: 1.5rem;
padding: 1.2rem 1.8rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
border: 1px solid white;
box-shadow: 0 10px 18px -10px rgba(0, 40, 60, 0.2);
}
.result-label {
font-size: 1.1rem;
color: #1b3a4b;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.result-label .icon {
font-size: 1.8rem;
}
.result-value {
background: #1c3e51;
color: white;
padding: 0.7rem 1.6rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.4rem;
letter-spacing: -0.3px;
box-shadow: 0 6px 12px -6px #0e2c3b;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.result-value small {
font-weight: 400;
font-size: 0.85rem;
opacity: 0.8;
margin-left: 6px;
}
.script-badge {
margin-top: 1rem;
font-size: 0.78rem;
color: #5b7c8b;
text-align: right;
border-top: 1px dashed #bdd3df;
padding-top: 0.9rem;
display: flex;
justify-content: space-between;
}
.script-badge code {
background: #d9e6ef;
padding: 0.2rem 0.6rem;
border-radius: 30px;
color: #0e2b39;
font-weight: 600;
}
.button-row {
display: flex;
gap: 12px;
margin-top: 0.8rem;
justify-content: flex-end;
}
.btn {
background: #d9e6ef;
border: none;
font-weight: 600;
padding: 0.5rem 1.2rem;
border-radius: 40px;
font-size: 0.9rem;
color: #1a3b4b;
cursor: pointer;
transition: 0.15s;
border: 1px solid #b7d0dd;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.btn:hover {
background: #c2d8e6;
border-color: #8fb6ca;
transform: scale(0.98);
}
.btn-primary {
background: #1e4a5f;
color: white;
border-color: #0f2f3f;
}
.btn-primary:hover {
background: #0f3142;
}
</style>
</head>
<body>
<div class="card">
<h1>
⚽ 球员评分统计
<span>最高分</span>
</h1>
<div class="subhead">
📊 数据集 · 自动筛选评分最高的球员
</div>
<!-- 球员评分表格 -->
<div class="table-wrap">
<table id="playerTable">
<thead>
<tr>
<th>球员</th>
<th>评分</th>
<th>位置</th>
<th>俱乐部</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- 通过 JavaScript 动态渲染，便于统计并高亮 -->
</tbody>
</table>
</div>
<!-- 统计结果展示 -->
<div class="result-box">
<div class="result-label">
<span class="icon">🏅</span> 评分最高者
</div>
<div class="result-value" id="topPlayerDisplay">
<!-- JS 填充 -->
</div>
</div>
<!-- 脚本说明和操作按钮 -->
<div class="script-badge">
<span>🔍 实用脚本 · 统计最高评分</span>
<span><code>findTopScorer()</code></span>
</div>
<div class="button-row">
<button class="btn" id="resetBtn">🔄 重新排序</button>
<button class="btn btn-primary" id="highlightBtn">✨ 高亮最高分</button>
</div>
</div>
<script>
(function() {
// ---------- 球员数据集 (可替换/扩展) ----------
const players = [
{ name: "梅西", rating: 9.8, position: "前锋", club: "迈阿密国际" },
{ name: "姆巴佩", rating: 9.5, position: "前锋", club: "巴黎圣日耳曼" },
{ name: "哈兰德", rating: 9.7, position: "前锋", club: "曼城" },
{ name: "德布劳内", rating: 9.6, position: "中场", club: "曼城" },
{ name: "贝林厄姆", rating: 9.4, position: "中场", club: "皇家马德里" },
{ name: "维尼修斯", rating: 9.2, position: "前锋", club: "皇家马德里" },
{ name: "凯恩", rating: 9.3, position: "前锋", club: "拜仁慕尼黑" },
{ name: "萨拉赫", rating: 9.1, position: "前锋", club: "利物浦" },
{ name: "范戴克", rating: 9.0, position: "后卫", club: "利物浦" },
{ name: "库尔图瓦", rating: 9.2, position: "门将", club: "皇家马德里" }
];
// 获取最高评分球员 (可能有并列)
function getTopPlayers(playersArray) {
if (!playersArray.length) return [];
const maxRating = Math.max(...playersArray.map(p => p.rating));
return playersArray.filter(p => p.rating === maxRating);
}
// 核心渲染函数：绘制表格并展示最高分信息，支持高亮标记
function renderStats(highlightTop = true) {
const tbody = document.getElementById('tableBody');
const displayDiv = document.getElementById('topPlayerDisplay');
if (!tbody || !displayDiv) return;
// 清空表格
tbody.innerHTML = '';
// 找出最高评分 (不排序，保持原始顺序显示，但最高分高亮)
const topPlayers = getTopPlayers(players);
const maxRating = topPlayers.length > 0 ? topPlayers[0].rating : null;
// 逐行渲染
players.forEach(player => {
const row = document.createElement('tr');
// 如果该球员评分等于最高分，添加高亮类 (但保留悬停效果，使用自定义类)
const isTop = (maxRating !== null && player.rating === maxRating);
if (isTop && highlightTop) {
row.classList.add('top-scorer', 'highlight-row');
}
// 名字单元格 (如果最高分并且highlight，加奖杯)
const nameCell = document.createElement('td');
if (isTop && highlightTop) {
// 使用 innerHTML 添加奖杯图标
nameCell.innerHTML = `<span class="trophy">🏆</span>${player.name}`;
} else {
nameCell.textContent = player.name;
}
row.appendChild(nameCell);
// 评分单元格 (用 badge 展示)
const ratingCell = document.createElement('td');
const badgeSpan = document.createElement('span');
badgeSpan.className = 'rating-badge';
if (isTop && highlightTop) {
badgeSpan.style.background = '#fdebb3';
badgeSpan.style.color = '#6a4d00';
badgeSpan.style.borderColor = '#e6c45e';
}
badgeSpan.textContent = player.rating.toFixed(1);
ratingCell.appendChild(badgeSpan);
row.appendChild(ratingCell);
// 位置、俱乐部
const posCell = document.createElement('td');
posCell.textContent = player.position;
row.appendChild(posCell);
const clubCell = document.createElement('td');
clubCell.textContent = player.club;
row.appendChild(clubCell);
tbody.appendChild(row);
});
// 更新最高分展示区域
if (topPlayers.length > 0) {
const names = topPlayers.map(p => p.name).join('、');
const ratingValue = maxRating.toFixed(1);
// 如果多人并列，显示“并列最高”提示
if (topPlayers.length > 1) {
displayDiv.innerHTML = `${names} <small>并列最高 ${ratingValue}</small>`;
} else {
displayDiv.innerHTML = `${names} <small>${ratingValue} 分</small>`;
}
} else {
displayDiv.textContent = '暂无数据';
}
}
// ---------- 初始化渲染 ----------
renderStats(true);
// ---------- 事件监听：重置排序（其实保持原始顺序，但重新渲染，且不高亮最高分？这里我们直接高亮，因为高亮才是核心功能，但重置按钮让表格没有任何高亮，所以取反当前高亮状态？但我们希望重置按钮恢复成无高亮（普通表格）？但高亮按钮让它重新高亮，更明确:重置和高亮按钮分开控制。
// 重置按钮: 去掉所有高亮，展示普通表格
// 高亮按钮: 重新高亮最高分 (并默认保持)
const resetBtn = document.getElementById('resetBtn');
const highlightBtn = document.getElementById('highlightBtn');
// 重置: 不高亮任何行，但统计结果仍然显示最高分(文本不变)
resetBtn.addEventListener('click', function() {
renderStats(false); // 不高亮行，但显示最高分信息
});
// 高亮: 高亮最高分球员
highlightBtn.addEventListener('click', function() {
renderStats(true);
});
// 附加小优化：如果点击“重新排序”后，再点击高亮，恢复正常
// 同时可以让用户了解当前状态：无
// 可选: 在控制台输出最高分信息 (实用脚本特性)
const top = getTopPlayers(players);
console.log('📋 球员评分统计 —— 最高分:', top.map(p => `${p.name} (${p.rating})`).join(', '));
})();
</script>
</body>
</html>
核心功能与操作说明
这个页面可以帮您快速找出球员评分中的最高者，它的工作流程很直观,主要围绕一个数据表格和两个按钮展开。
- 数据展示：页面中央的表格会列出所有球员的姓名、评分、位置和俱乐部信息,评分会以醒目的徽章样式显示。
- 自动统计：页面加载后，会自动计算并高亮显示评分最高的球员行,同时在下方结果框中展示最高分球员的姓名和分数。
- 手动控制：您可以通过页面底部的按钮进行操作。“重新排序”按钮会取消高亮，让表格恢复普通样式；“高亮最高分”按钮则可以重新标记出最高分球员。
优化建议： 您可以根据需要修改 players 数组中的球员数据，例如更新姓名、评分或添加更多球员。
