用HTML 写一个有运动员信息,成绩登记,成绩查询,数据统计等功能的前端界面
时间: 2024-05-08 09:22:07 浏览: 7
好的,以下是一个简单的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Athlete Scoreboard</title>
</head>
<body>
<h1>Athlete Scoreboard</h1>
<form>
<label for="name">Athlete Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="event">Event:</label>
<select id="event" name="event">
<option value="100m">100m</option>
<option value="200m">200m</option>
<option value="400m">400m</option>
<option value="800m">800m</option>
<option value="1500m">1500m</option>
</select><br><br>
<label for="score">Score:</label>
<input type="number" id="score" name="score"><br><br>
<input type="button" value="Submit" onclick="addScore()"><br><br>
</form>
<h2>Athlete Scores</h2>
<table id="scoreboard">
<tr>
<th>Name</th>
<th>Event</th>
<th>Score</th>
</tr>
</table>
<br>
<label for="query">Athlete Name:</label>
<input type="text" id="query" name="query">
<input type="button" value="Search" onclick="searchScore()"><br><br>
<h2>Data Statistics</h2>
<p id="stats"></p>
<script>
// Array to store athlete scores
var scores = [];
// Function to add score to scoreboard
function addScore() {
var name = document.getElementById("name").value;
var event = document.getElementById("event").value;
var score = document.getElementById("score").value;
scores.push({name: name, event: event, score: score});
updateScoreboard();
updateStats();
}
// Function to update scoreboard table
function updateScoreboard() {
var table = document.getElementById("scoreboard");
var row, cell1, cell2, cell3;
// Remove existing rows
for (var i = table.rows.length - 1; i > 0; i--) {
table.deleteRow(i);
}
// Add new rows
for (var i = 0; i < scores.length; i++) {
row = table.insertRow(-1);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
cell1.innerHTML = scores[i].name;
cell2.innerHTML = scores[i].event;
cell3.innerHTML = scores[i].score;
}
}
// Function to search for athlete scores
function searchScore() {
var query = document.getElementById("query").value;
var result = "";
for (var i = 0; i < scores.length; i++) {
if (scores[i].name.toLowerCase() === query.toLowerCase()) {
result += scores[i].event + ": " + scores[i].score + "<br>";
}
}
document.getElementById("stats").innerHTML = result;
}
// Function to calculate data statistics
function updateStats() {
var events = ["100m", "200m", "400m", "800m", "1500m"];
var stats = {};
// Initialize stats object
for (var i = 0; i < events.length; i++) {
stats[events[i]] = {count: 0, sum: 0, avg: 0};
}
// Update stats object
for (var i = 0; i < scores.length; i++) {
stats[scores[i].event].count++;
stats[scores[i].event].sum += parseInt(scores[i].score);
stats[scores[i].event].avg = stats[scores[i].event].sum / stats[scores[i].event].count;
}
// Display stats object
var result = "";
for (var i = 0; i < events.length; i++) {
result += events[i] + ": " + stats[events[i]].avg.toFixed(2) + "<br>";
}
document.getElementById("stats").innerHTML = result;
}
</script>
</body>
</html>
```
这个示例代码实现了以下功能:
- 运动员信息的录入,包括姓名、项目和成绩。
- 成绩的展示,以表格的形式呈现。
- 成绩的查询,根据运动员姓名进行查询。
- 数据统计,包括各项目的平均成绩。