使用 jQuery 和 JSON 数据动态计算并显示总距离-html教程-PHP中文网

使用 jQuery 和 JSON 数据动态计算并显示总距离

碧海醫心

发布： 2025-10-29 12:09:25

原创

131人浏览过

使用 jquery 和 json 数据动态计算并显示总距离

本文档将指导你如何使用 jQuery 从 JSON 文件中提取数据，并动态计算总距离，最终将结果显示在网页的表格中。我们将通过循环遍历 JSON 数据，累加距离值，并将总距离更新到指定的 HTML 元素中，提供代码示例和详细步骤，帮助你理解和应用该技术。

从 JSON 文件中提取数据并计算总距离

本教程将演示如何使用 jQuery 从 JSON 文件中提取数据，并计算表格中显示的五个活动距离的总和。

1. HTML 结构

首先，确保你的 HTML 结构包含用于显示数据的表格，并且包含用于显示总距离的元素，例如 span 或 div。以下是一个基本的 HTML 结构示例：

<div class="strava-widget">
  <table class="strava-stats">
    <tr>
      <td class="heading" colspan="1">Date</td>
      <td class="heading" colspan="1">Type</td>
      <td class="heading" colspan="1">Title</td>
      <td class="heading" colspan="1">Distance</td>
      <td class="heading" colspan="1">Height Gain</td>
      <td class="heading" colspan="1">Moving Time</td>
      <td class="heading" colspan="1">Time/Km</td>
    </tr>
    <tr>
      <td><div id="start_date_local_1"></div></td>
      <td><div id="activity1type"></div></td>
      <td><div id="activity1name"></div></td>
      <td><div><span id="activity1distance"></span> Km</div></td>
      <td><div><span id="elevation1"></span>m</div></td>
      <td><div id="moving_time_1"></div></td>
      <td><div id="time_km_1"></div></td>
    </tr>
    <!-- 其他活动行 -->
    <tr>
      <td><div>5-day totals</div></td>
      <td><div>-</div></td>
      <td><div>-</div></td>
      <td><div><span id="activitytotaldistance"></span>Km</div></td>
      <td><div><span id="totalelevation"></span>m</div></td>
      <td><div>-</div></td>
      <td><div>-</div></td>
    </tr>
  </table>
</div>

登录后复制

注意 activitytotaldistance 这个 span 元素，我们将在这里显示计算得到的总距离。

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

2. JavaScript 代码

接下来，我们将使用 jQuery 来获取 JSON 数据，循环遍历数据，并将距离值累加起来。

function toTime(seconds) {
  var date = new Date(null);
  date.setSeconds(seconds);
  return date.toISOString().substr(11, 8);
}

$(function() {
  $.get('/running/strava_activities.json', function(data) {
    console.log(data);

    let aggregate = 0; // 初始化总距离

    for (let i = 0; i < 5; i++) {
      $("#start_date_local_" + (i + 1)).html((data[i].start_date_local).slice(0, 10));
      $("#activity" + (i + 1) + "type").html(data[i].type);
      $("#activity" + (i + 1) + "name").html(data[i].name);
      $("#activity" + (i + 1) + "distance").html(((data[i].distance) / 1000).toFixed(3));
      $("#elevation" + (i + 1)).html(data[i].total_elevation_gain);
      $("#moving_time_" + (i + 1)).html(toTime(data[i].moving_time));

      if (data[i].distance > 0) {
        $("#time_km_" + (i + 1)).html(toTime(((data[i].moving_time) / ((data[i].distance) / 1000))).slice(3));
      }

      aggregate += Number(data[i].distance); // 累加距离
    }

    // 将总距离显示在页面上
    $("#activitytotaldistance").html((aggregate / 1000).toFixed(3));
  });
});

登录后复制

代码解释：

$.get('/running/strava_activities.json', function(data) { ... });: 使用 jQuery 的 $.get() 方法异步请求 JSON 文件。
let aggregate = 0;: 初始化一个变量 aggregate 用于存储总距离。
for (let i = 0; i < 5; i++) { ... }: 循环遍历 JSON 数据的前五个元素。
$("#activity" + (i + 1) + "distance").html(((data[i].distance) / 1000).toFixed(3));: 从 JSON 数据中提取距离值，将其转换为公里，并保留三位小数，然后将其显示在对应的 HTML 元素中。
aggregate += Number(data[i].distance);: 将当前活动的距离累加到 aggregate 变量中。注意使用 Number() 函数将距离值转换为数字类型。
$("#activitytotaldistance").html((aggregate / 1000).toFixed(3));: 循环结束后，将计算得到的总距离（转换为公里并保留三位小数）显示在 activitytotaldistance 元素中。

3. 注意事项

确保你的 JSON 文件路径 /running/strava_activities.json 是正确的，并且该文件包含有效的 JSON 数据。
JSON 数据中的距离值应该以米为单位，代码中会将其转换为公里。
在累加距离值时，务必使用 Number() 函数将字符串转换为数字，否则可能会导致字符串拼接而不是数值相加。
可以根据实际需求调整循环次数和数据显示格式。

4. 完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>Strava Activities</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .strava-stats {
      width: 100%;
      border-collapse: collapse;
    }
    .strava-stats td, .strava-stats th {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    .strava-stats th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

<div class="strava-widget">
  <table class="strava-stats">
    <tr></tr>
    <tr>
      <td class="heading" colspan="1">Date</td>
      <td class="heading" colspan="1">Type</td>
      <td class="heading" colspan="1">Title</td>
      <td class="heading" colspan="1">Distance</td>
      <td class="heading" colspan="1">Height Gain</td>
      <td class="heading" colspan="1">Moving Time</td>
      <td class="heading" colspan="1">Time/Km</td>
    </tr>
    <tr>
      <td><div id="start_date_local_1"></div></td>
      <td><div id="activity1type"></div></td>
      <td><div id="activity1name"></div></td>
      <td><div><span id="activity1distance"></span> Km</div></td>
      <td><div><span id="elevation1"></span>m</div></td>
      <td><div id="moving_time_1"></div></td>
      <td><div id="time_km_1"></div></td>
    </tr>
    <tr>
      <td><div id="start_date_local_2"></div></td>
      <td><div id="activity2type"></div></td>
      <td><div id="activity2name"></div></td>
      <td><div><span id="activity2distance"></span> Km</div></td>
      <td><div><span id="elevation2"></span>m</div></td>
      <td><div id="moving_time_2"></div></td>
      <td><div id="time_km_2"></div></td>
    </tr>
    <tr>
      <td><div id="start_date_local_3"></div></td>
      <td><div id="activity3type"></div></td>
      <td><div id="activity3name"></div></td>
      <td><div><span id="activity3distance"></span> Km</div></td>
      <td><div><span id="elevation3"></span>m</div></td>
      <td><div id="moving_time_3"></div></td>
      <td><div id="time_km_3"></div></td>
    </tr>
    <tr>
      <td><div id="start_date_local_4"></div></td>
      <td><div id="activity4type"></div></td>
      <td><div id="activity4name"></div></td>
      <td><div><span id="activity4distance"></span> Km</div></td>
      <td><div><span id="elevation4"></span>m</div></td>
      <td><div id="moving_time_4"></div></td>
      <td><div id="time_km_4"></div></td>
    </tr>
    <tr>
      <td><div id="start_date_local_5"></div></td>
      <td><div id="activity5type"></div></td>
      <td><div id="activity5name"></div></td>
      <td><div><span id="activity5distance"></span> Km</div></td>
      <td><div><span id="elevation5"></span>m</div></td>
      <td><div id="moving_time_5"></div></td>
      <td><div id="time_km_5"></div></td>
    </tr>
    <tr>
      <td><div>5-day totals</div></td>
      <td><div>-</div></td>
      <td><div>-</div></td>
      <td><div><span id="activitytotaldistance"></span>Km</div></td>
      <td><div><span id="totalelevation"></span>m</div></td>
      <td><div>-</div></td>
      <td><div>-</div></td>
    </tr>
  </table>
</div>

<script>
function toTime(seconds) {
  var date = new Date(null);
  date.setSeconds(seconds);
  return date.toISOString().substr(11, 8);
}

$(function() {
  $.get('/running/strava_activities.json', function(data) {
    console.log(data);

    let aggregate = 0;

    for (let i = 0; i < 5; i++) {
      $("#start_date_local_" + (i + 1)).html((data[i].start_date_local).slice(0, 10));
      $("#activity" + (i + 1) + "type").html(data[i].type);
      $("#activity" + (i + 1) + "name").html(data[i].name);
      $("#activity" + (i + 1) + "distance").html(((data[i].distance) / 1000).toFixed(3));
      $("#elevation" + (i + 1)).html(data[i].total_elevation_gain);
      $("#moving_time_" + (i + 1)).html(toTime(data[i].moving_time));

      if (data[i].distance > 0) {
        $("#time_km_" + (i + 1)).html(toTime(((data[i].moving_time) / ((data[i].distance) / 1000))).slice(3));
      }

      aggregate += Number(data[i].distance);
    }

    $("#activitytotaldistance").html((aggregate / 1000).toFixed(3));
  });
});
</script>

</body>
</html>

登录后复制