用原生 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与感知优化：解决点云动态重建中的千层饼问题

实验报告

更多资讯

2025年AI辅助写作工具全解析与应用指南

MNN 仓库内置 Protocol Buffers 3.19.0 实践指南：protoc 安装、C++ 运行时构建与模型转换器集成

基于MOPSO的冷热电联供系统多目标优化实践

TensorFlow 2.x实战：从入门到生产部署全指南

DBViewer：浏览器内运行的轻量级数据库工作台

多目标跟踪算法JPDA与PDA在杂波环境下的性能对比

今日更新

51单片机开环控制磁阻传感器的硬件匹配与代码实现

AI Agent安全操作数据库：SQL注入防御与参数化查询实战

Android逆向实战：还原激励类App签到接口的签名算法

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

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