当前位置:首页 > JavaScript

js实现Bmi计算

2026-03-15 22:05:28JavaScript

计算BMI的公式

BMI(Body Mass Index)的计算公式为:
$$ BMI = \frac{weight(kg)}{height(m)^2} $$

js实现Bmi计算

实现步骤

HTML部分
创建一个简单的表单,用于输入体重(kg)和身高(cm),并显示计算结果:

js实现Bmi计算

<form id="bmiForm">
  <label for="weight">体重 (kg):</label>
  <input type="number" id="weight" step="0.1" required>

  <label for="height">身高 (cm):</label>
  <input type="number" id="height" step="0.1" required>

  <button type="submit">计算BMI</button>
</form>

<div id="result"></div>

JavaScript部分
监听表单提交事件,计算BMI并显示结果:

document.getElementById('bmiForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const weight = parseFloat(document.getElementById('weight').value);
  const height = parseFloat(document.getElementById('height').value) / 100; // 转换为米

  const bmi = weight / (height * height);
  const resultElement = document.getElementById('result');

  let category;
  if (bmi < 18.5) {
    category = "偏瘦";
  } else if (bmi < 24) {
    category = "正常";
  } else if (bmi < 28) {
    category = "超重";
  } else {
    category = "肥胖";
  }

  resultElement.innerHTML = `BMI: ${bmi.toFixed(2)} (${category})`;
});

功能扩展

  • 可以添加输入验证,确保体重和身高为正数。
  • 支持国际化,根据地区切换单位(如磅和英寸)。
  • 可视化BMI范围图表,增强用户体验。

注意事项

  • 身高输入单位为厘米,计算时需要转换为米。
  • BMI仅作为粗略参考,实际健康评估需结合其他指标。

标签: jsBmi
分享给朋友:

相关文章

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…