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