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

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

花韻仙語

发布： 2025-11-01 12:14:22

原创

347人浏览过

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

本文介绍了如何使用 jQuery 从 JSON 文件中提取数据，并动态计算并显示总距离。通过循环遍历 JSON 数据，累加每日的活动距离，最终将总距离更新到 HTML 页面上，从而实现数据的动态展示。

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

以下步骤详细说明了如何使用 jQuery 从 JSON 文件中提取 activity1distance 到 activity5distance 的值，并将它们相加得到 activitytotaldistance，最后将结果显示在 HTML 表格中。

1. 修改 jQuery 代码

首先，需要修改现有的 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 totalDistance = 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));
      }

      // 累加距离，注意将字符串转换为数字
      totalDistance += Number(data[i].distance);
    }

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

登录后复制

这段代码的核心改进在于：

Find JSON Path Online

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

查看详情

使用 for 循环遍历 JSON 数据中的前五个活动。
在循环内部，累加每个活动的距离到 totalDistance 变量中。
将累加的总距离更新到 activitytotaldistance 元素的 HTML 内容中。
确保将从 JSON 中读取的距离值转换为数字，以便正确计算总和。

2. HTML 结构

确保 HTML 中存在用于显示总距离的元素，即 id 为 activitytotaldistance 的元素。

<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>

登录后复制

3. 注意事项

数据类型转换： 确保从 JSON 文件中读取的距离值被正确地转换为数字类型，再进行加法运算。可以使用 Number() 函数进行转换。
错误处理： 考虑添加错误处理机制，例如在 JSON 文件加载失败时给出提示，或者在距离值为 null 或 undefined 时进行处理。
JSON 数据结构： 确保 JSON 数据的结构与代码中的假设一致，即 data 是一个包含多个活动对象的数组，每个活动对象都有 distance 属性。

4. 完整代码示例

以下是包含 HTML 和 JavaScript 的完整示例：

<!DOCTYPE html>
<html>
<head>
  <title>Strava Activities</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <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 totalDistance = 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));
          }

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

        $("#activitytotaldistance").html((totalDistance / 1000).toFixed(3));
      });
    });
  </script>
</head>
<body>
  <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 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>
</body>
</html>

登录后复制