上次去健身房訓練我發現自己還在用手機備忘錄記錄臥推重量翻到上個月的記錄還要一條條往上滑更別提判斷“這個月到底進步了多少”了。真正讓我下決心做這個小工具是某天想確認“硬拉 100kg 做 5 次”和“硬拉 90kg 做 8 次”到底哪個強度更高結果在紙上算了半天。如果你也有類似經歷說明你缺的不是訓練熱情而是一個能自動計算重量進度、估算 1RM、記錄每次訓練的工具。這篇文章就是圍繞這個場景展開的。我會從需求分析、核心計算模型開始一步步用純前端技術實現一個健身房重量進度計算器包含訓練記錄、1RM 估算、相對強度分析、歷史數據持久化等功能。整個項目不需要后端服務瀏覽器打開就能用適合新手學習前端實戰也適合有健身習慣的開發者直接部署給自己用。項目雖然不大但涉及數據建模、計算公式選擇、本地存儲、列表渲染、統計聚合這些前端日常開發的核心環節讀完后你可以舉一反三改成自己的訓練日志、食譜記錄或者體重管理工具。需要提前說明的是本文示例采用純 HTML、CSS、JavaScript 實現不依賴任何框架和構建工具。關于訓練數據和計算公式我會給出通用的健身領域估算方式具體數值請結合你個人的訓練感受調整。1. 為什么要做健身重量進度計算器1.1 訓練記錄的真實痛點大多數健身愛好者在記錄訓練時通常會遇到三個問題。第一個問題是記錄分散。今天用備忘錄明天用 Excel后天可能直接不記長期積累的數據很難統一查看。第二個問題是數據沒有可比性。今天做“60kg × 10 次”上周做“70kg × 5 次”單純看重量和次數都無法判斷哪一次訓練負荷更大更無法判斷自己是否在進步。第三個問題是訓練計劃調整靠感覺。下次訓練該加多少重量5kg 還是 2.5kg如果沒有數據支持很容易練得比較隨意。這些問題本質上不是“記錄動作”的問題而是“記錄之后如何計算、如何對比、如何指導下一步訓練”的問題。重量進度計算器要解決的就是第二個和第三個問題。1.2 這個項目解決什么問題一個健身重量進度計算器核心能力可以概括為三點記錄每次訓練的基本數據動作名稱、使用重量、完成次數、訓練日期。根據重量和次數估算當次訓練的最大力量水平也就是常說的 1RMOne Repetition Maximum單次最大重量。展示歷史趨勢比如某個動作的歷史最高 1RM、最近一次訓練負荷、記錄總數讓用戶直觀看到訓練是否在進步。在此基礎上還可以擴展出相對強度分析也就是“當次訓練重量占你估算最大重量的百分比”方便判斷訓練是偏向力量、肌肥大還是耐力區間。1.3 為什么選擇純前端方案項目定位是個人工具不需要多人協作也不涉及復雜的后端邏輯因此純前端是最合適的方案。純前端有幾個明顯優點第一不需要搭建服務器雙擊 HTML 文件就能運行第二使用 localStorage 存儲數據瀏覽器關閉再打開數據依然存在足夠滿足個人記錄需求第三代碼結構簡單容易閱讀和修改方便你根據自己習慣調整功能。當然純前端也有邊界。localStorage 的存儲空間一般在 5MB 左右只適合存儲文本型記錄數據保存在當前瀏覽器中換瀏覽器或清理緩存會造成歷史記錄丟失。如果你的目標是做一個多端同步的完整產品那需要引入后端和服務端數據庫本文暫時不涉及。2. 核心概念1RM、訓練容量與相對強度2.1 什么是 1RM1RM 指某個動作你只能完成一次的最大重量。它被廣泛用于衡量訓練者的力量水平。但直接測試 1RM 風險較高尤其是臥推、深蹲、硬拉這類復合動作在無人保護的情況下嘗試極限重量有受傷風險所以實踐中更常用“次最大重量”配合公式來估算 1RM。比較常見的估算公式有兩個Epley 公式1RM W × (1 R / 30)Brzycki 公式1RM W × (36 / (37 - R))其中 W 是使用的重量R 是在該重量下完成的次數。Epley 公式實現簡單適合普通訓練者Brzycki 公式在次數較高時結果會保守一些。兩個公式都是經驗估算不代表真實極限但用于記錄趨勢變化已經足夠。還要說明的是當次數 R 較高時估算誤差會增大。一般來說次數在 10 次以內時這些公式的參考價值更高超過 15 次后建議將其視為“訓練耐力參考”而不是“最大力量參考”。2.2 訓練容量訓練容量一般用“重量 × 次數 × 組數”來計算。它代表一次訓練的總工作量。雖然計算器沒有強行引入組數但當你連續記錄多組數據時可以通過同一動作多條記錄的對比間接觀察容量的變化。在進階版本中你可以把組數字段加入表單然后統計某個動作的“總訓練容量”訓練容量 重量 × 次數 × 組數這個指標對跟蹤訓練量很有用但它不能完全替代強度判斷。例如用很輕的重量做很多次容量可能很高但對增長最大力量幫助有限。2.3 相對強度與應用相對強度指的是“當次訓練重量占 1RM 的百分比”。如果估算出的 1RM 是 100kg你用的是 80kg那么相對強度就是 80%。不同相對強度對應不同的訓練目標這是很多健身計劃常用的參考區間相對強度范圍大致訓練目標60% 以下熱身、動作技術練習、耐力訓練60% - 75%肌耐力、動作容量積累75% - 85%肌肥大、增肌訓練85% - 95%最大力量發展95% 以上極限力量、神經適應這個區間不是絕對標準不同訓練體系會有差異。在計算器中展示相對強度可以幫助你快速判斷某次訓練的側重點也能在減脂或增肌期間更精準地控制強度。3. 功能設計與技術選型3.1 功能拆解在動手寫代碼之前我先把計算器需要具備的功能拆成下面幾個模塊記錄表單選擇動作、輸入重量、輸入次數、提交記錄。記錄列表按時間倒序展示所有訓練記錄每條記錄顯示動作、重量、次數、估算 1RM、相對強度、記錄時間。統計卡片展示總記錄數、歷史最高 1RM、最近一次 1RM、訓練總次數。按動作聚合統計按動作名稱分組展示每個動作的記錄條數、歷史最高 1RM、最近一次重量與次數。數據持久化使用 localStorage 保存記錄刷新頁面不丟失。數據管理提供清空記錄的功能防止誤操作造成數據不可恢復。為了讓示例更有實用價值我還會在代碼中預留數據和導出相關接口方便后續擴展。3.2 技術選型本文選擇的技術方案如下語言HTML5、CSS3、原生 JavaScriptES6存儲localStorage運行方式瀏覽器直接打開或使用 VS Code Live Server 本地啟動依賴無第三方庫選擇原生技術棧的原因很簡單功能規模不大沒有必要引入 React 或 Vue。原生 JavaScript 能讓你更清楚地理解數據流——表單事件、數組操作、DOM 渲染、本地存儲這些是框架底層也在做的事情。3.3 數據模型設計訓練記錄的數據模型如下這段對象結構會在 JavaScript 中反復使用{ id: unique-id-string, exercise: 臥推, weight: 80, reps: 5, rm: 93.3, relativeIntensity: 85.7, createdAt: 2025-01-01T12:00:00.000Z }字段說明id唯一標識用于列表渲染時的 key我用時間戳轉換字符串生成。exercise動作名稱來自下拉選擇框。weight使用重量單位 kg。reps完成次數。rm當次訓練估算出的 1RM由公式計算得出。relativeIntensity相對強度等于weight / rm * 100結果保留一位小數。createdAt記錄創建時間使用 ISO 字符串便于排序和格式化顯示。整個應用的頂層數據結構是一個數組{ records: [] }雖然直接保存數組也可以但封裝成對象結構可以在未來擴展時加入schemaVersion字段方便數據遷移。這個細節會在最佳實踐部分展開。4. 實戰搭建項目與頁面結構4.1 創建項目結構新建一個項目文件夾建議命名為gym-progress-calculator目錄結構如下gym-progress-calculator/ ├── index.html ├── style.css └── app.js本文把 HTML、CSS、JavaScript 拆成三個文件便于閱讀和維護。如果你想快速體驗也可以把三個文件的內容合并到一個 HTML 文件中。4.2 編寫頁面骨架 index.html先編寫頁面骨架。這個文件負責定義整個應用的頁面結構包括標題區域、表單區域、統計區域、列表區域。!-- 文件路徑gym-progress-calculator/index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title健身重量進度計算器/title link relstylesheet hrefstyle.css / /head body div classcontainer h1健身重量進度計算器/h1 p classsubtitle記錄訓練重量自動估算 1RM跟蹤每一次進步/p section classcard form-card h2添加訓練記錄/h2 form idrecord-form div classform-row label 動作 select idexercise required option value請選擇動作/option option value臥推臥推/option option value深蹲深蹲/option option value硬拉硬拉/option option value肩推肩推/option option value劃船劃船/option option value引體向上引體向上/option /select /label label 重量 (kg) input typenumber idweight min0 step0.5 placeholder例如 60 required / /label label 次數 input typenumber idreps min1 step1 placeholder例如 8 required / /label /div button typesubmit classbtn-primary添加記錄/button /form /section section classcard stats-card h2整體統計/h2 div classstats-grid div classstat-item span classstat-value idtotal-count0/span span classstat-label記錄總數/span /div div classstat-item span classstat-value idtotal-reps0/span span classstat-label累計次數/span /div div classstat-item span classstat-value idmax-rm0/span span classstat-label歷史最高 1RM/span /div div classstat-item span classstat-value idlatest-rm0/span span classstat-label最近一次 1RM/span /div /div /section section classcard group-card h2按動作統計/h2 div idgroup-stats classgroup-stats/div /section section classcard list-card h2歷史記錄/h2 div classlist-actions button idsync-btn classbtn-secondary模擬同步/button button idclear-btn classbtn-danger清空所有記錄/button /div table classrecord-table thead tr th動作/th th重量/th th次數/th th估算 1RM/th th相對強度/th th時間/th /tr /thead tbody idrecord-list/tbody /table p classempty-tip idempty-tip還沒有訓練記錄添加一條試試吧。/p /section /div script srcapp.js/script /body /html頁面結構說明表單區域包含三個輸入字段動作選擇器支持后續擴展更多動作重量和次數都做了required和min校驗。整體統計區域展示四個核心指標數值由 JavaScript 動態更新。按動作統計區域是動態容器JS 會按動作名稱分組渲染統計卡片。歷史記錄區域使用表格展示全部記錄并預留了兩個操作按鈕。4.3 編寫樣式 style.css樣式的目標不是花哨而是清晰、能快速定位關鍵信息。下面這份樣式會在移動端做簡單的響應式處理。/* 文件路徑gym-progress-calculator/style.css */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; background: #f5f6f8; color: #1f2329; line-height: 1.6; } .container { max-width: 960px; margin: 0 auto; padding: 24px 16px; } h1 { font-size: 28px; margin-bottom: 4px; } .subtitle { color: #6b7280; margin-bottom: 24px; } .card { background: #ffffff; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .card h2 { font-size: 18px; margin-bottom: 16px; } .form-row { display: flex; flex-wrap: wrap; gap: 16px; } .form-row label { display: flex; flex-direction: column; font-size: 14px; color: #374151; flex: 1 1 160px; } .form-row input, .form-row select { margin-top: 6px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px; } .btn-primary, .btn-secondary, .btn-danger { display: inline-block; border: none; border-radius: 8px; padding: 10px 18px; font-size: 15px; cursor: pointer; margin-top: 14px; } .btn-primary { background: #2563eb; color: #fff; } .btn-primary:hover { background: #1d4ed8; } .btn-secondary { background: #e5e7eb; color: #1f2329; } .btn-danger { background: #fee2e2; color: #b91c1c; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } .stat-item { text-align: center; padding: 12px; background: #f9fafb; border-radius: 10px; } .stat-value { display: block; font-size: 28px; font-weight: 700; color: #111827; } .stat-label { display: block; margin-top: 4px; font-size: 13px; color: #6b7280; } .group-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .group-stat-card { background: #f0fdf4; border-radius: 8px; padding: 12px; } .group-stat-card h3 { font-size: 16px; margin-bottom: 8px; } .group-stat-card p { font-size: 14px; color: #374151; } .list-actions { display: flex; gap: 12px; margin-bottom: 12px; } .record-table { width: 100%; border-collapse: collapse; font-size: 14px; } .record-table th, .record-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #e5e7eb; } .record-table th { color: #6b7280; font-weight: 600; } .empty-tip { color: #9ca3af; text-align: center; padding: 20px 0; } media (max-width: 640px) { .form-row { flex-direction: column; } .record-table { font-size: 13px; } .stat-value { font-size: 22px; } }需要說明的是樣式文件里沒有使用任何外部字體或圖標庫因此離線也能正常顯示。4.4 編寫 JavaScript 核心邏輯 app.js這一部分是項目的核心。我會按照“常量與工具函數、數據讀寫、表單交互、統計渲染、列表渲染、初始化”的順序實現。// 文件路徑gym-progress-calculator/app.js (function () { use strict; const STORAGE_KEY gym-progress-records; // ---------- 工具函數 ---------- // 計算估算 1RM這里使用 Epley 公式 function calcRM(weight, reps) { if (weight 0 || reps 0) { return 0; } return weight * (1 reps / 30); } // 計算相對強度即本次重量占估算 1RM 的百分比 function calcRelativeIntensity(weight, rm) { if (rm 0) { return 0; } return weight / rm * 100; } // 格式化日期輸出 2025/01/01 14:30 的格式 function formatTime(isoString) { const date new Date(isoString); if (Number.isNaN(date.getTime())) { return 未知時間; } const year date.getFullYear(); const month String(date.getMonth() 1).padStart(2, 0); const day String(date.getDate()).padStart(2, 0); const hours String(date.getHours()).padStart(2, 0); const minutes String(date.getMinutes()).padStart(2, 0); return ${year}/${month}/${day} ${hours}:${minutes}; } // 生成簡單唯一 id function generateId() { return Date.now().toString(36) Math.random().toString(36).slice(2, 8); } // ---------- 數據讀寫 ---------- function loadRecords() { try { const rawData localStorage.getItem(STORAGE_KEY); if (!rawData) { return []; } const parsed JSON.parse(rawData); // 防止數據結構不正確導致頁面崩潰 return Array.isArray(parsed) ? parsed : []; } catch (error) { console.error(讀取本地記錄失敗:, error); return []; } } function saveRecords(records) { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(records)); } catch (error) { console.error(保存本地記錄失敗:, error); alert(保存失敗請檢查瀏覽器存儲空間是否已滿或是否存在隱私模式限制。); } } // ---------- 表單事件 ---------- function handleAddRecord(event) { event.preventDefault(); const exerciseSelect document.getElementById(exercise); const weightInput document.getElementById(weight); const repsInput document.getElementById(reps); const exercise exerciseSelect.value; const weight parseFloat(weightInput.value); const reps parseInt(repsInput.value, 10); // 前端校驗避免臟數據進入存儲 if (!exercise) { alert(請選擇動作); return; } if (!Number.isFinite(weight) || weight 0) { alert(請輸入有效的重量); return; } if (!Number.isInteger(reps) || reps 0 || reps 100) { alert(請輸入有效的次數1-100); return; } const rm calcRM(weight, reps); const relativeIntensity calcRelativeIntensity(weight, rm); const record { id: generateId(), exercise, weight, reps, rm: Math.round(rm * 10) / 10, relativeIntensity: Math.round(relativeIntensity * 10) / 10, createdAt: new Date().toISOString() }; const records loadRecords(); records.unshift(record); saveRecords(records); // 清空重量和次數方便連續錄入 weightInput.value ; repsInput.value ; renderAll(records); } // ---------- 統計渲染 ---------- function renderGlobalStats(records) { const totalCount records.length; const totalReps records.reduce((sum, record) sum record.reps, 0); const maxRM records.reduce((max, record) Math.max(max, record.rm), 0); const latestRM records.length 0 ? records[0].rm : 0; document.getElementById(total-count).textContent totalCount; document.getElementById(total-reps).textContent totalReps; document.getElementById(max-rm).textContent maxRM.toFixed(1); document.getElementById(latest-rm).textContent latestRM.toFixed(1); } function renderGroupStats(records) { const groupMap {}; records.forEach((record) { const group groupMap[record.exercise] || { exercise: record.exercise, count: 0, maxRM: 0, latestWeight: 0, latestReps: 0, latestTime: }; group.count 1; group.maxRM Math.max(group.maxRM, record.rm); // records 數組是倒序的第一條出現的記錄就是最新的 if (!group.latestTime) { group.latestWeight record.weight; group.latestReps record.reps; group.latestTime record.createdAt; } groupMap[record.exercise] group; }); const container document.getElementById(group-stats); const groupList Object.values(groupMap); if (groupList.length 0) { container.innerHTML p classempty-tip暫無分組數據/p; return; } let html ; groupList.forEach((group) { html div classgroup-stat-card h3${group.exercise}/h3 p記錄次數${group.count}/p p最高 1RM${group.maxRM.toFixed(1)} kg/p p最近訓練${group.latestWeight} kg × ${group.latestReps} 次/p p最近時間${formatTime(group.latestTime)}/p /div ; }); container.innerHTML html; } // ---------- 列表渲染 ---------- function renderRecordList(records) { const tbody document.getElementById(record-list); const emptyTip document.getElementById(empty-tip); if (records.length 0) { tbody.innerHTML ; emptyTip.style.display block; return; } emptyTip.style.display none; // 使用 DocumentFragment 減少 DOM 操作次數 const fragment document.createDocumentFragment(); records.forEach((record) { const tr document.createElement(tr); const exerciseTd document.createElement(td); exerciseTd.textContent record.exercise; const weightTd document.createElement(td); weightTd.textContent record.weight kg; const repsTd document.createElement(td); repsTd.textContent record.reps 次; const rmTd document.createElement(td); rmTd.textContent record.rm.toFixed(1) kg; const intensityTd document.createElement(td); intensityTd.textContent record.relativeIntensity.toFixed(1) %; const timeTd document.createElement(td); timeTd.textContent formatTime(record.createdAt); tr.append(exerciseTd, weightTd, repsTd, rmTd, intensityTd, timeTd); fragment.appendChild(tr); }); tbody.innerHTML ; tbody.appendChild(fragment); } function renderAll(records) { renderGlobalStats(records); renderGroupStats(records); renderRecordList(records); } // ---------- 清空與模擬同步 ---------- function handleClear() { const confirmed window.confirm(確定要清空所有訓練記錄嗎此操作無法撤銷。); if (!confirmed) { return; } saveRecords([]); renderAll([]); } function handleSync() { const records loadRecords(); if (records.length 0) { alert(當前沒有可同步的記錄); return; } // 這里模擬一個同步動作后續可以替換為真實后端接口 const syncData JSON.stringify({ records }, null, 2); console.log(模擬同步數據, syncData); alert(模擬同步完成請在瀏覽器控制臺查看同步數據。); } // ---------- 初始化 ---------- function init() { const form document.getElementById(record-form); const clearBtn document.getElementById(clear-btn); const syncBtn document.getElementById(sync-btn); form.addEventListener(submit, handleAddRecord); clearBtn.addEventListener(click, handleClear); syncBtn.addEventListener(click, handleSync); const records loadRecords(); renderAll(records); } init(); })();代碼中有幾個需要特別注意的點。第一loadRecords使用try-catch包裹解析過程。localStorage 中可能會存在舊版本數據或人為改壞的 JSON 字符串如果直接JSON.parse導致異常整個應用會崩潰。加上容錯后即使數據異常頁面也能正常打開只是歷史記錄會暫時讀不出來。第二renderGroupStats依賴records數組的倒序特性來確定“最近一次訓練”。因為新記錄總是unshift到數組開頭所以遍歷時第一次遇到某個動作就是它最新的記錄。第三列表渲染使用DocumentFragment批量插入 DOM避免在循環中頻繁操作真實 DOM。這個優化在數據量不大時效果不明顯但屬于前端渲染的標準姿勢建議養成習慣。5. 實戰運行與驗證5.1 本地啟動方式由于項目是純靜態文件啟動方式非常靈活。方式一直接雙擊index.html用瀏覽器打開。這個方式最簡單但不推薦日常開發使用因為本地文件模塊化加載會有一些限制。方式二使用 VS Code 的 Live Server 插件。在 VS Code 中打開項目文件夾右鍵index.html選擇 “Open with Live Server”瀏覽器會自動打開本地服務地址默認端口通常是5500或5501。這種方式更接近真實開發環境瀏覽器開發者工具調試也更順手。5.2 手動測試步驟打開頁面后按下面的步驟操作一遍在表單中選擇動作“臥推”。輸入重量80次數5。點擊“添加記錄”。在歷史記錄列表中應該出現一條新記錄估算 1RM 顯示為93.3 kg相對強度為85.7%。繼續添加記錄例如“深蹲 100kg × 8”、“硬拉 120kg × 3”。觀察整體統計中的“記錄總數”“累計次數”“歷史最高 1RM”是否隨之更新。刷新瀏覽器確認記錄仍然存在說明 localStorage 持久化生效。5.3 預期計算結果校驗用 Epley 公式驗證臥推 80kg × 5 次80 × (1 5/30) 80 × 1.1667 ≈ 93.3深蹲 100kg × 8 次100 × (1 8/30) 100 × 1.2667 ≈ 126.7硬拉 120kg × 3 次120 × (1 3/30) 120 × 1.1 132.0相對強度臥推80 / 93.3 ≈ 85.7%深蹲100 / 126.7 ≈ 78.9%硬拉120 / 132.0 ≈ 90.9%這些計算結果會自動保留一位小數顯示在頁面上。如果瀏覽器控制臺出現NaN或undefined優先檢查輸入框是否被清空、表單數據是否正常傳入函數。6. 功能擴展加入 Brzycki 公式與訓練周期標記上一版的核心功能已經可以日常使用了但如果你想把它做得更貼合真實的周期化訓練還可以繼續擴展。我建議優先加入兩個功能公式可切換以及訓練周期標記。6.1 公式支持動態切換在實際訓練中Epley 和 Brzycki 計算出的 1RM 會略有差異。你可以把公式做成可選項讓用戶根據自己的偏好選擇。在app.js中抽出計算函數增加formulaType參數function calcRM(weight, reps, formulaType epley) { if (weight 0 || reps 0) { return 0; } if (formulaType brzycki) { // Brzycki 公式在次數接近 37 時會失真需做邊界判斷 if (reps 36) { return weight * reps / 30; } return weight * (36 / (37 - reps)); } // 默認使用 Epley return weight * (1 reps / 30); }然后在 HTML 的表單區域增加一個下拉框在初始化時讀取用戶選擇保存到 localStorage 中。這樣不同訓練者可以根據自己的反饋選擇更適合的估算模型。6.2 訓練周期標記很多訓練者在備賽期、增肌期和減脂期的訓練強度完全不同。如果只記錄重量和次數回看歷史時會少一個維度。增加一個可選的“訓練階段”字段例如“增肌期”“力量期”“減脂期”“技術期”。在數據模型中增加phase字段列表和統計中按階段篩選就能觀察不同階段的訓練量和強度分布。這個擴展的難度不大但能讓工具從“記錄器”變成“訓練周期的分析器”。這也是很多商業健身 App 的核心功能之一你可以用自己的代碼實現。7. 常見問題與排查思路在實際開發和使用中比較常見的問題整理如下問題現象常見原因解決思路刷新頁面后記錄丟失瀏覽器隱私模式限制 localStorage改用無痕模式測試或檢查瀏覽器是否開啟“退出時清除數據”頁面打開時報錯記錄列表空白localStorage 中數據格式損壞在控制臺執行localStorage.removeItem(gym-progress-records)清掉舊數據輸入數字后提示無效表單校驗邏輯判斷值過嚴在控制臺打印weight和reps確認是否被解析為NaN1RM 計算結果過高或過低次數過高導致公式失真次數超過 15 次時在頁面提示“僅供參考”表格在手機端顯示錯位沒有適配小屏幕讓表格容器支持橫向滾動參考overflow-x: auto添加記錄后列表沒有刷新事件綁定或渲染函數未正確調用檢查renderAll是否被調用以及records是否更新清空記錄時誤操作沒有二次確認使用window.confirm確認后續可改為彈出層確認7.1 數據損壞的排查方法如果你在開發過程中修改過數據結構舊數據里可能缺少rm或relativeIntensity字段。這種情況最容易導致頁面渲染異常。排查時打開瀏覽器開發者工具切到 Application 面板在 Local Storage 中查看gym-progress-records的值。如果發現結構不對可以先手動清空然后重新添加測試記錄。7.2 localStorage 容量問題localStorage 的存儲上限因瀏覽器而異一般在 5MB 左右。對于純文本訓練記錄每條數據約占 200 字節這個容量足夠記錄上萬條訓練記錄。但如果你未來想存圖片、視頻就不能依賴 localStorage 了需要引入 IndexedDB 或后端存儲。8. 最佳實踐與工程建議8.1 數據存儲結構版本化項目雖然簡單但需要考慮未來升級。直接保存數組可以滿足當前需求但如果你想增加字段、改變數據結構舊數據就無法直接兼容。建議在保存時增加版本號{ version: 1, records: [] }讀取數據時檢查version當版本升級時執行遷移函數。這是真實項目中非常常見的數據兼容策略。8.2 表單校驗與用戶反饋前端校驗不能替代后端校驗但對于純前端工具它是數據質量的第一道防線。當前代碼中已經校驗了空動作、非法重量、非法次數。你可以繼續補充校驗重量上限例如不超過 500kg次數上限例如不超過 100 次動作名稱必須在預設列表中防止人為修改 DOM 后提交任意內容校驗不通過時除了alert也可以使用頁面內聯提示把錯誤信息展示在輸入框下方交互體驗更好。8.3 計算邏輯與渲染邏輯分離在app.js中calcRM和calcRelativeIntensity是純函數它們不接觸 DOM不依賴全局狀態。這是值得保持的好習慣。純函數的好處是容易測試。比如你可以在控制臺執行calcRM(80, 5); // 93.33333333333334如果未來引入 Jest 或 Vitest這類純函數可以直接編寫單元測試。渲染函數則需要模擬 DOM 環境測試成本更高所以盡量把業務邏輯放到純函數中。8.4 關于訓練安全的提醒這個計算器給出的 1RM 是估算值不能替代真實極限測試。實際訓練中使用大重量前一定要充分熱身最好有訓練伙伴保護。重量的增加建議循序漸進比如每次增加 2.5kg 到 5kg不要為了讓數據好看而盲目加重。數據的價值在于指導長期進步而不是鼓勵短期冒險。8.5 代碼可維護性建議從工程角度看這個項目的代碼還可以通過以下幾種方式提升可維護性把動作列表抽成常量數組渲染下拉選項時用 JavaScript 生成而不是在 HTML 中硬編碼。把統計卡片渲染函數改成接收數據對象而不是直接操作 DOM方便單元測試。使用class或函數式模塊拆分“存儲、計算、渲染”三層為后續遷移到 Vue 或 React 做準備。給關鍵函數添加 JSDoc 注釋方便其他開發者快速理解。對于個人項目來說這些措施不一定全部需要但養成這樣的編碼意識對職業生涯會有幫助。9. 總結與下一步計劃這個健身重量進度計算器雖然功能簡單但完整地走通了需求分析、數據建模、核心計算、前端渲染、本地持久化、問題排查這一整套流程。通過這個項目你可以掌握幾個非常實用的前端技能表格數據的增刪展示、localStorage 的讀寫與容錯、1RM 計算公式的工程化實現、按動作分組的統計聚合邏輯。如果你打算繼續完善它我建議按照下面幾個方向推進。第一個方向是增加圖表可視化。引入 Chart.js 或 ECharts把每個動作的 1RM 變化畫成折線圖進步趨勢會非常直觀。第二個方向是引入訓練周期和周計劃。你可以為每周設置訓練目標比如“本周臥推目標 85kg × 5”完成自動打勾。第三個方向是支持數據導出導入。把 localStorage 中的數據導出為 JSON 文件換設備時再導入解決數據遷移問題。第四個方向是加入 RPE 自評讓訓練者記錄主觀疲勞度從而更準確判斷狀態調整計劃。我建議你先把當前版本用起來記錄兩周真實訓練數據感受一下數據回看帶來的節奏感。等積累了一些記錄再回頭思考缺少什么功能然后動手改代碼。工具的價值不在代碼量而在堅持使用。如果你在復現過程中遇到其他問題歡迎在評論區交流。訓練要持續記錄代碼也要持續迭代下一版見。