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