在實(shí)際的訓(xùn)練場(chǎng)景里很多人記錄了每次臥推、深蹲用了多少重量、做了多少次卻很難說清自己的訓(xùn)練到底有沒有進(jìn)步。只看杠鈴片重量并不等于訓(xùn)練強(qiáng)度因?yàn)?60kg 做 5 次和 40kg 做 15 次對(duì)力量的評(píng)估完全不同。gym weight progress calculator這個(gè)項(xiàng)目要解決的就是這類問題它根據(jù)輸入的動(dòng)作、重量、次數(shù)和組數(shù)自動(dòng)計(jì)算杠鈴配重組合估算出對(duì)應(yīng)的 1RM并且把歷史記錄用折線圖展示出來讓漸進(jìn)超負(fù)荷的變化趨勢(shì)變得可見。這篇文章會(huì)帶你從零實(shí)現(xiàn)一個(gè)可運(yùn)行的健身重量進(jìn)度計(jì)算器。最終可以得到一個(gè)瀏覽器中直接使用的單頁(yè)工具能完成三類關(guān)鍵任務(wù)一是把目標(biāo)總重量拆成杠鈴兩側(cè)的配重片組合二是用經(jīng)驗(yàn)公式估算 1RM三是把每次訓(xùn)練記錄持久化到本地并按日期繪制趨勢(shì)圖。適合正在學(xué)習(xí)前端工程化、想做一個(gè)小而完整的實(shí)戰(zhàn)項(xiàng)目或者希望給自己訓(xùn)練加一個(gè)數(shù)據(jù)工具的開發(fā)者閱讀。1. 先理解一個(gè)健身計(jì)算器真正要算的是什么不少初學(xué)開發(fā)者拿到這個(gè)題目第一反應(yīng)是“做一個(gè)加減乘除表單”。但實(shí)際動(dòng)手后會(huì)發(fā)現(xiàn)真正的難點(diǎn)不在界面而在三個(gè)需要想清楚的業(yè)務(wù)規(guī)則杠鈴配重如何拆片、1RM 如何估算、歷史記錄如何組織。這三個(gè)規(guī)則對(duì)應(yīng)著工具的核心價(jià)值也是本文實(shí)現(xiàn)的主線。1.1 核心問題一怎么把目標(biāo)重量拆成杠鈴片組合真實(shí)健身房里杠鈴片通常有 1.25kg、2.5kg、5kg、10kg、15kg、20kg、25kg 等規(guī)格。訓(xùn)練者說“今天深蹲 60kg 做 5 次”但走到杠鈴前他需要知道左右兩邊各放多少片。計(jì)算邏輯并不復(fù)雜總重量 空桿重量 2 × 單邊配重總重量例如標(biāo)準(zhǔn)空桿為 20kg目標(biāo) 60kg 時(shí)單邊需要承擔(dān) 20kg。如果健身房有 20kg 片單邊放一片即可如果只有 15kg 和 5kg則單邊是 15 5如果只有 10kg那就單邊兩片 10kg。實(shí)際項(xiàng)目中還會(huì)遇到“目標(biāo)重量無法被現(xiàn)有片規(guī)格整除”的情況比如想用 62kg但最小片是 2.5kg單邊 21kg 無法湊齊。這時(shí)工具需要明確提示用戶調(diào)整目標(biāo)重量。這本質(zhì)上是一個(gè)“用有限面值組合出目標(biāo)數(shù)值”的問題。最直接的做法是貪心算法從最大規(guī)格的片開始能放多少放多少剩余重量繼續(xù)用次大規(guī)格片匹配。貪心在這里不一定總得到最少數(shù)量的解但足夠貼近真實(shí)場(chǎng)景因?yàn)楦茆徠?guī)格本身具備倍數(shù)關(guān)系實(shí)際項(xiàng)目可以直接使用并保持可讀性。1.2 核心問題二1RM 是什么以及為什么要估算1RMOne Repetition Maximum指一個(gè)動(dòng)作能完成一次的最大重量。但普通人不會(huì)在日常訓(xùn)練中反復(fù)做單次極限測(cè)試因?yàn)轱L(fēng)險(xiǎn)高、對(duì)神經(jīng)系統(tǒng)消耗大。所以健身領(lǐng)域普遍使用“次最大重量推測(cè)最大重量”的經(jīng)驗(yàn)公式用“某個(gè)重量能完成多少次”來反推 1RM。常見公式有兩個(gè)Brzycki 公式1RM 重量 × 36 ÷ (37 - 次數(shù))Epley 公式1RM 重量 × (1 次數(shù) ÷ 30)Brzycki 在 1 到 10 次的區(qū)間內(nèi)比較常用對(duì)高次數(shù)訓(xùn)練的誤差會(huì)增大。Epley 對(duì)偏高次數(shù)的適應(yīng)性和穩(wěn)定性要好一些但它在 1 次時(shí)等于輸入重量2 次時(shí)是 1.0667 倍增長(zhǎng)速度比 Brzycki 更溫和。實(shí)際項(xiàng)目不應(yīng)只保留一個(gè)公式而應(yīng)在界面上允許用戶切換并且在結(jié)果旁邊標(biāo)注使用的是哪個(gè)公式。這樣用戶查看自己歷史記錄時(shí)不會(huì)被“為什么今天和上周的 1RM 估算方法不同”迷惑。1.3 核心問題三記錄不只是一行數(shù)據(jù)要能形成趨勢(shì)只記錄“2025-01-15 深蹲 60kg 5 次”沒有太大意義因?yàn)閱未螖?shù)據(jù)無法回答“我是否在變強(qiáng)”。工具需要把多次記錄串成一條曲線讓用戶看到重量和估算 1RM 的走向。這也是為什么數(shù)據(jù)結(jié)構(gòu)里必須有日期、動(dòng)作名稱、重量、次數(shù)、組數(shù)和派生出來的 1RM 字段。漸進(jìn)超負(fù)荷的核心是“在相同動(dòng)作上讓訓(xùn)練強(qiáng)度或容量隨時(shí)間逐步提升”。所以可視化時(shí)至少應(yīng)該按動(dòng)作分別展示兩條趨勢(shì)原始重量的變化以及估算 1RM 的變化。后者比前者更能排除“這次做了 3 次上次做了 5 次”這種次數(shù)變化帶來的干擾。2. 技術(shù)選型與項(xiàng)目結(jié)構(gòu)要先想清楚否則越寫越亂這個(gè)項(xiàng)目涉及計(jì)算、持久化、圖表繪制和頁(yè)面交互。選擇技術(shù)棧時(shí)不一定要引入重型框架關(guān)鍵是讓每個(gè)職責(zé)邊界清晰。下面的方案使用原生 JavaScript ES Module、localStorage 和 Canvas 繪圖不依賴構(gòu)建工具也能在本地靜態(tài)服務(wù)器上直接運(yùn)行。2.1 為什么用原生 JavaScript 而不是 React 或 Vue對(duì)于這種規(guī)模的工具原生 JavaScript 完全足夠。核心計(jì)算是純函數(shù)不依賴 DOM頁(yè)面只有表單、配重結(jié)果區(qū)、記錄列表和折線圖四個(gè)區(qū)域狀態(tài)量不多。引入框架反而會(huì)增加依賴安裝和構(gòu)建成本。這里有一個(gè)更重要的工程依據(jù)把計(jì)算邏輯寫成純函數(shù)后無論將來遷移到 Vue、React 還是小程序都可以復(fù)用。實(shí)際開發(fā)中最怕的不是功能復(fù)雜而是業(yè)務(wù)邏輯和頁(yè)面渲染耦合在一起。用原生 JavaScript 先把計(jì)算模塊、存儲(chǔ)模塊、圖表模塊分離出來本身就是一個(gè)很好的架構(gòu)訓(xùn)練。2.2 目錄結(jié)構(gòu)與文件職責(zé)推薦按下面這種方式組織文件gym-progress-calculator/ ├── index.html ├── styles.css ├── src/ │ ├── main.js │ ├── calculations.js │ ├── storage.js │ └── chart.js └── test/ └── calculations.test.mjs每個(gè)文件只做一件事文件職責(zé)index.html頁(yè)面結(jié)構(gòu)、表單、展示區(qū)域styles.css布局和基礎(chǔ)樣式src/calculations.js配重計(jì)算、1RM 估算等純函數(shù)src/storage.jslocalStorage 讀寫、數(shù)據(jù)遷移兜底src/chart.jsCanvas 折線圖繪制src/main.js事件綁定、組裝模塊、渲染邏輯test/calculations.test.mjs計(jì)算函數(shù)的 Node 斷言測(cè)試2.3 數(shù)據(jù)結(jié)構(gòu)與 localStorage 存儲(chǔ)設(shè)計(jì)localStorage 只能保存字符串所以需要把記錄數(shù)組序列化成 JSON。記錄對(duì)象的結(jié)構(gòu)設(shè)計(jì)如下{ version: 1, records: [ { id: 20250115-153000-abc, date: 2025-01-15, movement: Squat, weight: 60, reps: 5, sets: 3, oneRepMax: 67.5, note: 今天狀態(tài)正常 } ] }存儲(chǔ) key 建議固定為gym-progress-records-v1。帶上版本號(hào)的原因很簡(jiǎn)單將來如果字段結(jié)構(gòu)變化比如增加 RPE 或單位字段舊數(shù)據(jù)仍然可以識(shí)別并做遷移而不是直接解析失敗。日期字段統(tǒng)一使用YYYY-MM-DD格式理由有兩個(gè)。第一它是 ISO 8601 的子集字符串排序結(jié)果等價(jià)于日期排序第二在圖表繪制時(shí)可以直接按字符串排序不需要額外解析時(shí)間戳。需要注意表單輸入框建議直接使用input typedate避免用戶在不同瀏覽器里輸入不同格式。3. 實(shí)現(xiàn)核心計(jì)算模塊先讓數(shù)字正確計(jì)算模塊是整個(gè)工具的地基。配重組合算錯(cuò)后面的 1RM 和圖表都沒有意義。所以這一章先實(shí)現(xiàn)兩個(gè)核心純函數(shù)并配套測(cè)試。3.1 杠鈴配重計(jì)算貪心算法實(shí)現(xiàn)先定義默認(rèn)配置// src/calculations.js export const BAR_WEIGHT 20; export const PLATE_OPTIONS [ { weight: 25, count: 4 }, { weight: 20, count: 4 }, { weight: 15, count: 4 }, { weight: 10, count: 4 }, { weight: 5, count: 4 }, { weight: 2.5, count: 4 }, { weight: 1.25, count: 4 } ]; function roundTo2(value) { return Math.round((value Number.EPSILON) * 100) / 100; } export function calcPlates(targetWeight, barWeight BAR_WEIGHT, plateOptions PLATE_OPTIONS) { if (!Number.isFinite(targetWeight) || targetWeight 0) { return { ok: false, reason: 目標(biāo)重量必須是大于 0 的數(shù)字 }; } const perSide (targetWeight - barWeight) / 2; if (perSide 0) { return { ok: false, reason: 目標(biāo)重量不能小于空桿重量 ${barWeight}kg }; } let remaining perSide; const selected []; for (const option of plateOptions) { if (option.count 0) continue; const maxUse Math.min(Math.floor(remaining / option.weight), option.count); for (let i 0; i maxUse; i) { selected.push(option.weight); } remaining roundTo2(remaining - maxUse * option.weight); if (remaining 0.001) break; } if (remaining 0.001) { return { ok: false, reason: 無法用現(xiàn)有配重片精確組合剩余 ${remaining}kg請(qǐng)調(diào)整目標(biāo)重量到最小片步進(jìn) }; } const perSideTotal selected.reduce((sum, w) sum w, 0); return { ok: true, perSide: selected, perSideTotal: roundTo2(perSideTotal), total: roundTo2(barWeight 2 * perSideTotal) }; }這段代碼有幾個(gè)關(guān)鍵細(xì)節(jié)第一先計(jì)算每邊需要多少重量。(targetWeight - barWeight) / 2這一步容易漏掉除以 2結(jié)果會(huì)導(dǎo)致配對(duì)片數(shù)量翻倍。第二從大到小遍歷配重片。Math.floor(remaining / option.weight)計(jì)算整片數(shù)量Math.min限制不能超過配置中可用的片數(shù)。默認(rèn)每種片有 4 片足夠覆蓋常見重量。第三為什么要roundTo2。JavaScript 的浮點(diǎn)數(shù)在計(jì)算 2.5 的倍數(shù)時(shí)會(huì)因?yàn)槎M(jìn)制表示產(chǎn)生類似0.004999999的誤差。不收斂的話最后判斷remaining 0.001會(huì)誤判為無法組合。這里的 0.001 是容忍閾值因?yàn)樗兄亓烤茸疃嗟?0.01kg。第四返回結(jié)構(gòu)同時(shí)包含perSide和total。前者用于界面展示“左側(cè)20 2.5右側(cè)20 2.5”后者用于讓用戶確認(rèn)輸入的目標(biāo)重量確實(shí)被組裝出來了。3.2 1RM 估算公式選擇與邊界處理同樣放在 calculations.js 中export function estimateOneRepMax(weight, reps, formula brzycki) { if (!Number.isFinite(weight) || weight 0) { return null; } if (!Number.isInteger(reps) || reps 1 || reps 35) { return null; } if (formula epley) { return roundTo2(weight * (1 reps / 30)); } if (reps 37) { return null; } return roundTo2((weight * 36) / (37 - reps)); }這里的邊界處理很重要。Brzycki 公式的分母是37 - reps當(dāng) reps 等于 37 時(shí)分母為 0超過 37 時(shí)會(huì)變成負(fù)數(shù)計(jì)算出的 1RM 數(shù)值沒有意義。所以在函數(shù)入口直接限制 reps 最大為 35可以避免界面上出現(xiàn) Infinity 或負(fù)值。Epley 公式?jīng)]有分母風(fēng)險(xiǎn)但超過 30 次以后它對(duì) 1RM 的推演已經(jīng)高度失真所以統(tǒng)一限制在 1 到 35 次區(qū)間。實(shí)際肌肉耐力訓(xùn)練很少需要使用超過 30 次的組次。如果用戶確實(shí)需要記錄高次數(shù)耐力訓(xùn)練也應(yīng)該在 UI 上提示公式誤差范圍而不是默默輸出一個(gè)看似精確的數(shù)。3.3 編寫 Node 自測(cè)腳本驗(yàn)證計(jì)算正確性在 test 目錄下創(chuàng)建一個(gè)不依賴測(cè)試框架的腳本// test/calculations.test.mjs import { calcPlates, estimateOneRepMax, BAR_WEIGHT } from ../src/calculations.js; let passed 0; let failed 0; function assertEqual(actual, expected, message) { if (actual expected) { passed; } else { failed; console.error(FAIL: ${message}); console.error( expected: ${expected}); console.error( actual: ${actual}); } } function assertApprox(actual, expected, gap, message) { if (Math.abs(actual - expected) gap) { passed; } else { failed; console.error(FAIL: ${message}); console.error( expected ~${expected}, actual ${actual}); } } // 配重測(cè)試 const r1 calcPlates(60); assertEqual(r1.ok, true, 60kg 應(yīng)該可以配重); assertEqual(r1.total, 60, 60kg 配重總重量應(yīng)為 60kg); assertEqual(r1.perSide.includes(20), true, 單邊應(yīng)包含 20kg 片); const r2 calcPlates(62.5); assertEqual(r2.ok, true, 62.5kg 應(yīng)該可以配重); assertEqual(r2.total, 62.5, 62.5kg 配重總重量應(yīng)為 62.5kg); const r3 calcPlates(19); assertEqual(r3.ok, false, 小于空桿重量時(shí)應(yīng)返回失敗); const r4 calcPlates(73.3); assertEqual(r4.ok, false, 73.3kg 無法用 1.25 步進(jìn)精確組合); // 1RM 測(cè)試 assertApprox(estimateOneRepMax(60, 5), 67.5, 0.01, Brzycki: 60kg 5次約 67.5kg); assertApprox(estimateOneRepMax(60, 5, epley), 70, 0.01, Epley: 60kg 5次約 70kg); assertEqual(estimateOneRepMax(60, 0), null, 0 次應(yīng)返回 null); assertEqual(estimateOneRepMax(60, 40), null, 40 次應(yīng)返回 null); console.log(通過 ${passed} 項(xiàng)失敗 ${failed} 項(xiàng)); if (failed 0) process.exit(1);運(yùn)行命令node test/calculations.test.mjs預(yù)期輸出通過 11 項(xiàng)失敗 0 項(xiàng)這里要注意estimateOneRepMax(60, 5)用 Brzycki 計(jì)算是60 * 36 / 32 67.5用 Epley 計(jì)算是60 * 1.1667 70。兩者差異不小恰好說明為什么界面必須標(biāo)注公式來源。測(cè)試腳本的價(jià)值在于以后如果有人修改公式或配重邏輯可以立刻發(fā)現(xiàn)數(shù)值回歸。4. 完成頁(yè)面交互與記錄持久化計(jì)算模塊就緒后接下來做 HTML 表單、存儲(chǔ)模塊和主邏輯組裝。這一章會(huì)給出一個(gè)可運(yùn)行的完整頁(yè)面骨架。4.1 表單設(shè)計(jì)與數(shù)據(jù)校驗(yàn)!-- index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title健身重量進(jìn)度計(jì)算器/title link relstylesheet hrefstyles.css / /head body main classcontainer h1健身重量進(jìn)度計(jì)算器/h1 section classrecord-form h2添加訓(xùn)練記錄/h2 form idtraining-form div classform-row label formovement動(dòng)作名稱/label input typetext idmovement namemovement required placeholder例如 Squat / /div div classform-row label fordate日期/label input typedate iddate namedate required / /div div classform-row label forweight總重量kg/label input typenumber idweight nameweight required min1 step0.5 placeholder60 / /div div classform-row label forreps次數(shù)/label input typenumber idreps namereps required min1 max35 step1 placeholder5 / /div div classform-row label forsets組數(shù)/label input typenumber idsets namesets required min1 max20 step1 value3 / /div div classform-row label forformula1RM 估算公式/label select idformula nameformula option valuebrzyckiBrzycki/option option valueepleyEpley/option /select /div div classform-row label fornote備注可選/label input typetext idnote namenote placeholder狀態(tài)、輔助重量等 / /div button typesubmit計(jì)算并保存/button /form /section section classresult-area h2當(dāng)前結(jié)果/h2 div idplate-result/div div idone-rm-result/div /section section classchart-area h21RM 趨勢(shì)/h2 canvas idprogress-chart width800 height300/canvas /section section classrecord-list h2歷史記錄/h2 button idexport-btn typebutton導(dǎo)出 JSON/button ul idrecord-list/ul /section /main script typemodule srcsrc/main.js/script /body /html表單里有兩個(gè)容易被忽視的設(shè)計(jì)。第一重量輸入框step0.5允許半公斤輸入但實(shí)際配重最小步進(jìn)可能受杠鈴片限制。表單層放寬輸入范圍計(jì)算層負(fù)責(zé)校驗(yàn)這種“入口寬松、核心嚴(yán)格”的思路適合工具類項(xiàng)目。如果用戶在輸入框里限制得太死比如必須輸入 2.5 的倍數(shù)會(huì)阻止用戶先輸入一個(gè)計(jì)劃重量再查看誤差提示體驗(yàn)反而差。第二公式選擇使用下拉框而不是同時(shí)顯示兩個(gè)數(shù)值。這樣設(shè)計(jì)是為了讓界面保持簡(jiǎn)潔。如果用戶想看兩種公式的對(duì)比可以在當(dāng)前結(jié)果區(qū)之外再加一個(gè)展開面板。真實(shí)訓(xùn)練記錄里一旦用戶選好公式后續(xù)應(yīng)該保持一致否則 1RM 趨勢(shì)會(huì)因公式切換產(chǎn)生不必要的波動(dòng)。4.2 存儲(chǔ)模塊帶版本保護(hù)和異常兜底// src/storage.js const STORAGE_KEY gym-progress-records-v1; export function loadRecords() { try { const raw localStorage.getItem(STORAGE_KEY); if (!raw) return []; const parsed JSON.parse(raw); if (!parsed || !Array.isArray(parsed.records)) { return []; } return parsed.records.filter(validateRecord); } catch (error) { console.error(加載本地記錄失敗:, error); return []; } } export function saveRecords(records) { try { const payload JSON.stringify({ version: 1, records }); localStorage.setItem(STORAGE_KEY, payload); return true; } catch (error) { console.error(保存本地記錄失敗:, error); return false; } } export function buildRecord({ date, movement, weight, reps, sets, oneRepMax, note }) { return { id: ${date}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}, date, movement: movement.trim(), weight: Number(weight), reps: Number(reps), sets: Number(sets), oneRepMax: Number(oneRepMax), note: note ? note.trim() : }; } function validateRecord(record) { return ( record typeof record.date string typeof record.movement string Number.isFinite(record.weight) Number.isFinite(record.reps) Number.isFinite(record.oneRepMax) ); }這段代碼把持久化細(xì)節(jié)封裝在 storage.js 中頁(yè)面主邏輯不需要關(guān)心 key 名稱和 JSON 結(jié)構(gòu)。try/catch是必須的因?yàn)?localStorage 在不同場(chǎng)景下可能拋異常例如 Safari 隱私模式或存儲(chǔ)空間已滿。加載失敗時(shí)返回空數(shù)組而不是讓整個(gè)頁(yè)面崩潰。id 的生成方式雖然簡(jiǎn)單但在單機(jī)場(chǎng)景足夠唯一。如果后續(xù)要同步到后端需要替換成服務(wù)端生成的 UUID。4.3 主邏輯提交表單、計(jì)算、保存、渲染// src/main.js import { calcPlates, estimateOneRepMax } from ./calculations.js; import { loadRecords, saveRecords, buildRecord } from ./storage.js; import { drawProgressChart } from ./chart.js; const form document.getElementById(training-form); const plateResult document.getElementById(plate-result); const oneRmResult document.getElementById(one-rm-result); const recordList document.getElementById(record-list); const exportBtn document.getElementById(export-btn); const chartCanvas document.getElementById(progress-chart); let records loadRecords(); function formatDate(dateStr) { return dateStr; } function renderRecords() { if (records.length 0) { recordList.innerHTML li暫無記錄/li; return; } recordList.innerHTML ; const sorted [...records].sort((a, b) b.date.localeCompare(a.date)); for (const record of sorted) { const li document.createElement(li); li.innerHTML [ strong${formatDate(record.date)}/strong, ${record.movement}, ${record.weight}kg × ${record.reps} 次 × ${record.sets} 組, 1RM≈${record.oneRepMax}kg ].join( · ); recordList.appendChild(li); } } function renderCurrentResult(formData) { const { movement, weight, reps } formData; const plate calcPlates(weight); if (plate.ok) { plateResult.textContent 配重方案單邊 ${plate.perSide.join( )}總重量 ${plate.total}kg; } else { plateResult.textContent 配重提示${plate.reason}; } const oneRepMax estimateOneRepMax(weight, reps, formData.formula); if (oneRepMax) { oneRmResult.textContent ${movement} 的估算 1RM 為 ${oneRepMax}kg${formData.formula} 公式; } else { oneRmResult.textContent 1RM 估算失敗請(qǐng)檢查重量和次數(shù)范圍; } } form.addEventListener(submit, (event) { event.preventDefault(); const formData new FormData(form); const movement formData.get(movement).trim(); const date formData.get(date); const weight Number(formData.get(weight)); const reps Number(formData.get(reps)); const sets Number(formData.get(sets)); const formula formData.get(formula); const note formData.get(note); if (!movement || !date || !Number.isFinite(weight) || !Number.isFinite(reps)) { alert(請(qǐng)?zhí)顚憚?dòng)作、日期、重量和次數(shù)); return; } const oneRepMax estimateOneRepMax(weight, reps, formula); renderCurrentResult({ movement, weight, reps, formula }); if (!oneRepMax) { return; } const record buildRecord({ date, movement, weight, reps, sets, oneRepMax, note }); records.push(record); saveRecords(records); renderRecords(); drawProgressChart(chartCanvas, records); form.reset(); }); exportBtn.addEventListener(click, () { const blob new Blob([JSON.stringify({ version: 1, records }, null, 2)], { type: application/json }); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download gym-progress-backup.json; a.click(); URL.revokeObjectURL(url); }); records.sort((a, b) a.date.localeCompare(b.date)); renderRecords(); drawProgressChart(chartCanvas, records);注意這里的排序方向差異。歷史列表希望最新記錄在最上面所以使用b.date.localeCompare(a.date)。繪制圖表時(shí)希望時(shí)間從左到右遞增所以主流程里先按日期升序排序再把排序后的 records 傳給圖表模塊。列表和圖表使用不同的排序方向是合理的但代碼里要寫清楚避免復(fù)制粘貼時(shí)弄反。4.4 表單重置和日期默認(rèn)值form.reset()會(huì)把表單恢復(fù)成 HTML 中的默認(rèn)值。這一步結(jié)束后日期輸入框會(huì)清空對(duì)用戶不夠友好。建議在頁(yè)面加載時(shí)把日期設(shè)置為今天document.getElementById(date).value new Date().toISOString().slice(0, 10);需要注意時(shí)區(qū)問題。toISOString()返回的是 UTC 時(shí)間在 UTC8 時(shí)區(qū)下如果本地時(shí)間是凌晨日期可能會(huì)比本地日期早一天。對(duì)工具類項(xiàng)目可以接受但如果要嚴(yán)格按本地日期可以手動(dòng)拼接function getTodayString() { const now new Date(); const offset now.getTimezoneOffset() * 60000; return new Date(now.getTime() - offset).toISOString().slice(0, 10); }5. 用 Canvas 繪制 1RM 趨勢(shì)圖圖表是這個(gè)工具最有說服力的部分。它能直接回答“我的訓(xùn)練重量是否在上升”這個(gè)問題。這里選擇 Canvas 而不是 SVG 或第三方圖表庫(kù)是為了減少依賴同時(shí)也可以展示原生繪圖的基本思路。5.1 圖表繪制的基本思路折線圖的本質(zhì)是“數(shù)據(jù)點(diǎn)坐標(biāo)映射”。真實(shí)數(shù)據(jù)有日期和 1RM 兩個(gè)維度畫布上每個(gè)點(diǎn)需要換算成 x 和 y// src/chart.js export function drawProgressChart(canvas, records) { const ctx canvas.getContext(2d); const width canvas.width; const height canvas.height; const padding { top: 20, right: 20, bottom: 40, left: 50 }; ctx.clearRect(0, 0, width, height); const sorted [...records].sort((a, b) a.date.localeCompare(b.date)); if (sorted.length 0) { ctx.fillStyle #666; ctx.fillText(暫無數(shù)據(jù), width / 2 - 20, height / 2); return; } if (sorted.length 1) { ctx.fillStyle #666; ctx.fillText(至少需要兩條記錄才能繪制趨勢(shì)圖, width / 2 - 100, height / 2); return; } const values sorted.map((r) r.oneRepMax); const minValue Math.floor(Math.min(...values) * 0.9); const maxValue Math.ceil(Math.max(...values) * 1.1); const plotWidth width - padding.left - padding.right; const plotHeight height - padding.top - padding.bottom; const xStep plotWidth / (sorted.length - 1); const getX (index) padding.left index * xStep; const getY (value) padding.top ((maxValue - value) / (maxValue - minValue)) * plotHeight; // 繪制坐標(biāo)軸 ctx.strokeStyle #ccc; ctx.lineWidth 1; ctx.beginPath(); ctx.moveTo(padding.left, padding.top); ctx.lineTo(padding.left, height - padding.bottom); ctx.lineTo(width - padding.right, height - padding.bottom); ctx.stroke(); // 繪制網(wǎng)格線和 Y 軸刻度 ctx.fillStyle #666; ctx.font 12px sans-serif; const yTicks 4; for (let i 0; i yTicks; i) { const ratio i / yTicks; const tickValue maxValue - ratio * (maxValue - minValue); const y padding.top ratio * plotHeight; ctx.beginPath(); ctx.moveTo(padding.left - 4, y); ctx.lineTo(padding.left, y); ctx.stroke(); ctx.fillText(Math.round(tickValue), 10, y 4); } // 繪制折線 ctx.strokeStyle #2d7dd2; ctx.lineWidth 2; ctx.beginPath(); sorted.forEach((record, index) { const x getX(index); const y getY(record.oneRepMax); if (index 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } }); ctx.stroke(); // 繪制數(shù)據(jù)點(diǎn) ctx.fillStyle #2d7dd2; sorted.forEach((record, index) { const x getX(index); const y getY(record.oneRepMax); ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI * 2); ctx.fill(); }); }圖表中的 min 和 max 不是直接用原始最大值和最小值而是各擴(kuò)展 10%。這樣折線不會(huì)貼到畫布邊緣視覺上更舒服。如果所有記錄的 1RM 都是 60kgminValue 會(huì)是 54maxValue 是 66圖表仍然可以展示一個(gè)水平的線。5.2 區(qū)分動(dòng)作名稱過濾上面代碼把所有記錄畫在一個(gè)圖里。如果用戶同時(shí)記錄深蹲、臥推、硬拉會(huì)導(dǎo)致三條不同量級(jí)的數(shù)據(jù)混在一起趨勢(shì)圖失去意義。一個(gè)簡(jiǎn)單的改進(jìn)是在 main.js 中獲取當(dāng)前選中的動(dòng)作名稱按名稱過濾圖表數(shù)據(jù)。// 可以結(jié)合一個(gè)動(dòng)作篩選下拉框 const selectedMovement document.getElementById(movement-filter).value; const filtered selectedMovement ? records.filter((r) r.movement selectedMovement) : records; drawProgressChart(chartCanvas, filtered);實(shí)際產(chǎn)品里動(dòng)作篩選通常做成下拉框選項(xiàng)來自歷史記錄中出現(xiàn)的動(dòng)作名稱。這樣用戶每切換一個(gè)動(dòng)作看到的都是獨(dú)立的重量變化曲線。5.3 Canvas 在高 DPI 屏幕下的清晰度問題默認(rèn) Canvas 在高分屏上會(huì)顯得模糊因?yàn)?Canvas 的 CSS 尺寸和實(shí)際像素尺寸不一致。簡(jiǎn)單處理方式是讀取設(shè)備像素比然后縮放畫布function setupCanvas(canvas) { const dpr window.devicePixelRatio || 1; const rect canvas.getBoundingClientRect(); const width rect.width; const height rect.height; canvas.width width * dpr; canvas.height height * dpr; const ctx canvas.getContext(2d); ctx.scale(dpr, dpr); return { width, height }; }注意這個(gè)函數(shù)會(huì)修改 canvas 的真實(shí)尺寸繪制邏輯里應(yīng)該使用返回的 CSS 邏輯尺寸而不是canvas.width。這一個(gè)細(xì)節(jié)在移動(dòng)端很常見不做處理時(shí)圖表邊緣會(huì)明顯發(fā)虛。6. 運(yùn)行驗(yàn)證與常見問題排查代碼寫完后需要驗(yàn)證的不只是“頁(yè)面能不能打開”還要驗(yàn)證計(jì)算是否正確、數(shù)據(jù)是否持久化、圖表是否按預(yù)期渲染。這一章給出具體的驗(yàn)證步驟和常見問題排查路徑。6.1 本地運(yùn)行方式因?yàn)槭褂昧?ES Module不能直接雙擊 index.html 打開必須通過 HTTP 服務(wù)訪問。推薦使用 Node 自帶的靜態(tài)服務(wù)或 VS Code 的 Live Server。最簡(jiǎn)單的做法npx serve .或者用 Pythonpython3 -m http.server 8000瀏覽器訪問http://localhost:8000打開控制臺(tái)確認(rèn)沒有報(bào)錯(cuò)然后輸入一次 60kg、5 次、Brzycki 公式預(yù)期看到配重方案單邊 201RM 約 67.5kg。6.2 手工驗(yàn)證用例推薦用下面幾個(gè)用例核對(duì)計(jì)算邏輯目標(biāo)重量預(yù)期單邊配重說明20kg空桿不配重目標(biāo)等于空桿重量40kg10kg 一片單邊 10kg60kg20kg 一片單邊 20kg62.5kg20kg 1.25kg單邊 21.25kg65kg20kg 2.5kg單邊 22.5kg100kg25kg 15kg優(yōu)先大規(guī)格單邊 40kg驗(yàn)證時(shí)注意貪心算法會(huì)選擇“盡量用大規(guī)格片”的組合。因此 100kg 會(huì)輸出25 15而不是20 10 10。從減少裝卸片次數(shù)的角度看這是更貼近實(shí)際的選擇。6.3 檢查 localStorage 中的數(shù)據(jù)打開瀏覽器 DevTools進(jìn)入 Application 面板在 Local Storage 下找到當(dāng)前域名查看gym-progress-records-v1的值。預(yù)期是包含 records 數(shù)組的 JSON 字符串。如果看不到數(shù)據(jù)說明 saveRecords 執(zhí)行失敗或者頁(yè)面運(yùn)行在隱私模式下。6.4 針對(duì)常見現(xiàn)象按這條鏈路排查現(xiàn)象可能原因檢查方式處理建議1RM 顯示 NaN次數(shù)超出公式范圍或輸入非法在 DevTools 中檢查 weight、reps 是否為有效數(shù)字表單已限制 1 到 35代碼里再加一次兜底校驗(yàn)配重提示“無法組合”目標(biāo)重量不是最小片步進(jìn)的倍數(shù)打印 remaining 值檢查 1.25kg 片是否被包含在配置中提示用戶調(diào)整到 2.5 的倍數(shù)刷新后記錄消失localStorage 未寫成功或讀取失敗Application 面板查看 key 是否存在檢查 saveRecords 的 try/catch排除隱私模式折線圖連線亂數(shù)據(jù)沒有按日期排序在 main.js 中打印 sorted 數(shù)組確保繪制前先按 date.localeCompare 升序排序高 DPI 下圖表模糊未處理 devicePixelRatio用 setupCanvas 縮放畫布使用邏輯尺寸繪制調(diào)用 ctx.scale(dpr, dpr)同一動(dòng)作被畫成多序列沒有按動(dòng)作過濾檢查圖表數(shù)據(jù)源是否過濾了 movement增加動(dòng)作篩選下拉框6.5 數(shù)據(jù)導(dǎo)入導(dǎo)出的價(jià)值localStorage 本質(zhì)上是瀏覽器域下的本地存儲(chǔ)用戶清除瀏覽器數(shù)據(jù)、換電腦、換瀏覽器都會(huì)丟失記錄。這也解釋了為什么工具需要提供 JSON 導(dǎo)出按鈕。更進(jìn)一步可以做一個(gè)導(dǎo)入按鈕讓用戶把導(dǎo)出的 JSON 文件再次讀回來。注意導(dǎo)入時(shí)需要校驗(yàn) JSON 結(jié)構(gòu)而不是直接records parsed.records。7. 生產(chǎn)環(huán)境擴(kuò)展方向與工程實(shí)踐建議這個(gè)工具如果只在本地跑localStorage 已經(jīng)夠用。但如果想做成一個(gè)長(zhǎng)期使用的訓(xùn)練數(shù)據(jù)工具或者發(fā)布給其他健身者使用還需要在工程上補(bǔ)齊幾個(gè)關(guān)鍵能力。能力本地工具狀態(tài)生產(chǎn)環(huán)境建議數(shù)據(jù)存儲(chǔ)localStorage后端數(shù)據(jù)庫(kù) 賬號(hào)體系或至少接入 IndexedDB 支持更大數(shù)據(jù)量數(shù)據(jù)同步無多設(shè)備同步、沖突處理策略單位制式只有 kg增加 kg / lb 切換存儲(chǔ)時(shí)統(tǒng)一為 kg 或保留單位字段多用戶無認(rèn)證、權(quán)限、個(gè)人數(shù)據(jù)隔離錯(cuò)誤監(jiān)控console日志上報(bào)、異常監(jiān)控、版本灰度數(shù)據(jù)遷移固定 key 帶版本設(shè)計(jì) migration 函數(shù)按 version 逐級(jí)升級(jí)離線支持依賴靜態(tài)服務(wù)器增加 Service Worker做成 PWA7.1 從 localStorage 遷移到后端時(shí)的數(shù)據(jù)模型如果要把記錄同步到服務(wù)器數(shù)據(jù)結(jié)構(gòu)不宜直接沿用當(dāng)前版本。建議服務(wù)端按用戶維度拆分{ userId: user-uuid, movement: Squat, records: [ { date: 2025-01-15, weightKg: 60, reps: 5, sets: 3, oneRmKg: 67.5, rpe: 8, note: } ] }數(shù)據(jù)庫(kù)表設(shè)計(jì)時(shí)最好把動(dòng)作、記錄分成兩張表。動(dòng)作表保存動(dòng)作名稱和用戶 ID記錄表保存日期、重量、次數(shù)、組數(shù)和關(guān)聯(lián)動(dòng)作 ID。一個(gè)動(dòng)作對(duì)應(yīng)多條訓(xùn)練記錄這是典型的一對(duì)多關(guān)系。查詢某個(gè)動(dòng)作的趨勢(shì)時(shí)使用WHERE movement_id ? ORDER BY date ASC。7.2 加入 RPE 反饋1RM 公式只依賴重量和次數(shù)但訓(xùn)練者當(dāng)天狀態(tài)差異很大。比如同樣 60kg 做 5 次狀態(tài)好時(shí)感覺留有余力狀態(tài)差時(shí)接近力竭兩者的真實(shí) 1RM 可能不同。更精細(xì)的做法是讓用戶填寫 RPE自覺疲勞程度通常 1 到 10 或 6 到 10 范圍內(nèi)。有了 RPE可以用 e1RMestimated One Rep Max公式計(jì)算e1RM 重量 × (1 (0.0333 × 實(shí)際重復(fù)次數(shù))) × (10 - RPE 對(duì)應(yīng)的次數(shù)換算)實(shí)際生產(chǎn)中RPE 的引入會(huì)讓數(shù)據(jù)模型更復(fù)雜但對(duì)長(zhǎng)期跟蹤力量變化有顯著幫助。推薦作為第二期功能。7.3 給初學(xué)者最好的三個(gè)練習(xí)建議第一把計(jì)算模塊用其他語(yǔ)言重寫。比如用 Python 實(shí)現(xiàn)同樣的calcPlates和estimateOneRepMax體會(huì)浮點(diǎn)精度在不同語(yǔ)言中的差異。第二給圖表模塊增加“動(dòng)作篩選下拉框”并測(cè)試三個(gè)不同動(dòng)作的曲線是否正確分離。第三自己實(shí)現(xiàn)一個(gè)輕量 JSON 導(dǎo)入功能格式不限重點(diǎn)是理解“解析外部數(shù)據(jù)時(shí)必須做結(jié)構(gòu)校驗(yàn)”這個(gè)原則。如果只記住一個(gè)工程判斷就是計(jì)算邏輯和頁(yè)面渲染分離。純函數(shù)放在獨(dú)立模塊里用命令能測(cè)試用瀏覽器能復(fù)用將來無論 UI 怎么換核心邏輯都能穩(wěn)如磐石。