用HTML+JavaScript实现可交互卡路里统计页：通过<input type="number">限定数字输入，硬编码合理MET值（如跑步9.8、快走4.3），监听input事件实时计算calories = met × weight × duration / 60，用parseFloat()容错、Math.round()取整，并添加inputmode="decimal"与键盘拦截保障移动端输入准确。
怎么用 HTML + JavaScript 实现可交互的卡路里统计页
纯 HTML 做不了动态计算，必须配合 JavaScript；但不需要框架，原生就能搞定。核心是让用户输入体重、活动类型、时长，实时算出消耗值——重点不在“页面多好看”，而在“数值是否合理、输入是否防错、单位是否明确”。
常见错误：直接套用网上千篇一律的「MET 值 × 体重 × 时间」公式，却忽略 MET 值本身有范围（比如跑步 MET 是 7–12），也没做输入校验，用户输个 -5 或 abc 就算出负数卡路里。
- 用
<input type="number">限定数字输入，并加min="30" max="200"控制体重合理区间 - MET 值按活动分类硬编码成对象，不查表、不联网，避免加载失败导致计算中断
- 时间统一用分钟，避免用户混淆「小时/分钟」导致结果差 60 倍
- 计算公式用
calories = metValue * weightKg * durationMin / 60（标准 Harris-Benedict 衍生式，单位一致）
怎么选 MET 值才不至于偏差太大
MET（Metabolic Equivalent of Task）是相对静息代谢的倍数，不是固定值。比如「快走」官方给的是 3.5–6.0，但实际取决于坡度、速度、心率。做统计页时，得在「简洁」和「可用」之间妥协：选一个典型中间值，再加文字说明。
例如："walking": 4.3 比写 4 或 5 更可信，且和 WHO 推荐的中等强度活动 MET=4–6 匹配。别用维基百科全量表——太多冷门项目（如「打槌球」MET=3.5），反而干扰用户。
立即学习“前端免费学习笔记（深入）”；
- 常用活动推荐 MET 值：
"cycling": 8.0,"swimming": 6.0,"running": 9.8,"yoga": 3.0 - 所有 MET 值保留一位小数，避免看起来像随意凑数
- 在下拉选项里加注释，比如
<option value="running">跑步（配速 6-7 km/h）</option>
为什么输入框要监听 input 而不是 change
change 只在失焦时触发，用户改完体重点一下别处才更新——体验断层；而 input 是每次按键都算，实时反馈更符合「统计工具」预期。但要注意性能：不用防抖，因为计算极轻；但得加空值/非法值兜底，否则 NaN 会直接显示在页面上。
- 对每个
<input>绑定addEventListener('input', updateCalories) - 函数开头立刻检查：
if (!weight || !duration || !activity) return; - 用
parseFloat()替代Number()，前者对"70.5kg"这类脏输入更宽容（截取前面数字） - 结果四舍五入到整数：
Math.round(calories)，没人关心「消耗了 298.37 千卡」
怎么让移动端输入不弹出字母键盘
iOS 和 Android 对 type="number" 支持不一致：iOS 弹出数字键盘但允许输入「e」「+」「-」；Android 部分机型仍弹全键盘。光靠 HTML 不够，得补一层 JS 校验。
- 给体重和时长输入框加
inputmode="decimal"（对支持的浏览器强制调数字键盘） - 监听
keydown，拦截非数字、小数点、退格键：if (!/[0-9.]/.test(e.key) && e.key !== 'Backspace') e.preventDefault(); - 额外过滤粘贴内容：
onpaste="this.value = this.value.replace(/[^0-9.]/g, '')"
这些细节堆起来，才能让一个看似简单的卡路里页，在真实手机上不卡、不崩、不算错——尤其当用户边健身边单手操作时，少一次误触，就少一次放弃。
