用原生 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[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 计算结果仅供参考具体饮食计划建议咨询专业营养师。

用原生 JavaScript 实现一个基础代谢率（BMR）在线计算器：从公式到落地

相关推荐

SAP PS/SD 集成配置：3步实现VL01N基于销售订单的项目交货

非刚性ICP与感知优化：解决点云动态重建中的千层饼问题

实验报告

更多资讯

没有电工证配电间合闸实操考试考什么？网上查询合格标准太关键了

花都低压电工证去哪考上岗必备这些坑别踩

之前考的证在外省能不能转过来？朱昌顺低压电工证值不值得考

厦门复审电工证怎么考？2026河南最新政策你知道吗？

厦门复审电工证值不值得考？证书过期了不知道怎么复审延期？手把手教你

廊坊电工证复审在哪里在哪考？实操考试心里没底怕挂科？这篇讲透

今日更新

西昌市电工作业查询怎么查？郑州报考避坑指南帮你少走弯路

西昌市电工作业查询通过率揭秘：怕考不过白交培训费？这几点要记牢

临夏电工证在哪里审官方报名入口怎么找

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？