结合sd用html制作记录自己运动的网页

这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。

为了创建一个可以记录和显示自己运动的网页，你可以使用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>

这个简单的网页包括一个运动记录表单和一个运动数据表格。当用户填写表单并提交时，数据将被捕获并显示在表格中。实际应用中，你可能需要将运动数据发送到服务器端保存，并从服务器获取已有的运动数据显示在页面上。这个示例只是在前端显示数据，并没有涉及到服务器端的代码。

结合sd用html制作记录自己运动的网页

评论已关闭

推荐阅读