用原生 JavaScript 实现一个基础代谢率（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[name="gender"]: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 class="history-panel"> <summary>历史记录</summary> <div id="historyList"></div> </details>四、在线体验
如果你正好需要算一下自己的基础代谢率，可以直接用下面这个在线版本，纯前端计算，数据不上传：
在线体验：zyftools.com/tools/bmr-calculator.html
或者如果你也想做一个类似的工具，上面的代码基本可以直接复用。公式简单，但做成交互友好的小工具，体验提升还是挺明显的。
五、总结
这个小项目本身技术难度不高，但把"一个公式"做成"一个好用的工具"，中间差的其实是用户体验：表单怎么排、错误怎么提示、结果怎么展示、历史怎么管理。做个人工具站的过程，也是不断打磨这些细节的过程。
有类似想法的朋友，不妨从这种"小而精"的工具入手，既能解决自己的实际需求，也能积累可复用的前端组件。
本文仅作技术分享，BMR 计算结果仅供参考，具体饮食计划建议咨询专业营养师。