为了创建一个可以记录和显示自己运动的网页，你可以使用HTML和JavaScript来实现。以下是一个简单的示例，它包含了记录运动数据的表单和显示运动数据的表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运动记录</title>
</head>
<body>
<h1>运动记录</h1>
<form id="workout-form">
<label for="date">日期:</label>
<input type="date" id="date" name="date"><br><br>
<label for="time">时间 (HH:MM):</label>
<input type="time" id="time" name="time"><br><br>
<label for="distance">距离 (公里):</label>
<input type="number" id="distance" name="distance" min="0" step="0.01"><br><br>
<label for="calories">消耗的卡路里:</label>
<input type="number" id="calories" name="calories" min="0"><br><br>
<button type="submit">记录</button>
</form>
<table id="workouts-table">
<tr>
<th>日期</th>
<th>时间</th>
<th>距离</th>
<th>卡路里</th>
</tr>
<!-- 运动数据将被插入到这里 -->
</table>
<script>
const workoutForm = document.getElementById('workout-form');
const workoutsTable = document.getElementById('workouts-table');
workoutForm.addEventListener('submit', function(event) {
event.preventDefault();
const newWorkout = {
date: workoutForm.date.value,
time: workoutForm.time.value,
distance: workoutForm.distance.value,
calories: workoutForm.calories.value
};
// 在这里可以添加代码将newWorkout发送到服务器保存
// 现在我们只是在前端显示它
addWorkoutToTable(newWorkout);
// 清空表单字段
workoutForm.reset();
});
function addWorkoutToTable(workout) {
const newRow = workoutsTable.insertRow();
const dateCell = newRow.insertCell(0);
const timeCell = newRow.insertCell(1);
const distanceCell = newRow.insertCell(2);
const caloriesCell = newRow.insertCell(3);
dateCell.textContent = workout.date;
timeCell.textContent = workout.time;
distanceCell.textContent = workout.distance;
caloriesCell.textContent = workout.calories;
}
</script>
</body>
</html>这个简单的网页包括一个运动记录表单和一个运动数据表格。当用户填写表单并提交时，数据将被捕获并显示在表格中。实际应用中，你可能需要将运动数据发送到服务器端保存，并从服务器获取已有的运动数据显示在页面上。这个示例只是在前端显示数据，并没有涉及到服务器端的代码。