在實際的訓練場景里很多人記錄了每次臥推、深蹲用了多少重量、做了多少次卻很難說清自己的訓練到底有沒有進步。只看杠鈴片重量并不等于訓練強度因為 60kg 做 5 次和 40kg 做 15 次對力量的評估完全不同。gym weight progress calculator這個項目要解決的就是這類問題它根據(jù)輸入的動作、重量、次數(shù)和組數(shù)自動計算杠鈴配重組合估算出對應(yīng)的 1RM并且把歷史記錄用折線圖展示出來讓漸進超負荷的變化趨勢變得可見。這篇文章會帶你從零實現(xiàn)一個可運行的健身重量進度計算器。最終可以得到一個瀏覽器中直接使用的單頁工具能完成三類關(guān)鍵任務(wù)一是把目標總重量拆成杠鈴兩側(cè)的配重片組合二是用經(jīng)驗公式估算 1RM三是把每次訓練記錄持久化到本地并按日期繪制趨勢圖。適合正在學習前端工程化、想做一個小而完整的實戰(zhàn)項目或者希望給自己訓練加一個數(shù)據(jù)工具的開發(fā)者閱讀。1. 先理解一個健身計算器真正要算的是什么不少初學開發(fā)者拿到這個題目第一反應(yīng)是“做一個加減乘除表單”。但實際動手后會發(fā)現(xiàn)真正的難點不在界面而在三個需要想清楚的業(yè)務(wù)規(guī)則杠鈴配重如何拆片、1RM 如何估算、歷史記錄如何組織。這三個規(guī)則對應(yīng)著工具的核心價值也是本文實現(xiàn)的主線。1.1 核心問題一怎么把目標重量拆成杠鈴片組合真實健身房里杠鈴片通常有 1.25kg、2.5kg、5kg、10kg、15kg、20kg、25kg 等規(guī)格。訓練者說“今天深蹲 60kg 做 5 次”但走到杠鈴前他需要知道左右兩邊各放多少片。計算邏輯并不復雜總重量 空桿重量 2 × 單邊配重總重量例如標準空桿為 20kg目標 60kg 時單邊需要承擔 20kg。如果健身房有 20kg 片單邊放一片即可如果只有 15kg 和 5kg則單邊是 15 5如果只有 10kg那就單邊兩片 10kg。實際項目中還會遇到“目標重量無法被現(xiàn)有片規(guī)格整除”的情況比如想用 62kg但最小片是 2.5kg單邊 21kg 無法湊齊。這時工具需要明確提示用戶調(diào)整目標重量。這本質(zhì)上是一個“用有限面值組合出目標數(shù)值”的問題。最直接的做法是貪心算法從最大規(guī)格的片開始能放多少放多少剩余重量繼續(xù)用次大規(guī)格片匹配。貪心在這里不一定總得到最少數(shù)量的解但足夠貼近真實場景因為杠鈴片規(guī)格本身具備倍數(shù)關(guān)系實際項目可以直接使用并保持可讀性。1.2 核心問題二1RM 是什么以及為什么要估算1RMOne Repetition Maximum指一個動作能完成一次的最大重量。但普通人不會在日常訓練中反復做單次極限測試因為風險高、對神經(jīng)系統(tǒng)消耗大。所以健身領(lǐng)域普遍使用“次最大重量推測最大重量”的經(jīng)驗公式用“某個重量能完成多少次”來反推 1RM。常見公式有兩個Brzycki 公式1RM 重量 × 36 ÷ (37 - 次數(shù))Epley 公式1RM 重量 × (1 次數(shù) ÷ 30)Brzycki 在 1 到 10 次的區(qū)間內(nèi)比較常用對高次數(shù)訓練的誤差會增大。Epley 對偏高次數(shù)的適應(yīng)性和穩(wěn)定性要好一些但它在 1 次時等于輸入重量2 次時是 1.0667 倍增長速度比 Brzycki 更溫和。實際項目不應(yīng)只保留一個公式而應(yīng)在界面上允許用戶切換并且在結(jié)果旁邊標注使用的是哪個公式。這樣用戶查看自己歷史記錄時不會被“為什么今天和上周的 1RM 估算方法不同”迷惑。1.3 核心問題三記錄不只是一行數(shù)據(jù)要能形成趨勢只記錄“2025-01-15 深蹲 60kg 5 次”沒有太大意義因為單次數(shù)據(jù)無法回答“我是否在變強”。工具需要把多次記錄串成一條曲線讓用戶看到重量和估算 1RM 的走向。這也是為什么數(shù)據(jù)結(jié)構(gòu)里必須有日期、動作名稱、重量、次數(shù)、組數(shù)和派生出來的 1RM 字段。漸進超負荷的核心是“在相同動作上讓訓練強度或容量隨時間逐步提升”。所以可視化時至少應(yīng)該按動作分別展示兩條趨勢原始重量的變化以及估算 1RM 的變化。后者比前者更能排除“這次做了 3 次上次做了 5 次”這種次數(shù)變化帶來的干擾。2. 技術(shù)選型與項目結(jié)構(gòu)要先想清楚否則越寫越亂這個項目涉及計算、持久化、圖表繪制和頁面交互。選擇技術(shù)棧時不一定要引入重型框架關(guān)鍵是讓每個職責邊界清晰。下面的方案使用原生 JavaScript ES Module、localStorage 和 Canvas 繪圖不依賴構(gòu)建工具也能在本地靜態(tài)服務(wù)器上直接運行。2.1 為什么用原生 JavaScript 而不是 React 或 Vue對于這種規(guī)模的工具原生 JavaScript 完全足夠。核心計算是純函數(shù)不依賴 DOM頁面只有表單、配重結(jié)果區(qū)、記錄列表和折線圖四個區(qū)域狀態(tài)量不多。引入框架反而會增加依賴安裝和構(gòu)建成本。這里有一個更重要的工程依據(jù)把計算邏輯寫成純函數(shù)后無論將來遷移到 Vue、React 還是小程序都可以復用。實際開發(fā)中最怕的不是功能復雜而是業(yè)務(wù)邏輯和頁面渲染耦合在一起。用原生 JavaScript 先把計算模塊、存儲模塊、圖表模塊分離出來本身就是一個很好的架構(gòu)訓練。2.2 目錄結(jié)構(gòu)與文件職責推薦按下面這種方式組織文件gym-progress-calculator/ ├── index.html ├── styles.css ├── src/ │ ├── main.js │ ├── calculations.js │ ├── storage.js │ └── chart.js └── test/ └── calculations.test.mjs每個文件只做一件事文件職責index.html頁面結(jié)構(gòu)、表單、展示區(qū)域styles.css布局和基礎(chǔ)樣式src/calculations.js配重計算、1RM 估算等純函數(shù)src/storage.jslocalStorage 讀寫、數(shù)據(jù)遷移兜底src/chart.jsCanvas 折線圖繪制src/main.js事件綁定、組裝模塊、渲染邏輯test/calculations.test.mjs計算函數(shù)的 Node 斷言測試2.3 數(shù)據(jù)結(jié)構(gòu)與 localStorage 存儲設(shè)計localStorage 只能保存字符串所以需要把記錄數(shù)組序列化成 JSON。記錄對象的結(jié)構(gòu)設(shè)計如下{ 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)正常 } ] }存儲 key 建議固定為gym-progress-records-v1。帶上版本號的原因很簡單將來如果字段結(jié)構(gòu)變化比如增加 RPE 或單位字段舊數(shù)據(jù)仍然可以識別并做遷移而不是直接解析失敗。日期字段統(tǒng)一使用YYYY-MM-DD格式理由有兩個。第一它是 ISO 8601 的子集字符串排序結(jié)果等價于日期排序第二在圖表繪制時可以直接按字符串排序不需要額外解析時間戳。需要注意表單輸入框建議直接使用input typedate避免用戶在不同瀏覽器里輸入不同格式。3. 實現(xiàn)核心計算模塊先讓數(shù)字正確計算模塊是整個工具的地基。配重組合算錯后面的 1RM 和圖表都沒有意義。所以這一章先實現(xiàn)兩個核心純函數(shù)并配套測試。3.1 杠鈴配重計算貪心算法實現(xià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: 目標重量必須是大于 0 的數(shù)字 }; } const perSide (targetWeight - barWeight) / 2; if (perSide 0) { return { ok: false, reason: 目標重量不能小于空桿重量 ${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請調(diào)整目標重量到最小片步進 }; } const perSideTotal selected.reduce((sum, w) sum w, 0); return { ok: true, perSide: selected, perSideTotal: roundTo2(perSideTotal), total: roundTo2(barWeight 2 * perSideTotal) }; }這段代碼有幾個關(guān)鍵細節(jié)第一先計算每邊需要多少重量。(targetWeight - barWeight) / 2這一步容易漏掉除以 2結(jié)果會導致配對片數(shù)量翻倍。第二從大到小遍歷配重片。Math.floor(remaining / option.weight)計算整片數(shù)量Math.min限制不能超過配置中可用的片數(shù)。默認每種片有 4 片足夠覆蓋常見重量。第三為什么要roundTo2。JavaScript 的浮點數(shù)在計算 2.5 的倍數(shù)時會因為二進制表示產(chǎn)生類似0.004999999的誤差。不收斂的話最后判斷remaining 0.001會誤判為無法組合。這里的 0.001 是容忍閾值因為所有重量精度最多到 0.01kg。第四返回結(jié)構(gòu)同時包含perSide和total。前者用于界面展示“左側(cè)20 2.5右側(cè)20 2.5”后者用于讓用戶確認輸入的目標重量確實被組裝出來了。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當 reps 等于 37 時分母為 0超過 37 時會變成負數(shù)計算出的 1RM 數(shù)值沒有意義。所以在函數(shù)入口直接限制 reps 最大為 35可以避免界面上出現(xiàn) Infinity 或負值。Epley 公式?jīng)]有分母風險但超過 30 次以后它對 1RM 的推演已經(jīng)高度失真所以統(tǒng)一限制在 1 到 35 次區(qū)間。實際肌肉耐力訓練很少需要使用超過 30 次的組次。如果用戶確實需要記錄高次數(shù)耐力訓練也應(yīng)該在 UI 上提示公式誤差范圍而不是默默輸出一個看似精確的數(shù)。3.3 編寫 Node 自測腳本驗證計算正確性在 test 目錄下創(chuàng)建一個不依賴測試框架的腳本// 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}); } } // 配重測試 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, 小于空桿重量時應(yīng)返回失敗); const r4 calcPlates(73.3); assertEqual(r4.ok, false, 73.3kg 無法用 1.25 步進精確組合); // 1RM 測試 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} 項失敗 ${failed} 項); if (failed 0) process.exit(1);運行命令node test/calculations.test.mjs預(yù)期輸出通過 11 項失敗 0 項這里要注意estimateOneRepMax(60, 5)用 Brzycki 計算是60 * 36 / 32 67.5用 Epley 計算是60 * 1.1667 70。兩者差異不小恰好說明為什么界面必須標注公式來源。測試腳本的價值在于以后如果有人修改公式或配重邏輯可以立刻發(fā)現(xiàn)數(shù)值回歸。4. 完成頁面交互與記錄持久化計算模塊就緒后接下來做 HTML 表單、存儲模塊和主邏輯組裝。這一章會給出一個可運行的完整頁面骨架。4.1 表單設(shè)計與數(shù)據(jù)校驗!-- index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title健身重量進度計算器/title link relstylesheet hrefstyles.css / /head body main classcontainer h1健身重量進度計算器/h1 section classrecord-form h2添加訓練記錄/h2 form idtraining-form div classform-row label formovement動作名稱/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計算并保存/button /form /section section classresult-area h2當前結(jié)果/h2 div idplate-result/div div idone-rm-result/div /section section classchart-area h21RM 趨勢/h2 canvas idprogress-chart width800 height300/canvas /section section classrecord-list h2歷史記錄/h2 button idexport-btn typebutton導出 JSON/button ul idrecord-list/ul /section /main script typemodule srcsrc/main.js/script /body /html表單里有兩個容易被忽視的設(shè)計。第一重量輸入框step0.5允許半公斤輸入但實際配重最小步進可能受杠鈴片限制。表單層放寬輸入范圍計算層負責校驗這種“入口寬松、核心嚴格”的思路適合工具類項目。如果用戶在輸入框里限制得太死比如必須輸入 2.5 的倍數(shù)會阻止用戶先輸入一個計劃重量再查看誤差提示體驗反而差。第二公式選擇使用下拉框而不是同時顯示兩個數(shù)值。這樣設(shè)計是為了讓界面保持簡潔。如果用戶想看兩種公式的對比可以在當前結(jié)果區(qū)之外再加一個展開面板。真實訓練記錄里一旦用戶選好公式后續(xù)應(yīng)該保持一致否則 1RM 趨勢會因公式切換產(chǎn)生不必要的波動。4.2 存儲模塊帶版本保護和異常兜底// 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) ); }這段代碼把持久化細節(jié)封裝在 storage.js 中頁面主邏輯不需要關(guān)心 key 名稱和 JSON 結(jié)構(gòu)。try/catch是必須的因為 localStorage 在不同場景下可能拋異常例如 Safari 隱私模式或存儲空間已滿。加載失敗時返回空數(shù)組而不是讓整個頁面崩潰。id 的生成方式雖然簡單但在單機場景足夠唯一。如果后續(xù)要同步到后端需要替換成服務(wù)端生成的 UUID。4.3 主邏輯提交表單、計算、保存、渲染// 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 估算失敗請檢查重量和次數(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(請?zhí)顚憚幼鳌⑷掌凇⒅亓亢痛螖?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)。繪制圖表時希望時間從左到右遞增所以主流程里先按日期升序排序再把排序后的 records 傳給圖表模塊。列表和圖表使用不同的排序方向是合理的但代碼里要寫清楚避免復制粘貼時弄反。4.4 表單重置和日期默認值form.reset()會把表單恢復成 HTML 中的默認值。這一步結(jié)束后日期輸入框會清空對用戶不夠友好。建議在頁面加載時把日期設(shè)置為今天document.getElementById(date).value new Date().toISOString().slice(0, 10);需要注意時區(qū)問題。toISOString()返回的是 UTC 時間在 UTC8 時區(qū)下如果本地時間是凌晨日期可能會比本地日期早一天。對工具類項目可以接受但如果要嚴格按本地日期可以手動拼接function getTodayString() { const now new Date(); const offset now.getTimezoneOffset() * 60000; return new Date(now.getTime() - offset).toISOString().slice(0, 10); }5. 用 Canvas 繪制 1RM 趨勢圖圖表是這個工具最有說服力的部分。它能直接回答“我的訓練重量是否在上升”這個問題。這里選擇 Canvas 而不是 SVG 或第三方圖表庫是為了減少依賴同時也可以展示原生繪圖的基本思路。5.1 圖表繪制的基本思路折線圖的本質(zhì)是“數(shù)據(jù)點坐標映射”。真實數(shù)據(jù)有日期和 1RM 兩個維度畫布上每個點需要換算成 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(至少需要兩條記錄才能繪制趨勢圖, 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; // 繪制坐標軸 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ù)點 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 不是直接用原始最大值和最小值而是各擴展 10%。這樣折線不會貼到畫布邊緣視覺上更舒服。如果所有記錄的 1RM 都是 60kgminValue 會是 54maxValue 是 66圖表仍然可以展示一個水平的線。5.2 區(qū)分動作名稱過濾上面代碼把所有記錄畫在一個圖里。如果用戶同時記錄深蹲、臥推、硬拉會導致三條不同量級的數(shù)據(jù)混在一起趨勢圖失去意義。一個簡單的改進是在 main.js 中獲取當前選中的動作名稱按名稱過濾圖表數(shù)據(jù)。// 可以結(jié)合一個動作篩選下拉框 const selectedMovement document.getElementById(movement-filter).value; const filtered selectedMovement ? records.filter((r) r.movement selectedMovement) : records; drawProgressChart(chartCanvas, filtered);實際產(chǎn)品里動作篩選通常做成下拉框選項來自歷史記錄中出現(xiàn)的動作名稱。這樣用戶每切換一個動作看到的都是獨立的重量變化曲線。5.3 Canvas 在高 DPI 屏幕下的清晰度問題默認 Canvas 在高分屏上會顯得模糊因為 Canvas 的 CSS 尺寸和實際像素尺寸不一致。簡單處理方式是讀取設(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 }; }注意這個函數(shù)會修改 canvas 的真實尺寸繪制邏輯里應(yīng)該使用返回的 CSS 邏輯尺寸而不是canvas.width。這一個細節(jié)在移動端很常見不做處理時圖表邊緣會明顯發(fā)虛。6. 運行驗證與常見問題排查代碼寫完后需要驗證的不只是“頁面能不能打開”還要驗證計算是否正確、數(shù)據(jù)是否持久化、圖表是否按預(yù)期渲染。這一章給出具體的驗證步驟和常見問題排查路徑。6.1 本地運行方式因為使用了 ES Module不能直接雙擊 index.html 打開必須通過 HTTP 服務(wù)訪問。推薦使用 Node 自帶的靜態(tài)服務(wù)或 VS Code 的 Live Server。最簡單的做法npx serve .或者用 Pythonpython3 -m http.server 8000瀏覽器訪問http://localhost:8000打開控制臺確認沒有報錯然后輸入一次 60kg、5 次、Brzycki 公式預(yù)期看到配重方案單邊 201RM 約 67.5kg。6.2 手工驗證用例推薦用下面幾個用例核對計算邏輯目標重量預(yù)期單邊配重說明20kg空桿不配重目標等于空桿重量40kg10kg 一片單邊 10kg60kg20kg 一片單邊 20kg62.5kg20kg 1.25kg單邊 21.25kg65kg20kg 2.5kg單邊 22.5kg100kg25kg 15kg優(yōu)先大規(guī)格單邊 40kg驗證時注意貪心算法會選擇“盡量用大規(guī)格片”的組合。因此 100kg 會輸出25 15而不是20 10 10。從減少裝卸片次數(shù)的角度看這是更貼近實際的選擇。6.3 檢查 localStorage 中的數(shù)據(jù)打開瀏覽器 DevTools進入 Application 面板在 Local Storage 下找到當前域名查看gym-progress-records-v1的值。預(yù)期是包含 records 數(shù)組的 JSON 字符串。如果看不到數(shù)據(jù)說明 saveRecords 執(zhí)行失敗或者頁面運行在隱私模式下。6.4 針對常見現(xiàn)象按這條鏈路排查現(xiàn)象可能原因檢查方式處理建議1RM 顯示 NaN次數(shù)超出公式范圍或輸入非法在 DevTools 中檢查 weight、reps 是否為有效數(shù)字表單已限制 1 到 35代碼里再加一次兜底校驗配重提示“無法組合”目標重量不是最小片步進的倍數(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)同一動作被畫成多序列沒有按動作過濾檢查圖表數(shù)據(jù)源是否過濾了 movement增加動作篩選下拉框6.5 數(shù)據(jù)導入導出的價值localStorage 本質(zhì)上是瀏覽器域下的本地存儲用戶清除瀏覽器數(shù)據(jù)、換電腦、換瀏覽器都會丟失記錄。這也解釋了為什么工具需要提供 JSON 導出按鈕。更進一步可以做一個導入按鈕讓用戶把導出的 JSON 文件再次讀回來。注意導入時需要校驗 JSON 結(jié)構(gòu)而不是直接records parsed.records。7. 生產(chǎn)環(huán)境擴展方向與工程實踐建議這個工具如果只在本地跑localStorage 已經(jīng)夠用。但如果想做成一個長期使用的訓練數(shù)據(jù)工具或者發(fā)布給其他健身者使用還需要在工程上補齊幾個關(guān)鍵能力。能力本地工具狀態(tài)生產(chǎn)環(huán)境建議數(shù)據(jù)存儲localStorage后端數(shù)據(jù)庫 賬號體系或至少接入 IndexedDB 支持更大數(shù)據(jù)量數(shù)據(jù)同步無多設(shè)備同步、沖突處理策略單位制式只有 kg增加 kg / lb 切換存儲時統(tǒng)一為 kg 或保留單位字段多用戶無認證、權(quán)限、個人數(shù)據(jù)隔離錯誤監(jiān)控console日志上報、異常監(jiān)控、版本灰度數(shù)據(jù)遷移固定 key 帶版本設(shè)計 migration 函數(shù)按 version 逐級升級離線支持依賴靜態(tài)服務(wù)器增加 Service Worker做成 PWA7.1 從 localStorage 遷移到后端時的數(shù)據(jù)模型如果要把記錄同步到服務(wù)器數(shù)據(jù)結(jié)構(gòu)不宜直接沿用當前版本。建議服務(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ù)庫表設(shè)計時最好把動作、記錄分成兩張表。動作表保存動作名稱和用戶 ID記錄表保存日期、重量、次數(shù)、組數(shù)和關(guān)聯(lián)動作 ID。一個動作對應(yīng)多條訓練記錄這是典型的一對多關(guān)系。查詢某個動作的趨勢時使用WHERE movement_id ? ORDER BY date ASC。7.2 加入 RPE 反饋1RM 公式只依賴重量和次數(shù)但訓練者當天狀態(tài)差異很大。比如同樣 60kg 做 5 次狀態(tài)好時感覺留有余力狀態(tài)差時接近力竭兩者的真實 1RM 可能不同。更精細的做法是讓用戶填寫 RPE自覺疲勞程度通常 1 到 10 或 6 到 10 范圍內(nèi)。有了 RPE可以用 e1RMestimated One Rep Max公式計算e1RM 重量 × (1 (0.0333 × 實際重復次數(shù))) × (10 - RPE 對應(yīng)的次數(shù)換算)實際生產(chǎn)中RPE 的引入會讓數(shù)據(jù)模型更復雜但對長期跟蹤力量變化有顯著幫助。推薦作為第二期功能。7.3 給初學者最好的三個練習建議第一把計算模塊用其他語言重寫。比如用 Python 實現(xiàn)同樣的calcPlates和estimateOneRepMax體會浮點精度在不同語言中的差異。第二給圖表模塊增加“動作篩選下拉框”并測試三個不同動作的曲線是否正確分離。第三自己實現(xiàn)一個輕量 JSON 導入功能格式不限重點是理解“解析外部數(shù)據(jù)時必須做結(jié)構(gòu)校驗”這個原則。如果只記住一個工程判斷就是計算邏輯和頁面渲染分離。純函數(shù)放在獨立模塊里用命令能測試用瀏覽器能復用將來無論 UI 怎么換核心邏輯都能穩(wěn)如磐石。