據(jù)管理實戰(zhàn))
上次去健身房訓練我發(fā)現(xiàn)自己還在用手機備忘錄記錄臥推重量翻到上個月的記錄還要一條條往上滑更別提判斷“這個月到底進步了多少”了。真正讓我下決心做這個小工具是某天想確認“硬拉 100kg 做 5 次”和“硬拉 90kg 做 8 次”到底哪個強度更高結(jié)果在紙上算了半天。如果你也有類似經(jīng)歷說明你缺的不是訓練熱情而是一個能自動計算重量進度、估算 1RM、記錄每次訓練的工具。這篇文章就是圍繞這個場景展開的。我會從需求分析、核心計算模型開始一步步用純前端技術(shù)實現(xiàn)一個健身房重量進度計算器包含訓練記錄、1RM 估算、相對強度分析、歷史數(shù)據(jù)持久化等功能。整個項目不需要后端服務(wù)瀏覽器打開就能用適合新手學習前端實戰(zhàn)也適合有健身習慣的開發(fā)者直接部署給自己用。項目雖然不大但涉及數(shù)據(jù)建模、計算公式選擇、本地存儲、列表渲染、統(tǒng)計聚合這些前端日常開發(fā)的核心環(huán)節(jié)讀完后你可以舉一反三改成自己的訓練日志、食譜記錄或者體重管理工具。需要提前說明的是本文示例采用純 HTML、CSS、JavaScript 實現(xiàn)不依賴任何框架和構(gòu)建工具。關(guān)于訓練數(shù)據(jù)和計算公式我會給出通用的健身領(lǐng)域估算方式具體數(shù)值請結(jié)合你個人的訓練感受調(diào)整。1. 為什么要做健身重量進度計算器1.1 訓練記錄的真實痛點大多數(shù)健身愛好者在記錄訓練時通常會遇到三個問題。第一個問題是記錄分散。今天用備忘錄明天用 Excel后天可能直接不記長期積累的數(shù)據(jù)很難統(tǒng)一查看。第二個問題是數(shù)據(jù)沒有可比性。今天做“60kg × 10 次”上周做“70kg × 5 次”單純看重量和次數(shù)都無法判斷哪一次訓練負荷更大更無法判斷自己是否在進步。第三個問題是訓練計劃調(diào)整靠感覺。下次訓練該加多少重量5kg 還是 2.5kg如果沒有數(shù)據(jù)支持很容易練得比較隨意。這些問題本質(zhì)上不是“記錄動作”的問題而是“記錄之后如何計算、如何對比、如何指導下一步訓練”的問題。重量進度計算器要解決的就是第二個和第三個問題。1.2 這個項目解決什么問題一個健身重量進度計算器核心能力可以概括為三點記錄每次訓練的基本數(shù)據(jù)動作名稱、使用重量、完成次數(shù)、訓練日期。根據(jù)重量和次數(shù)估算當次訓練的最大力量水平也就是常說的 1RMOne Repetition Maximum單次最大重量。展示歷史趨勢比如某個動作的歷史最高 1RM、最近一次訓練負荷、記錄總數(shù)讓用戶直觀看到訓練是否在進步。在此基礎(chǔ)上還可以擴展出相對強度分析也就是“當次訓練重量占你估算最大重量的百分比”方便判斷訓練是偏向力量、肌肥大還是耐力區(qū)間。1.3 為什么選擇純前端方案項目定位是個人工具不需要多人協(xié)作也不涉及復雜的后端邏輯因此純前端是最合適的方案。純前端有幾個明顯優(yōu)點第一不需要搭建服務(wù)器雙擊 HTML 文件就能運行第二使用 localStorage 存儲數(shù)據(jù)瀏覽器關(guān)閉再打開數(shù)據(jù)依然存在足夠滿足個人記錄需求第三代碼結(jié)構(gòu)簡單容易閱讀和修改方便你根據(jù)自己習慣調(diào)整功能。當然純前端也有邊界。localStorage 的存儲空間一般在 5MB 左右只適合存儲文本型記錄數(shù)據(jù)保存在當前瀏覽器中換瀏覽器或清理緩存會造成歷史記錄丟失。如果你的目標是做一個多端同步的完整產(chǎn)品那需要引入后端和服務(wù)端數(shù)據(jù)庫本文暫時不涉及。2. 核心概念1RM、訓練容量與相對強度2.1 什么是 1RM1RM 指某個動作你只能完成一次的最大重量。它被廣泛用于衡量訓練者的力量水平。但直接測試 1RM 風險較高尤其是臥推、深蹲、硬拉這類復合動作在無人保護的情況下嘗試極限重量有受傷風險所以實踐中更常用“次最大重量”配合公式來估算 1RM。比較常見的估算公式有兩個Epley 公式1RM W × (1 R / 30)Brzycki 公式1RM W × (36 / (37 - R))其中 W 是使用的重量R 是在該重量下完成的次數(shù)。Epley 公式實現(xiàn)簡單適合普通訓練者Brzycki 公式在次數(shù)較高時結(jié)果會保守一些。兩個公式都是經(jīng)驗估算不代表真實極限但用于記錄趨勢變化已經(jīng)足夠。還要說明的是當次數(shù) R 較高時估算誤差會增大。一般來說次數(shù)在 10 次以內(nèi)時這些公式的參考價值更高超過 15 次后建議將其視為“訓練耐力參考”而不是“最大力量參考”。2.2 訓練容量訓練容量一般用“重量 × 次數(shù) × 組數(shù)”來計算。它代表一次訓練的總工作量。雖然計算器沒有強行引入組數(shù)但當你連續(xù)記錄多組數(shù)據(jù)時可以通過同一動作多條記錄的對比間接觀察容量的變化。在進階版本中你可以把組數(shù)字段加入表單然后統(tǒng)計某個動作的“總訓練容量”訓練容量 重量 × 次數(shù) × 組數(shù)這個指標對跟蹤訓練量很有用但它不能完全替代強度判斷。例如用很輕的重量做很多次容量可能很高但對增長最大力量幫助有限。2.3 相對強度與應(yīng)用相對強度指的是“當次訓練重量占 1RM 的百分比”。如果估算出的 1RM 是 100kg你用的是 80kg那么相對強度就是 80%。不同相對強度對應(yīng)不同的訓練目標這是很多健身計劃常用的參考區(qū)間相對強度范圍大致訓練目標60% 以下熱身、動作技術(shù)練習、耐力訓練60% - 75%肌耐力、動作容量積累75% - 85%肌肥大、增肌訓練85% - 95%最大力量發(fā)展95% 以上極限力量、神經(jīng)適應(yīng)這個區(qū)間不是絕對標準不同訓練體系會有差異。在計算器中展示相對強度可以幫助你快速判斷某次訓練的側(cè)重點也能在減脂或增肌期間更精準地控制強度。3. 功能設(shè)計與技術(shù)選型3.1 功能拆解在動手寫代碼之前我先把計算器需要具備的功能拆成下面幾個模塊記錄表單選擇動作、輸入重量、輸入次數(shù)、提交記錄。記錄列表按時間倒序展示所有訓練記錄每條記錄顯示動作、重量、次數(shù)、估算 1RM、相對強度、記錄時間。統(tǒng)計卡片展示總記錄數(shù)、歷史最高 1RM、最近一次 1RM、訓練總次數(shù)。按動作聚合統(tǒng)計按動作名稱分組展示每個動作的記錄條數(shù)、歷史最高 1RM、最近一次重量與次數(shù)。數(shù)據(jù)持久化使用 localStorage 保存記錄刷新頁面不丟失。數(shù)據(jù)管理提供清空記錄的功能防止誤操作造成數(shù)據(jù)不可恢復。為了讓示例更有實用價值我還會在代碼中預留數(shù)據(jù)和導出相關(guān)接口方便后續(xù)擴展。3.2 技術(shù)選型本文選擇的技術(shù)方案如下語言HTML5、CSS3、原生 JavaScriptES6存儲localStorage運行方式瀏覽器直接打開或使用 VS Code Live Server 本地啟動依賴無第三方庫選擇原生技術(shù)棧的原因很簡單功能規(guī)模不大沒有必要引入 React 或 Vue。原生 JavaScript 能讓你更清楚地理解數(shù)據(jù)流——表單事件、數(shù)組操作、DOM 渲染、本地存儲這些是框架底層也在做的事情。3.3 數(shù)據(jù)模型設(shè)計訓練記錄的數(shù)據(jù)模型如下這段對象結(jié)構(gòu)會在 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我用時間戳轉(zhuǎn)換字符串生成。exercise動作名稱來自下拉選擇框。weight使用重量單位 kg。reps完成次數(shù)。rm當次訓練估算出的 1RM由公式計算得出。relativeIntensity相對強度等于weight / rm * 100結(jié)果保留一位小數(shù)。createdAt記錄創(chuàng)建時間使用 ISO 字符串便于排序和格式化顯示。整個應(yīng)用的頂層數(shù)據(jù)結(jié)構(gòu)是一個數(shù)組{ records: [] }雖然直接保存數(shù)組也可以但封裝成對象結(jié)構(gòu)可以在未來擴展時加入schemaVersion字段方便數(shù)據(jù)遷移。這個細節(jié)會在最佳實踐部分展開。4. 實戰(zhàn)搭建項目與頁面結(jié)構(gòu)4.1 創(chuàng)建項目結(jié)構(gòu)新建一個項目文件夾建議命名為gym-progress-calculator目錄結(jié)構(gòu)如下gym-progress-calculator/ ├── index.html ├── style.css └── app.js本文把 HTML、CSS、JavaScript 拆成三個文件便于閱讀和維護。如果你想快速體驗也可以把三個文件的內(nèi)容合并到一個 HTML 文件中。4.2 編寫頁面骨架 index.html先編寫頁面骨架。這個文件負責定義整個應(yīng)用的頁面結(jié)構(gòu)包括標題區(qū)域、表單區(qū)域、統(tǒng)計區(qū)域、列表區(qū)域。!-- 文件路徑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 次數(shù) input typenumber idreps min1 step1 placeholder例如 8 required / /label /div button typesubmit classbtn-primary添加記錄/button /form /section section classcard stats-card h2整體統(tǒng)計/h2 div classstats-grid div classstat-item span classstat-value idtotal-count0/span span classstat-label記錄總數(shù)/span /div div classstat-item span classstat-value idtotal-reps0/span span classstat-label累計次數(shù)/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按動作統(tǒng)計/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次數(shù)/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頁面結(jié)構(gòu)說明表單區(qū)域包含三個輸入字段動作選擇器支持后續(xù)擴展更多動作重量和次數(shù)都做了required和min校驗。整體統(tǒng)計區(qū)域展示四個核心指標數(shù)值由 JavaScript 動態(tài)更新。按動作統(tǒng)計區(qū)域是動態(tài)容器JS 會按動作名稱分組渲染統(tǒng)計卡片。歷史記錄區(qū)域使用表格展示全部記錄并預留了兩個操作按鈕。4.3 編寫樣式 style.css樣式的目標不是花哨而是清晰、能快速定位關(guān)鍵信息。下面這份樣式會在移動端做簡單的響應(yīng)式處理。/* 文件路徑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這一部分是項目的核心。我會按照“常量與工具函數(shù)、數(shù)據(jù)讀寫、表單交互、統(tǒng)計渲染、列表渲染、初始化”的順序?qū)崿F(xiàn)。// 文件路徑gym-progress-calculator/app.js (function () { use strict; const STORAGE_KEY gym-progress-records; // ---------- 工具函數(shù) ---------- // 計算估算 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); } // ---------- 數(shù)據(jù)讀寫 ---------- function loadRecords() { try { const rawData localStorage.getItem(STORAGE_KEY); if (!rawData) { return []; } const parsed JSON.parse(rawData); // 防止數(shù)據(jù)結(jié)構(gòu)不正確導致頁面崩潰 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); // 前端校驗避免臟數(shù)據(jù)進入存儲 if (!exercise) { alert(請選擇動作); return; } if (!Number.isFinite(weight) || weight 0) { alert(請輸入有效的重量); return; } if (!Number.isInteger(reps) || reps 0 || reps 100) { alert(請輸入有效的次數(shù)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); // 清空重量和次數(shù)方便連續(xù)錄入 weightInput.value ; repsInput.value ; renderAll(records); } // ---------- 統(tǒng)計渲染 ---------- 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 數(shù)組是倒序的第一條出現(xiàn)的記錄就是最新的 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暫無分組數(shù)據(jù)/p; return; } let html ; groupList.forEach((group) { html div classgroup-stat-card h3${group.exercise}/h3 p記錄次數(shù)${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 操作次數(shù) 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; } // 這里模擬一個同步動作后續(xù)可以替換為真實后端接口 const syncData JSON.stringify({ records }, null, 2); console.log(模擬同步數(shù)據(jù), syncData); alert(模擬同步完成請在瀏覽器控制臺查看同步數(shù)據(jù)。); } // ---------- 初始化 ---------- 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 中可能會存在舊版本數(shù)據(jù)或人為改壞的 JSON 字符串如果直接JSON.parse導致異常整個應(yīng)用會崩潰。加上容錯后即使數(shù)據(jù)異常頁面也能正常打開只是歷史記錄會暫時讀不出來。第二renderGroupStats依賴records數(shù)組的倒序特性來確定“最近一次訓練”。因為新記錄總是unshift到數(shù)組開頭所以遍歷時第一次遇到某個動作就是它最新的記錄。第三列表渲染使用DocumentFragment批量插入 DOM避免在循環(huán)中頻繁操作真實 DOM。這個優(yōu)化在數(shù)據(jù)量不大時效果不明顯但屬于前端渲染的標準姿勢建議養(yǎng)成習慣。5. 實戰(zhàn)運行與驗證5.1 本地啟動方式由于項目是純靜態(tài)文件啟動方式非常靈活。方式一直接雙擊index.html用瀏覽器打開。這個方式最簡單但不推薦日常開發(fā)使用因為本地文件模塊化加載會有一些限制。方式二使用 VS Code 的 Live Server 插件。在 VS Code 中打開項目文件夾右鍵index.html選擇 “Open with Live Server”瀏覽器會自動打開本地服務(wù)地址默認端口通常是5500或5501。這種方式更接近真實開發(fā)環(huán)境瀏覽器開發(fā)者工具調(diào)試也更順手。5.2 手動測試步驟打開頁面后按下面的步驟操作一遍在表單中選擇動作“臥推”。輸入重量80次數(shù)5。點擊“添加記錄”。在歷史記錄列表中應(yīng)該出現(xiàn)一條新記錄估算 1RM 顯示為93.3 kg相對強度為85.7%。繼續(xù)添加記錄例如“深蹲 100kg × 8”、“硬拉 120kg × 3”。觀察整體統(tǒng)計中的“記錄總數(shù)”“累計次數(shù)”“歷史最高 1RM”是否隨之更新。刷新瀏覽器確認記錄仍然存在說明 localStorage 持久化生效。5.3 預期計算結(jié)果校驗用 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%這些計算結(jié)果會自動保留一位小數(shù)顯示在頁面上。如果瀏覽器控制臺出現(xiàn)NaN或undefined優(yōu)先檢查輸入框是否被清空、表單數(shù)據(jù)是否正常傳入函數(shù)。6. 功能擴展加入 Brzycki 公式與訓練周期標記上一版的核心功能已經(jīng)可以日常使用了但如果你想把它做得更貼合真實的周期化訓練還可以繼續(xù)擴展。我建議優(yōu)先加入兩個功能公式可切換以及訓練周期標記。6.1 公式支持動態(tài)切換在實際訓練中Epley 和 Brzycki 計算出的 1RM 會略有差異。你可以把公式做成可選項讓用戶根據(jù)自己的偏好選擇。在app.js中抽出計算函數(shù)增加formulaType參數(shù)function calcRM(weight, reps, formulaType epley) { if (weight 0 || reps 0) { return 0; } if (formulaType brzycki) { // Brzycki 公式在次數(shù)接近 37 時會失真需做邊界判斷 if (reps 36) { return weight * reps / 30; } return weight * (36 / (37 - reps)); } // 默認使用 Epley return weight * (1 reps / 30); }然后在 HTML 的表單區(qū)域增加一個下拉框在初始化時讀取用戶選擇保存到 localStorage 中。這樣不同訓練者可以根據(jù)自己的反饋選擇更適合的估算模型。6.2 訓練周期標記很多訓練者在備賽期、增肌期和減脂期的訓練強度完全不同。如果只記錄重量和次數(shù)回看歷史時會少一個維度。增加一個可選的“訓練階段”字段例如“增肌期”“力量期”“減脂期”“技術(shù)期”。在數(shù)據(jù)模型中增加phase字段列表和統(tǒng)計中按階段篩選就能觀察不同階段的訓練量和強度分布。這個擴展的難度不大但能讓工具從“記錄器”變成“訓練周期的分析器”。這也是很多商業(yè)健身 App 的核心功能之一你可以用自己的代碼實現(xiàn)。7. 常見問題與排查思路在實際開發(fā)和使用中比較常見的問題整理如下問題現(xiàn)象常見原因解決思路刷新頁面后記錄丟失瀏覽器隱私模式限制 localStorage改用無痕模式測試或檢查瀏覽器是否開啟“退出時清除數(shù)據(jù)”頁面打開時報錯記錄列表空白localStorage 中數(shù)據(jù)格式損壞在控制臺執(zhí)行l(wèi)ocalStorage.removeItem(gym-progress-records)清掉舊數(shù)據(jù)輸入數(shù)字后提示無效表單校驗邏輯判斷值過嚴在控制臺打印weight和reps確認是否被解析為NaN1RM 計算結(jié)果過高或過低次數(shù)過高導致公式失真次數(shù)超過 15 次時在頁面提示“僅供參考”表格在手機端顯示錯位沒有適配小屏幕讓表格容器支持橫向滾動參考overflow-x: auto添加記錄后列表沒有刷新事件綁定或渲染函數(shù)未正確調(diào)用檢查renderAll是否被調(diào)用以及records是否更新清空記錄時誤操作沒有二次確認使用window.confirm確認后續(xù)可改為彈出層確認7.1 數(shù)據(jù)損壞的排查方法如果你在開發(fā)過程中修改過數(shù)據(jù)結(jié)構(gòu)舊數(shù)據(jù)里可能缺少rm或relativeIntensity字段。這種情況最容易導致頁面渲染異常。排查時打開瀏覽器開發(fā)者工具切到 Application 面板在 Local Storage 中查看gym-progress-records的值。如果發(fā)現(xiàn)結(jié)構(gòu)不對可以先手動清空然后重新添加測試記錄。7.2 localStorage 容量問題localStorage 的存儲上限因瀏覽器而異一般在 5MB 左右。對于純文本訓練記錄每條數(shù)據(jù)約占 200 字節(jié)這個容量足夠記錄上萬條訓練記錄。但如果你未來想存圖片、視頻就不能依賴 localStorage 了需要引入 IndexedDB 或后端存儲。8. 最佳實踐與工程建議8.1 數(shù)據(jù)存儲結(jié)構(gòu)版本化項目雖然簡單但需要考慮未來升級。直接保存數(shù)組可以滿足當前需求但如果你想增加字段、改變數(shù)據(jù)結(jié)構(gòu)舊數(shù)據(jù)就無法直接兼容。建議在保存時增加版本號{ version: 1, records: [] }讀取數(shù)據(jù)時檢查version當版本升級時執(zhí)行遷移函數(shù)。這是真實項目中非常常見的數(shù)據(jù)兼容策略。8.2 表單校驗與用戶反饋前端校驗不能替代后端校驗但對于純前端工具它是數(shù)據(jù)質(zhì)量的第一道防線。當前代碼中已經(jīng)校驗了空動作、非法重量、非法次數(shù)。你可以繼續(xù)補充校驗重量上限例如不超過 500kg次數(shù)上限例如不超過 100 次動作名稱必須在預設(shè)列表中防止人為修改 DOM 后提交任意內(nèi)容校驗不通過時除了alert也可以使用頁面內(nèi)聯(lián)提示把錯誤信息展示在輸入框下方交互體驗更好。8.3 計算邏輯與渲染邏輯分離在app.js中calcRM和calcRelativeIntensity是純函數(shù)它們不接觸 DOM不依賴全局狀態(tài)。這是值得保持的好習慣。純函數(shù)的好處是容易測試。比如你可以在控制臺執(zhí)行calcRM(80, 5); // 93.33333333333334如果未來引入 Jest 或 Vitest這類純函數(shù)可以直接編寫單元測試。渲染函數(shù)則需要模擬 DOM 環(huán)境測試成本更高所以盡量把業(yè)務(wù)邏輯放到純函數(shù)中。8.4 關(guān)于訓練安全的提醒這個計算器給出的 1RM 是估算值不能替代真實極限測試。實際訓練中使用大重量前一定要充分熱身最好有訓練伙伴保護。重量的增加建議循序漸進比如每次增加 2.5kg 到 5kg不要為了讓數(shù)據(jù)好看而盲目加重。數(shù)據(jù)的價值在于指導長期進步而不是鼓勵短期冒險。8.5 代碼可維護性建議從工程角度看這個項目的代碼還可以通過以下幾種方式提升可維護性把動作列表抽成常量數(shù)組渲染下拉選項時用 JavaScript 生成而不是在 HTML 中硬編碼。把統(tǒng)計卡片渲染函數(shù)改成接收數(shù)據(jù)對象而不是直接操作 DOM方便單元測試。使用class或函數(shù)式模塊拆分“存儲、計算、渲染”三層為后續(xù)遷移到 Vue 或 React 做準備。給關(guān)鍵函數(shù)添加 JSDoc 注釋方便其他開發(fā)者快速理解。對于個人項目來說這些措施不一定全部需要但養(yǎng)成這樣的編碼意識對職業(yè)生涯會有幫助。9. 總結(jié)與下一步計劃這個健身重量進度計算器雖然功能簡單但完整地走通了需求分析、數(shù)據(jù)建模、核心計算、前端渲染、本地持久化、問題排查這一整套流程。通過這個項目你可以掌握幾個非常實用的前端技能表格數(shù)據(jù)的增刪展示、localStorage 的讀寫與容錯、1RM 計算公式的工程化實現(xiàn)、按動作分組的統(tǒng)計聚合邏輯。如果你打算繼續(xù)完善它我建議按照下面幾個方向推進。第一個方向是增加圖表可視化。引入 Chart.js 或 ECharts把每個動作的 1RM 變化畫成折線圖進步趨勢會非常直觀。第二個方向是引入訓練周期和周計劃。你可以為每周設(shè)置訓練目標比如“本周臥推目標 85kg × 5”完成自動打勾。第三個方向是支持數(shù)據(jù)導出導入。把 localStorage 中的數(shù)據(jù)導出為 JSON 文件換設(shè)備時再導入解決數(shù)據(jù)遷移問題。第四個方向是加入 RPE 自評讓訓練者記錄主觀疲勞度從而更準確判斷狀態(tài)調(diào)整計劃。我建議你先把當前版本用起來記錄兩周真實訓練數(shù)據(jù)感受一下數(shù)據(jù)回看帶來的節(jié)奏感。等積累了一些記錄再回頭思考缺少什么功能然后動手改代碼。工具的價值不在代碼量而在堅持使用。如果你在復現(xiàn)過程中遇到其他問題歡迎在評論區(qū)交流。訓練要持續(xù)記錄代碼也要持續(xù)迭代下一版見。 純前端健身重量進度計算器：1RM估算與訓練數(shù)據(jù)管理實戰(zhàn)
上次去健身房訓練我發(fā)現(xiàn)自己還在用手機備忘錄記錄臥推重量翻到上個月的記錄還要一條條往上滑更別提判斷“這個月到底進步了多少”了。真正讓我下決心做這個小工具是某天想確認“硬拉 100kg 做 5 次”和“硬拉 90kg 做 8 次”到底哪個強度更高結(jié)果在紙上算了半天。如果你也有類似經(jīng)歷說明你缺的不是訓練熱情而是一個能自動計算重量進度、估算 1RM、記錄每次訓練的工具。這篇文章就是圍繞這個場景展開的。我會從需求分析、核心計算模型開始一步步用純前端技術(shù)實現(xiàn)一個健身房重量進度計算器包含訓練記錄、1RM 估算、相對強度分析、歷史數(shù)據(jù)持久化等功能。整個項目不需要后端服務(wù)瀏覽器打開就能用適合新手學習前端實戰(zhàn)也適合有健身習慣的開發(fā)者直接部署給自己用。項目雖然不大但涉及數(shù)據(jù)建模、計算公式選擇、本地存儲、列表渲染、統(tǒng)計聚合這些前端日常開發(fā)的核心環(huán)節(jié)讀完后你可以舉一反三改成自己的訓練日志、食譜記錄或者體重管理工具。需要提前說明的是本文示例采用純 HTML、CSS、JavaScript 實現(xiàn)不依賴任何框架和構(gòu)建工具。關(guān)于訓練數(shù)據(jù)和計算公式我會給出通用的健身領(lǐng)域估算方式具體數(shù)值請結(jié)合你個人的訓練感受調(diào)整。1. 為什么要做健身重量進度計算器1.1 訓練記錄的真實痛點大多數(shù)健身愛好者在記錄訓練時通常會遇到三個問題。第一個問題是記錄分散。今天用備忘錄明天用 Excel后天可能直接不記長期積累的數(shù)據(jù)很難統(tǒng)一查看。第二個問題是數(shù)據(jù)沒有可比性。今天做“60kg × 10 次”上周做“70kg × 5 次”單純看重量和次數(shù)都無法判斷哪一次訓練負荷更大更無法判斷自己是否在進步。第三個問題是訓練計劃調(diào)整靠感覺。下次訓練該加多少重量5kg 還是 2.5kg如果沒有數(shù)據(jù)支持很容易練得比較隨意。這些問題本質(zhì)上不是“記錄動作”的問題而是“記錄之后如何計算、如何對比、如何指導下一步訓練”的問題。重量進度計算器要解決的就是第二個和第三個問題。1.2 這個項目解決什么問題一個健身重量進度計算器核心能力可以概括為三點記錄每次訓練的基本數(shù)據(jù)動作名稱、使用重量、完成次數(shù)、訓練日期。根據(jù)重量和次數(shù)估算當次訓練的最大力量水平也就是常說的 1RMOne Repetition Maximum單次最大重量。展示歷史趨勢比如某個動作的歷史最高 1RM、最近一次訓練負荷、記錄總數(shù)讓用戶直觀看到訓練是否在進步。在此基礎(chǔ)上還可以擴展出相對強度分析也就是“當次訓練重量占你估算最大重量的百分比”方便判斷訓練是偏向力量、肌肥大還是耐力區(qū)間。1.3 為什么選擇純前端方案項目定位是個人工具不需要多人協(xié)作也不涉及復雜的后端邏輯因此純前端是最合適的方案。純前端有幾個明顯優(yōu)點第一不需要搭建服務(wù)器雙擊 HTML 文件就能運行第二使用 localStorage 存儲數(shù)據(jù)瀏覽器關(guān)閉再打開數(shù)據(jù)依然存在足夠滿足個人記錄需求第三代碼結(jié)構(gòu)簡單容易閱讀和修改方便你根據(jù)自己習慣調(diào)整功能。當然純前端也有邊界。localStorage 的存儲空間一般在 5MB 左右只適合存儲文本型記錄數(shù)據(jù)保存在當前瀏覽器中換瀏覽器或清理緩存會造成歷史記錄丟失。如果你的目標是做一個多端同步的完整產(chǎn)品那需要引入后端和服務(wù)端數(shù)據(jù)庫本文暫時不涉及。2. 核心概念1RM、訓練容量與相對強度2.1 什么是 1RM1RM 指某個動作你只能完成一次的最大重量。它被廣泛用于衡量訓練者的力量水平。但直接測試 1RM 風險較高尤其是臥推、深蹲、硬拉這類復合動作在無人保護的情況下嘗試極限重量有受傷風險所以實踐中更常用“次最大重量”配合公式來估算 1RM。比較常見的估算公式有兩個Epley 公式1RM W × (1 R / 30)Brzycki 公式1RM W × (36 / (37 - R))其中 W 是使用的重量R 是在該重量下完成的次數(shù)。Epley 公式實現(xiàn)簡單適合普通訓練者Brzycki 公式在次數(shù)較高時結(jié)果會保守一些。兩個公式都是經(jīng)驗估算不代表真實極限但用于記錄趨勢變化已經(jīng)足夠。還要說明的是當次數(shù) R 較高時估算誤差會增大。一般來說次數(shù)在 10 次以內(nèi)時這些公式的參考價值更高超過 15 次后建議將其視為“訓練耐力參考”而不是“最大力量參考”。2.2 訓練容量訓練容量一般用“重量 × 次數(shù) × 組數(shù)”來計算。它代表一次訓練的總工作量。雖然計算器沒有強行引入組數(shù)但當你連續(xù)記錄多組數(shù)據(jù)時可以通過同一動作多條記錄的對比間接觀察容量的變化。在進階版本中你可以把組數(shù)字段加入表單然后統(tǒng)計某個動作的“總訓練容量”訓練容量 重量 × 次數(shù) × 組數(shù)這個指標對跟蹤訓練量很有用但它不能完全替代強度判斷。例如用很輕的重量做很多次容量可能很高但對增長最大力量幫助有限。2.3 相對強度與應(yīng)用相對強度指的是“當次訓練重量占 1RM 的百分比”。如果估算出的 1RM 是 100kg你用的是 80kg那么相對強度就是 80%。不同相對強度對應(yīng)不同的訓練目標這是很多健身計劃常用的參考區(qū)間相對強度范圍大致訓練目標60% 以下熱身、動作技術(shù)練習、耐力訓練60% - 75%肌耐力、動作容量積累75% - 85%肌肥大、增肌訓練85% - 95%最大力量發(fā)展95% 以上極限力量、神經(jīng)適應(yīng)這個區(qū)間不是絕對標準不同訓練體系會有差異。在計算器中展示相對強度可以幫助你快速判斷某次訓練的側(cè)重點也能在減脂或增肌期間更精準地控制強度。3. 功能設(shè)計與技術(shù)選型3.1 功能拆解在動手寫代碼之前我先把計算器需要具備的功能拆成下面幾個模塊記錄表單選擇動作、輸入重量、輸入次數(shù)、提交記錄。記錄列表按時間倒序展示所有訓練記錄每條記錄顯示動作、重量、次數(shù)、估算 1RM、相對強度、記錄時間。統(tǒng)計卡片展示總記錄數(shù)、歷史最高 1RM、最近一次 1RM、訓練總次數(shù)。按動作聚合統(tǒng)計按動作名稱分組展示每個動作的記錄條數(shù)、歷史最高 1RM、最近一次重量與次數(shù)。數(shù)據(jù)持久化使用 localStorage 保存記錄刷新頁面不丟失。數(shù)據(jù)管理提供清空記錄的功能防止誤操作造成數(shù)據(jù)不可恢復。為了讓示例更有實用價值我還會在代碼中預留數(shù)據(jù)和導出相關(guān)接口方便后續(xù)擴展。3.2 技術(shù)選型本文選擇的技術(shù)方案如下語言HTML5、CSS3、原生 JavaScriptES6存儲localStorage運行方式瀏覽器直接打開或使用 VS Code Live Server 本地啟動依賴無第三方庫選擇原生技術(shù)棧的原因很簡單功能規(guī)模不大沒有必要引入 React 或 Vue。原生 JavaScript 能讓你更清楚地理解數(shù)據(jù)流——表單事件、數(shù)組操作、DOM 渲染、本地存儲這些是框架底層也在做的事情。3.3 數(shù)據(jù)模型設(shè)計訓練記錄的數(shù)據(jù)模型如下這段對象結(jié)構(gòu)會在 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我用時間戳轉(zhuǎn)換字符串生成。exercise動作名稱來自下拉選擇框。weight使用重量單位 kg。reps完成次數(shù)。rm當次訓練估算出的 1RM由公式計算得出。relativeIntensity相對強度等于weight / rm * 100結(jié)果保留一位小數(shù)。createdAt記錄創(chuàng)建時間使用 ISO 字符串便于排序和格式化顯示。整個應(yīng)用的頂層數(shù)據(jù)結(jié)構(gòu)是一個數(shù)組{ records: [] }雖然直接保存數(shù)組也可以但封裝成對象結(jié)構(gòu)可以在未來擴展時加入schemaVersion字段方便數(shù)據(jù)遷移。這個細節(jié)會在最佳實踐部分展開。4. 實戰(zhàn)搭建項目與頁面結(jié)構(gòu)4.1 創(chuàng)建項目結(jié)構(gòu)新建一個項目文件夾建議命名為gym-progress-calculator目錄結(jié)構(gòu)如下gym-progress-calculator/ ├── index.html ├── style.css └── app.js本文把 HTML、CSS、JavaScript 拆成三個文件便于閱讀和維護。如果你想快速體驗也可以把三個文件的內(nèi)容合并到一個 HTML 文件中。4.2 編寫頁面骨架 index.html先編寫頁面骨架。這個文件負責定義整個應(yīng)用的頁面結(jié)構(gòu)包括標題區(qū)域、表單區(qū)域、統(tǒng)計區(qū)域、列表區(qū)域。!-- 文件路徑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 次數(shù) input typenumber idreps min1 step1 placeholder例如 8 required / /label /div button typesubmit classbtn-primary添加記錄/button /form /section section classcard stats-card h2整體統(tǒng)計/h2 div classstats-grid div classstat-item span classstat-value idtotal-count0/span span classstat-label記錄總數(shù)/span /div div classstat-item span classstat-value idtotal-reps0/span span classstat-label累計次數(shù)/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按動作統(tǒng)計/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次數(shù)/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頁面結(jié)構(gòu)說明表單區(qū)域包含三個輸入字段動作選擇器支持后續(xù)擴展更多動作重量和次數(shù)都做了required和min校驗。整體統(tǒng)計區(qū)域展示四個核心指標數(shù)值由 JavaScript 動態(tài)更新。按動作統(tǒng)計區(qū)域是動態(tài)容器JS 會按動作名稱分組渲染統(tǒng)計卡片。歷史記錄區(qū)域使用表格展示全部記錄并預留了兩個操作按鈕。4.3 編寫樣式 style.css樣式的目標不是花哨而是清晰、能快速定位關(guān)鍵信息。下面這份樣式會在移動端做簡單的響應(yīng)式處理。/* 文件路徑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這一部分是項目的核心。我會按照“常量與工具函數(shù)、數(shù)據(jù)讀寫、表單交互、統(tǒng)計渲染、列表渲染、初始化”的順序?qū)崿F(xiàn)。// 文件路徑gym-progress-calculator/app.js (function () { use strict; const STORAGE_KEY gym-progress-records; // ---------- 工具函數(shù) ---------- // 計算估算 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); } // ---------- 數(shù)據(jù)讀寫 ---------- function loadRecords() { try { const rawData localStorage.getItem(STORAGE_KEY); if (!rawData) { return []; } const parsed JSON.parse(rawData); // 防止數(shù)據(jù)結(jié)構(gòu)不正確導致頁面崩潰 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); // 前端校驗避免臟數(shù)據(jù)進入存儲 if (!exercise) { alert(請選擇動作); return; } if (!Number.isFinite(weight) || weight 0) { alert(請輸入有效的重量); return; } if (!Number.isInteger(reps) || reps 0 || reps 100) { alert(請輸入有效的次數(shù)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); // 清空重量和次數(shù)方便連續(xù)錄入 weightInput.value ; repsInput.value ; renderAll(records); } // ---------- 統(tǒng)計渲染 ---------- 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 數(shù)組是倒序的第一條出現(xiàn)的記錄就是最新的 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暫無分組數(shù)據(jù)/p; return; } let html ; groupList.forEach((group) { html div classgroup-stat-card h3${group.exercise}/h3 p記錄次數(shù)${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 操作次數(shù) 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; } // 這里模擬一個同步動作后續(xù)可以替換為真實后端接口 const syncData JSON.stringify({ records }, null, 2); console.log(模擬同步數(shù)據(jù), syncData); alert(模擬同步完成請在瀏覽器控制臺查看同步數(shù)據(jù)。); } // ---------- 初始化 ---------- 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 中可能會存在舊版本數(shù)據(jù)或人為改壞的 JSON 字符串如果直接JSON.parse導致異常整個應(yīng)用會崩潰。加上容錯后即使數(shù)據(jù)異常頁面也能正常打開只是歷史記錄會暫時讀不出來。第二renderGroupStats依賴records數(shù)組的倒序特性來確定“最近一次訓練”。因為新記錄總是unshift到數(shù)組開頭所以遍歷時第一次遇到某個動作就是它最新的記錄。第三列表渲染使用DocumentFragment批量插入 DOM避免在循環(huán)中頻繁操作真實 DOM。這個優(yōu)化在數(shù)據(jù)量不大時效果不明顯但屬于前端渲染的標準姿勢建議養(yǎng)成習慣。5. 實戰(zhàn)運行與驗證5.1 本地啟動方式由于項目是純靜態(tài)文件啟動方式非常靈活。方式一直接雙擊index.html用瀏覽器打開。這個方式最簡單但不推薦日常開發(fā)使用因為本地文件模塊化加載會有一些限制。方式二使用 VS Code 的 Live Server 插件。在 VS Code 中打開項目文件夾右鍵index.html選擇 “Open with Live Server”瀏覽器會自動打開本地服務(wù)地址默認端口通常是5500或5501。這種方式更接近真實開發(fā)環(huán)境瀏覽器開發(fā)者工具調(diào)試也更順手。5.2 手動測試步驟打開頁面后按下面的步驟操作一遍在表單中選擇動作“臥推”。輸入重量80次數(shù)5。點擊“添加記錄”。在歷史記錄列表中應(yīng)該出現(xiàn)一條新記錄估算 1RM 顯示為93.3 kg相對強度為85.7%。繼續(xù)添加記錄例如“深蹲 100kg × 8”、“硬拉 120kg × 3”。觀察整體統(tǒng)計中的“記錄總數(shù)”“累計次數(shù)”“歷史最高 1RM”是否隨之更新。刷新瀏覽器確認記錄仍然存在說明 localStorage 持久化生效。5.3 預期計算結(jié)果校驗用 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%這些計算結(jié)果會自動保留一位小數(shù)顯示在頁面上。如果瀏覽器控制臺出現(xiàn)NaN或undefined優(yōu)先檢查輸入框是否被清空、表單數(shù)據(jù)是否正常傳入函數(shù)。6. 功能擴展加入 Brzycki 公式與訓練周期標記上一版的核心功能已經(jīng)可以日常使用了但如果你想把它做得更貼合真實的周期化訓練還可以繼續(xù)擴展。我建議優(yōu)先加入兩個功能公式可切換以及訓練周期標記。6.1 公式支持動態(tài)切換在實際訓練中Epley 和 Brzycki 計算出的 1RM 會略有差異。你可以把公式做成可選項讓用戶根據(jù)自己的偏好選擇。在app.js中抽出計算函數(shù)增加formulaType參數(shù)function calcRM(weight, reps, formulaType epley) { if (weight 0 || reps 0) { return 0; } if (formulaType brzycki) { // Brzycki 公式在次數(shù)接近 37 時會失真需做邊界判斷 if (reps 36) { return weight * reps / 30; } return weight * (36 / (37 - reps)); } // 默認使用 Epley return weight * (1 reps / 30); }然后在 HTML 的表單區(qū)域增加一個下拉框在初始化時讀取用戶選擇保存到 localStorage 中。這樣不同訓練者可以根據(jù)自己的反饋選擇更適合的估算模型。6.2 訓練周期標記很多訓練者在備賽期、增肌期和減脂期的訓練強度完全不同。如果只記錄重量和次數(shù)回看歷史時會少一個維度。增加一個可選的“訓練階段”字段例如“增肌期”“力量期”“減脂期”“技術(shù)期”。在數(shù)據(jù)模型中增加phase字段列表和統(tǒng)計中按階段篩選就能觀察不同階段的訓練量和強度分布。這個擴展的難度不大但能讓工具從“記錄器”變成“訓練周期的分析器”。這也是很多商業(yè)健身 App 的核心功能之一你可以用自己的代碼實現(xiàn)。7. 常見問題與排查思路在實際開發(fā)和使用中比較常見的問題整理如下問題現(xiàn)象常見原因解決思路刷新頁面后記錄丟失瀏覽器隱私模式限制 localStorage改用無痕模式測試或檢查瀏覽器是否開啟“退出時清除數(shù)據(jù)”頁面打開時報錯記錄列表空白localStorage 中數(shù)據(jù)格式損壞在控制臺執(zhí)行l(wèi)ocalStorage.removeItem(gym-progress-records)清掉舊數(shù)據(jù)輸入數(shù)字后提示無效表單校驗邏輯判斷值過嚴在控制臺打印weight和reps確認是否被解析為NaN1RM 計算結(jié)果過高或過低次數(shù)過高導致公式失真次數(shù)超過 15 次時在頁面提示“僅供參考”表格在手機端顯示錯位沒有適配小屏幕讓表格容器支持橫向滾動參考overflow-x: auto添加記錄后列表沒有刷新事件綁定或渲染函數(shù)未正確調(diào)用檢查renderAll是否被調(diào)用以及records是否更新清空記錄時誤操作沒有二次確認使用window.confirm確認后續(xù)可改為彈出層確認7.1 數(shù)據(jù)損壞的排查方法如果你在開發(fā)過程中修改過數(shù)據(jù)結(jié)構(gòu)舊數(shù)據(jù)里可能缺少rm或relativeIntensity字段。這種情況最容易導致頁面渲染異常。排查時打開瀏覽器開發(fā)者工具切到 Application 面板在 Local Storage 中查看gym-progress-records的值。如果發(fā)現(xiàn)結(jié)構(gòu)不對可以先手動清空然后重新添加測試記錄。7.2 localStorage 容量問題localStorage 的存儲上限因瀏覽器而異一般在 5MB 左右。對于純文本訓練記錄每條數(shù)據(jù)約占 200 字節(jié)這個容量足夠記錄上萬條訓練記錄。但如果你未來想存圖片、視頻就不能依賴 localStorage 了需要引入 IndexedDB 或后端存儲。8. 最佳實踐與工程建議8.1 數(shù)據(jù)存儲結(jié)構(gòu)版本化項目雖然簡單但需要考慮未來升級。直接保存數(shù)組可以滿足當前需求但如果你想增加字段、改變數(shù)據(jù)結(jié)構(gòu)舊數(shù)據(jù)就無法直接兼容。建議在保存時增加版本號{ version: 1, records: [] }讀取數(shù)據(jù)時檢查version當版本升級時執(zhí)行遷移函數(shù)。這是真實項目中非常常見的數(shù)據(jù)兼容策略。8.2 表單校驗與用戶反饋前端校驗不能替代后端校驗但對于純前端工具它是數(shù)據(jù)質(zhì)量的第一道防線。當前代碼中已經(jīng)校驗了空動作、非法重量、非法次數(shù)。你可以繼續(xù)補充校驗重量上限例如不超過 500kg次數(shù)上限例如不超過 100 次動作名稱必須在預設(shè)列表中防止人為修改 DOM 后提交任意內(nèi)容校驗不通過時除了alert也可以使用頁面內(nèi)聯(lián)提示把錯誤信息展示在輸入框下方交互體驗更好。8.3 計算邏輯與渲染邏輯分離在app.js中calcRM和calcRelativeIntensity是純函數(shù)它們不接觸 DOM不依賴全局狀態(tài)。這是值得保持的好習慣。純函數(shù)的好處是容易測試。比如你可以在控制臺執(zhí)行calcRM(80, 5); // 93.33333333333334如果未來引入 Jest 或 Vitest這類純函數(shù)可以直接編寫單元測試。渲染函數(shù)則需要模擬 DOM 環(huán)境測試成本更高所以盡量把業(yè)務(wù)邏輯放到純函數(shù)中。8.4 關(guān)于訓練安全的提醒這個計算器給出的 1RM 是估算值不能替代真實極限測試。實際訓練中使用大重量前一定要充分熱身最好有訓練伙伴保護。重量的增加建議循序漸進比如每次增加 2.5kg 到 5kg不要為了讓數(shù)據(jù)好看而盲目加重。數(shù)據(jù)的價值在于指導長期進步而不是鼓勵短期冒險。8.5 代碼可維護性建議從工程角度看這個項目的代碼還可以通過以下幾種方式提升可維護性把動作列表抽成常量數(shù)組渲染下拉選項時用 JavaScript 生成而不是在 HTML 中硬編碼。把統(tǒng)計卡片渲染函數(shù)改成接收數(shù)據(jù)對象而不是直接操作 DOM方便單元測試。使用class或函數(shù)式模塊拆分“存儲、計算、渲染”三層為后續(xù)遷移到 Vue 或 React 做準備。給關(guān)鍵函數(shù)添加 JSDoc 注釋方便其他開發(fā)者快速理解。對于個人項目來說這些措施不一定全部需要但養(yǎng)成這樣的編碼意識對職業(yè)生涯會有幫助。9. 總結(jié)與下一步計劃這個健身重量進度計算器雖然功能簡單但完整地走通了需求分析、數(shù)據(jù)建模、核心計算、前端渲染、本地持久化、問題排查這一整套流程。通過這個項目你可以掌握幾個非常實用的前端技能表格數(shù)據(jù)的增刪展示、localStorage 的讀寫與容錯、1RM 計算公式的工程化實現(xiàn)、按動作分組的統(tǒng)計聚合邏輯。如果你打算繼續(xù)完善它我建議按照下面幾個方向推進。第一個方向是增加圖表可視化。引入 Chart.js 或 ECharts把每個動作的 1RM 變化畫成折線圖進步趨勢會非常直觀。第二個方向是引入訓練周期和周計劃。你可以為每周設(shè)置訓練目標比如“本周臥推目標 85kg × 5”完成自動打勾。第三個方向是支持數(shù)據(jù)導出導入。把 localStorage 中的數(shù)據(jù)導出為 JSON 文件換設(shè)備時再導入解決數(shù)據(jù)遷移問題。第四個方向是加入 RPE 自評讓訓練者記錄主觀疲勞度從而更準確判斷狀態(tài)調(diào)整計劃。我建議你先把當前版本用起來記錄兩周真實訓練數(shù)據(jù)感受一下數(shù)據(jù)回看帶來的節(jié)奏感。等積累了一些記錄再回頭思考缺少什么功能然后動手改代碼。工具的價值不在代碼量而在堅持使用。如果你在復現(xiàn)過程中遇到其他問題歡迎在評論區(qū)交流。訓練要持續(xù)記錄代碼也要持續(xù)迭代下一版見。