最近在做个人工具站顺手写了一个基础代谢率BMR计算器。功能不复杂但做下来发现有几个细节值得记录一下分享给有同样需求的朋友。一、需求背景基础代谢率Basal Metabolic Rate是指人体在静息状态下维持生命所需的最低热量消耗。减脂或增肌时知道自己每天该吃多少热量比盲目节食重要得多。常用的计算公式是Mifflin-St Jeor美国营养与饮食学会推荐比早期的 Harris-Benedict 公式对现代人群更准// 男性 BMR (10 * 体重kg) (6.25 * 身高cm) - (5 * 年龄) 5 // 女性 BMR (10 * 体重kg) (6.25 * 身高cm) - (5 * 年龄) - 161算出 BMR 后再乘以活动系数得到 TDEE每日总消耗然后根据个人目标减脂/维持/增肌调整热量摄入。二、技术方案整个工具纯前端实现无后端依赖打开网页就能用HTML CSS表单布局、响应式、深色模式切换原生 JavaScript公式计算、表单验证、结果渲染localStorage保存最近 10 条计算历史方便对比核心计算逻辑不到 30 行function calculateBMR() { const gender document.querySelector(input[namegender]:checked).value; const age parseFloat(document.getElementById(age).value); const height parseFloat(document.getElementById(height).value); const weight parseFloat(document.getElementById(weight).value); const activity parseFloat(document.getElementById(activity).value); if (!age || !height || !weight) { alert(请填写完整信息); return; } let bmr; if (gender male) { bmr (10 * weight) (6.25 * height) - (5 * age) 5; } else { bmr (10 * weight) (6.25 * height) - (5 * age) - 161; } bmr Math.round(bmr); const tdee Math.round(bmr * activity); // 减脂期: -500, 维持期: 0, 增肌期: 300 renderResults({ bmr, tdee, loss: tdee - 500, maintain: tdee, gain: tdee 300 }); }三、几个实现细节1. 表单布局优化早期把性别、年龄、身高、体重各放一行PC 端右侧留白太多。后来改成两列并排性别年龄一行身高体重一行活动水平独占一行视觉上更紧凑.form-row-half { display: flex; gap: 16px; } .form-row-half .form-row { flex: 1; }2. 深色模式用 CSS 变量 data-theme属性实现通过localStorage记住用户偏好刷新页面不丢失const savedTheme localStorage.getItem(theme); if (savedTheme) document.documentElement.setAttribute(data-theme, savedTheme);3. 历史记录用details标签做折叠面板默认收起不占用空间展开后显示最近 10 条记录。details是原生 HTML5 标签内容对搜索引擎完全可见不影响 SEO。details classhistory-panel summary历史记录/summary div idhistoryList/div /details四、在线体验如果你正好需要算一下自己的基础代谢率可以直接用下面这个在线版本纯前端计算数据不上传在线体验zyftools.com/tools/bmr-calculator.html或者如果你也想做一个类似的工具上面的代码基本可以直接复用。公式简单但做成交互友好的小工具体验提升还是挺明显的。五、总结这个小项目本身技术难度不高但把一个公式做成一个好用的工具中间差的其实是用户体验表单怎么排、错误怎么提示、结果怎么展示、历史怎么管理。做个人工具站的过程也是不断打磨这些细节的过程。有类似想法的朋友不妨从这种小而精的工具入手既能解决自己的实际需求也能积累可复用的前端组件。本文仅作技术分享BMR 计算结果仅供参考具体饮食计划建议咨询专业营养师。
最近在做个人工具站顺手写了一个基础代谢率BMR计算器。功能不复杂但做下来发现有几个细节值得记录一下分享给有同样需求的朋友。一、需求背景基础代谢率Basal Metabolic Rate是指人体在静息状态下维持生命所需的最低热量消耗。减脂或增肌时知道自己每天该吃多少热量比盲目节食重要得多。常用的计算公式是Mifflin-St Jeor美国营养与饮食学会推荐比早期的 Harris-Benedict 公式对现代人群更准// 男性 BMR (10 * 体重kg) (6.25 * 身高cm) - (5 * 年龄) 5 // 女性 BMR (10 * 体重kg) (6.25 * 身高cm) - (5 * 年龄) - 161算出 BMR 后再乘以活动系数得到 TDEE每日总消耗然后根据个人目标减脂/维持/增肌调整热量摄入。二、技术方案整个工具纯前端实现无后端依赖打开网页就能用HTML CSS表单布局、响应式、深色模式切换原生 JavaScript公式计算、表单验证、结果渲染localStorage保存最近 10 条计算历史方便对比核心计算逻辑不到 30 行function calculateBMR() { const gender document.querySelector(input[namegender]:checked).value; const age parseFloat(document.getElementById(age).value); const height parseFloat(document.getElementById(height).value); const weight parseFloat(document.getElementById(weight).value); const activity parseFloat(document.getElementById(activity).value); if (!age || !height || !weight) { alert(请填写完整信息); return; } let bmr; if (gender male) { bmr (10 * weight) (6.25 * height) - (5 * age) 5; } else { bmr (10 * weight) (6.25 * height) - (5 * age) - 161; } bmr Math.round(bmr); const tdee Math.round(bmr * activity); // 减脂期: -500, 维持期: 0, 增肌期: 300 renderResults({ bmr, tdee, loss: tdee - 500, maintain: tdee, gain: tdee 300 }); }三、几个实现细节1. 表单布局优化早期把性别、年龄、身高、体重各放一行PC 端右侧留白太多。后来改成两列并排性别年龄一行身高体重一行活动水平独占一行视觉上更紧凑.form-row-half { display: flex; gap: 16px; } .form-row-half .form-row { flex: 1; }2. 深色模式用 CSS 变量 data-theme属性实现通过localStorage记住用户偏好刷新页面不丢失const savedTheme localStorage.getItem(theme); if (savedTheme) document.documentElement.setAttribute(data-theme, savedTheme);3. 历史记录用details标签做折叠面板默认收起不占用空间展开后显示最近 10 条记录。details是原生 HTML5 标签内容对搜索引擎完全可见不影响 SEO。details classhistory-panel summary历史记录/summary div idhistoryList/div /details四、在线体验如果你正好需要算一下自己的基础代谢率可以直接用下面这个在线版本纯前端计算数据不上传在线体验zyftools.com/tools/bmr-calculator.html或者如果你也想做一个类似的工具上面的代码基本可以直接复用。公式简单但做成交互友好的小工具体验提升还是挺明显的。五、总结这个小项目本身技术难度不高但把一个公式做成一个好用的工具中间差的其实是用户体验表单怎么排、错误怎么提示、结果怎么展示、历史怎么管理。做个人工具站的过程也是不断打磨这些细节的过程。有类似想法的朋友不妨从这种小而精的工具入手既能解决自己的实际需求也能积累可复用的前端组件。本文仅作技术分享BMR 计算结果仅供参考具体饮食计划建议咨询专业营养师。
