当前位置:首页 > JavaScript

js实现Bmi计算

2026-03-15 22:05:28JavaScript

计算BMI的公式

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

实现步骤

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

<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并显示结果:

js实现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实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

利用js实现

利用js实现

使用 JavaScript 实现 在 JavaScript 中,可以通过多种方式实现功能,具体取决于需求。以下是几种常见的方法: 方法一:使用原生 JavaScript // 示例代码…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…