跑步配速计算器：输入目标成绩，每公里该跑多快自动算好

跑步定目标最烦的就是「每公里到底该跑多少」。这个工具直接倒推：输入 10 公里目标 50 分钟，它就把每公里要跑 5 分 00 秒、每 5 公里分段目标和等效英里配速一次列清楚；反过来输入配速，也能推算出多少时间完赛。先看成品，再讲怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「目标成绩 → 每公里配速」这套心算压成一个打开即算的页面：

• 比赛距离预设：5 公里、10 公里、半程马拉松、全程马拉松，也可以自己填任意公里数。
• 目标完赛时间：按小时 / 分钟 / 秒分别输入，一次算出平均配速。
• 每公里配速：主结果大字显示「5:00 / km」这类可读格式。
• 每 5 公里分段：自动生成分段配速和累计时间表，跑比赛时照着卡点。
• 等效英里配速：顺带把公制配速换算成英里配速，看海外训练计划不绕弯。
• 反向推完赛时间：输入配速和距离，反过来算完赛成绩。
• 深浅主题切换：白色 / 深色随时换，手机电脑都适配。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「跑步配速计算器」单文件网页应用：输入比赛距离（5 公里、10 公里、半程马拉松、全程马拉松，或自定义公里数）和目标完赛时间，自动算出每公里配速、每 5 公里分段目标时间以及等效英里配速；也支持反向输入配速推算完赛时间。提供深浅色主题切换，结果大字清晰展示，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这次项目里的实际动作：

• 在沙箱里定位到真实工作目录后创建 /workspace/pace-calculator，把计算逻辑和 UI 写进单文件 index.html，没有引入任何第三方库。
• 探测到 3000 端口空闲，用 http.server 起服务并 curl 自检通过后，给出内部预览地址。
• 输出里顺带把完赛时间、分段配速、英里配速三类结果都做成「大字 + 表格」的排版，方便手机扫一眼。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 秒数转配速，60 秒自动进位

配速说到底都是「每单位距离的时间」。secToPace 把秒拆成分钟和秒，遇到 59.9 秒四舍五入成 60 时自动进位到下一分钟：

function secToPace(sec){
    if (!isFinite(sec) || sec < 0) return "—";
    var m = Math.floor(sec / 60);
    var s = Math.round(sec - m * 60);
    if (s === 60) { m += 1; s = 0; }
    return m + ":" + pad2(s);
}

2. 三种时间格式各干各的活

配速用 MM:SS，完赛总时间用 H:MM:SS，分段表中的段耗时用 MM:SS 但允许超过 60 分钟。代码分了三个函数处理，避免一个函数塞满判断：

function secToHMS(sec){
    if (!isFinite(sec) || sec < 0) return "—";
    var h = Math.floor(sec / 3600);
    var m = Math.floor((sec - h * 3600) / 60);
    var s = Math.round(sec - h * 3600 - m * 60);
    if (s === 60) { m += 1; s = 0; }
    if (m === 60) { h += 1; m = 0; }
    return h + ":" + pad2(m) + ":" + pad2(s);
}

3. 每 5 公里一段生成分段表

renderSplits 按 5 公里切片生成表格行，最后不足 5 公里的剩余距离单独成段，并把最后一行的累计时间标成「final」样式：

function renderSplits(km, pace){
    var body = $("splitsBody");
    body.innerHTML = "";
    var segLen = 5;
    var fullSegs = Math.floor(km / segLen);
    var remainder = km - fullSegs * segLen;
    var cumKm = 0, cumSec = 0;
    var totalSegs = fullSegs + (remainder > 0.0001 ? 1 : 0);
    // ... 逐行生成「第 N 段」+ 段距离 + 段耗时 + 累计时间
}

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-pace-calculator

总结

跑步配速计算器把「目标成绩 → 每公里配速」的倒推链路压到一个页面：秒数统一转换成时间，secToPace/secToHMS 各管一种格式并处理 60 秒进位，renderSplits 按 5 公里切片生成分段表，还支持反向用配速推完赛时间。整个过程没有第三方依赖，纯前端跑通。后续可以再接比赛日倒计时、配速区间建议，或把数据导出成训练计划图片。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz