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

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

花韻仙語

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

原创

371人浏览过

使用 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));
  });
});

登录后复制

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

Rose.ai

一个云数据平台，帮助用户发现、可视化数据

查看详情

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

登录后复制