<think>我们创建
一个简单的计分板，用于展示8名选手的排名、得分和总分。
需求：
- 记录8名选手的排名（根据总分排序）
- 记录每位选手的得分（可能是多个项目的得分）和总分
- 计分板需要清晰展示
设计：
- 使用HTML表格，每一行代表一名选手
- 列包括：排名、选手编号、姓名（可选）、多个得分项、总分
- 支持动态更新选手得分，并自动重新排名
我们将创建
一个包含以下列的表格：
排名（Rank）、选手ID（ID）、姓名（Name）、得分项1（Score1）、得分项2（Score2）、总分（Total）
由于问题中没有指定具体的得分项数量，这里假设有两个得分项（如技能测试和综合展示），但我们可以根据需要调整。
步骤：
1. 创建HTML结构，包括表格
2. 使用JavaScript来存储选手数据，并实现排序（根据总分）
3. 提供更新得分的功能（这里为了简化，我们不提供编辑界面，而是通过预设数据模拟）
注意：为了简化，我们将数据存储在数组中，每次更新数据后重新渲染表格。
代码结构：
- 定义8名选手的初始数据（包括id，姓名，各项得分）
-
一个函数用于计算每位选手的总分
-
一个函数用于根据总分排序（降序），并确定排名（注意并列排名）
-
一个函数用于渲染表格（根据当前数据重新生成表格内容）
由于要求代码简短，我们将尽量精简。
实现：
我们将创建
一个数组来存储选手数据。每个选手是
一个对象，包含：id, name, scores（
一个数组），total。
初始化时，我们计算总分，然后排序并赋予排名。
注意：排名规则：总分相同则排名相同，但后续排名会跳过并列的人数。例如：两个并列第一，则下
一个是第三名。
但是为了简单，我们先不考虑并列，直接按总分排序，排名按顺序（总分相同按其他规则？题目没有说明，这里我们先按总分排序，相同则按选手id排序，然后排名按顺序1,2,3...）
如果要求并列，则稍微复杂，这里我们先不考虑并列，按顺序排名。
我们将创建
一个函数updateScoreboard()，该函数会：
- 计算每个选手的总分（如果还没计算）
- 按总分降序排序（如果总分相同，我们
暂且按id升序）
- 生成表格内容
然后我们调用这个函数来初始化。
由于问题要求尽量简短，我们将不使用编辑功能，而是固定数据。如果需要编辑，可以后续扩展。
下面开始编写代码：
</think># 8名选手计分板实现
下面是
一个简洁但功能完整的HTML计分板，用于记录8名选手的排名、得分和总分：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选手计分板</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: white;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
header {
text-align: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 3px solid #ffcc00;
}
header h1 {
font-size: 42px;
margin-bottom: 5px;
text-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
letter-spacing: 2px;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
button {
background: linear-gradient(to bottom, #ffcc00, #ff9900);
border: none;
border-radius: 50px;
color: #1a2a6c;
padding: 10px 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
min-width: 120px;
font-size: 16px;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4);
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background: rgba(255, 255, 255, 0.07);
border-radius: 10px;
overflow: hidden;
}
th {
background: linear-gradient(to right, #ff9900, #ffcc00);
color: #1a2a6c;
padding: 15px;
text-align: center;
font-size: 18px;
}
tr:nth-child(even) {
background: rgba(255, 255, 255, 0.05);
}
tr:hover {
background: rgba(255, 204, 0, 0.15);
}
td {
padding: 15px;
text-align: center;
font-size: 18px;
}
.medal {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
line-height: 30px;
font-weight: bold;
margin-right: 10px;
}
.gold { background: linear-gradient(to bottom, #ffd700, #ff9800); }
.silver { background: linear-gradient(to bottom, #c0c0c0, #808080); }
.bronze { background: linear-gradient(to bottom, #cd7f32, #8c4a1f); }
.podium {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
height: 220px;
align-items: flex-end;
}
.podium-place {
flex: 1;
max-width: 200px;
background: linear-gradient(to bottom, #ffcc00, #ff9900);
padding: 20px;
border-radius: 10px 10px 0 0;
text-align: center;
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.podium-place.first {
height: 200px;
background: linear-gradient(to bottom, #ffd700, #ff9800);
}
.podium-place.second {
height: 150px;
background: linear-gradient(to bottom, #c0c0c0, #808080);
}
.podium-place.third {
height: 120px;
background: linear-gradient(to bottom, #cd7f32, #8c4a1f);
}
.podium-name {
font-weight: bold;
font-size: 20px;
margin-top: 10px;
}
.podium-score {
font-size: 24px;
font-weight: bold;
}
.total-display {
text-align: center;
font-size: 24px;
margin-top: 20px;
padding: 15px;
background: rgba(255, 204, 0, 0.2);
border-radius: 10px;
}
@media (max-width: 768px) {
.podium { flex-direction: column; align-items: center; height: auto; }
.podium-place { width: 80%; height: 80px !important; }
.controls { flex-direction: column; }
button { width: 100%; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>选手计分板</h1>
<p>记录选手排名、得分和总分</p>
</header>
<div class="controls">
<button id="randomScore">随机得分</button>
<button id="resetScores">重置计分</button>
<button id="sortRank">按排名排序</button>
</div>
<div class="podium">
<div class="podium-place first">
<div>🥇 第一名</div>
<div class="podium-name">选手1</div>
<div class="podium-score">85分</div>
</div>
<div class="podium-place second">
<div>🥈 第二名</div>
<div class="podium-name">选手3</div>
<div class="podium-score">78分</div>
</div>
<div class="podium-place third">
<div>🥉 第三名</div>
<div class="podium-name">选手5</div>
<div class="podium-score">70分</div>
</div>
</div>
<div class="total-display">
当前最高分：<span id="maxScore">85</span>分 | 平均分：<span id="avgScore">68.88</span>分
</div>
<table>
<thead>
<tr>
<th>排名</th>
<th>选手编号</th>
<th>技能测试</th>
<th>综合展示</th>
<th>总分</th>
</tr>
</thead>
<tbody id="scoreTable">
<!-- 表格内容将由JavaScript生成 -->
</tbody>
</table>
</div>
<script>
// 选手数据
const players = [
{ id: 1, name: "选手1", skillScore: 85, displayScore: 0, total: 85 },
{ id: 2, name: "选手2", skillScore: 70, displayScore: 0, total: 70 },
{ id: 3, name: "选手3", skillScore: 78, displayScore: 0, total: 78 },
{ id: 4, name: "选手4", skillScore: 65, displayScore: 0, total: 65 },
{ id: 5, name: "选手5", skillScore: 75, displayScore: 0, total: 75 },
{ id: 6, name: "选手6", skillScore: 60, displayScore: 0, total: 60 },
{ id: 7, name: "选手7", skillScore: 68, displayScore: 0, total: 68 },
{ id: 8, name: "选手8", skillScore: 72, displayScore: 0, total: 72 }
];
// 渲染计分表格
function renderScoreTable() {
const tableBody = document.getElementById('scoreTable');
tableBody.innerHTML = '';
// 计算排名（按总分排序）
const sortedPlayers = [...players].sort((a, b) => b.total - a.total);
// 更新领奖台
document.querySelector('.first .podium-name').textContent = sortedPlayers[0].name;
document.querySelector('.first .podium-score').textContent = sortedPlayers[0].total + '分';
document.querySelector('.second .podium-name').textContent = sortedPlayers[1].name;
document.querySelector('.second .podium-score').textContent = sortedPlayers[1].total + '分';
document.querySelector('.third .podium-name').textContent = sortedPlayers[2].name;
document.querySelector('.third .podium-score').textContent = sortedPlayers[2].total + '分';
// 计算最高分和平均分
const maxScore = Math.max(...players.map(p => p.total));
const avgScore = (players.reduce((sum, player) => sum + player.total, 0) / players.length).toFixed(2);
document.getElementById('maxScore').textContent = maxScore;
document.getElementById('avgScore').textContent = avgScore;
// 渲染表格
sortedPlayers.forEach((player, index) => {
const row = document.createElement('tr');
// 添加奖牌标识
let rankDisplay = (index + 1).toString();
if (index === 0) rankDisplay = '<span class="medal gold">🥇</span>' + (index + 1);
else if (index === 1) rankDisplay = '<span class="medal silver">🥈</span>' + (index + 1);
else if (index === 2) rankDisplay = '<span class="medal bronze">🥉</span>' + (index + 1);
row.innerHTML = `
<td>${rankDisplay}</td>
<td>${player.name}</td>
<td>${player.skillScore}</td>
<td>${player.displayScore}</td>
<td><strong>${player.total}</strong></td>
`;
tableBody.appendChild(row);
});
}
// 随机生成得分
document.getElementById('randomScore').addEventListener('click', function() {
players.forEach(player => {
player.skillScore = Math.floor(Math.random() * 50) + 50;
player.displayScore = Math.floor(Math.random() * 10);
player.total = player.skillScore + player.displayScore;
});
renderScoreTable();
});
// 重置计分
document.getElementById('resetScores').addEventListener('click', function() {
players.forEach(player => {
player.skillScore = player.id * 10;
player.displayScore = 0;
player.total = player.skillScore;
});
renderScoreTable();
});
// 按排名排序（已默认按排名排序）
document.getElementById('sortRank').addEventListener('click', renderScoreTable);
// 初始渲染
renderScoreTable();
</script>
</body>
</html>
```
## 功能说明
这个计分板具有以下功能：
1. **选手信息展示**：
- 显示8名选手的排名、编号、技能测试分、综合展示分和总分
- 前三名选手在领奖台区域突出显示
2. **计分规则**：
- 总分计算公式：`总分 = 技能测试分 + 综合展示分`
- 排名根据总分从高到低排序
3. **互动功能**：
- 随机得分：为所有选手随机生成技能测试和综合展示得分
- 重置计分：恢复初始分数设置
- 按排名排序：刷新显示当前排名
4. **数据统计**：
- 显示当前最高分和平均分
5. **响应式设计**：
- 适配桌面和移动设备屏幕
此HTML文件可以直接保存并在浏览器中运行，无需任何外部依赖。计分板采用了体育赛事风格的视觉设计，具有动态更新的领奖台区域，使排名变化更加直观。
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
