📅 最后修改于: 2023-12-03 14:49:41.572000 🧑 作者: Mango
本文将介绍如何使用 JavaScript 设计一个简单的 BMI（身体质量指数）计算器。BMI 是评估身体体重与身高之间关系的一种方法。计算公式为“体重（kg）÷ 身高（m）²”，可以判断一个人是否超重或肥胖。通过此计算器，用户可以输入自己的体重和身高，计算得出他们的 BMI 值。
首先，我们需要为我们的 BMI 计算器编写 HTML 代码。以下代码将创建一个输入框，要求用户输入体重（以千克为单位）和身高（以米为单位），还将创建一个按钮，用于触发计算。
<!DOCTYPE html>
<html>
<head>
<title>BMI 计算器</title>
</head>
<body>
<h1>输入体重和身高以计算你的 BMI</h1>
<form>
<div>
<label for="weight">体重（kg）：</label>
<input type="text" id="weight" name="weight">
</div>
<div>
<label for="height">身高（m）：</label>
<input type="text" id="height" name="height">
</div>
<button type="button" onclick="calculateBMI()">计算</button>
</form>
<div id="result"></div>
<script src="app.js"></script>
</body>
</html>
需要注意的是，我们为计算按钮添加了一个 onclick 事件，该事件将调用一个名为 calculateBMI 的函数。我们稍后会在 JavaScript 中定义这个函数。
接下来，我们需要编写与我们的 HTML 代码一起工作的 JavaScript 代码。我们将创建一个名为 calculateBMI 的函数，该函数将从输入框中获取体重和身高值，并计算BMI。计算完成后，将在页面上显示结果。以下是完整的 app.js 代码：
function calculateBMI() {
// 从 HTML 中获取输入框的值
var weightElement = document.getElementById("weight");
var heightElement = document.getElementById("height");
var weight = parseFloat(weightElement.value);
var height = parseFloat(heightElement.value);
// 检查输入是否有效
if (isNaN(weight) || isNaN(height)) {
document.getElementById("result").innerHTML =
"<strong>请提供有效的数字。</strong>";
return;
}
// 计算 BMI，并确定所在范围
var bmi = weight / (height * height);
var category;
if (bmi < 18.5) {
category = "偏瘦";
} else if (bmi < 24.9) {
category = "正常";
} else if (bmi < 29.9) {
category = "偏胖";
} else {
category = "肥胖";
}
// 在页面上显示结果
var resultString = "你的 BMI 是 " + bmi.toFixed(1) + "，属于" + category + "范围。";
document.getElementById("result").innerHTML = resultString;
}
如上所述，calculateBMI 函数将分为三个部分。首先，从 HTML 中获取输入框的值，并将它们转换为数字类型。如果输入无效，函数将显示错误消息，并退出。如果输入有效，函数将继续计算 BMI 值，然后确定它所在的范围。
最后，函数将构建一个结果字符串，根据所得的 BMI 值和范围，在页面上显示结果。结果将显示在 HTML 文件中名为 result 的 div 中。
通过使用上述 HTML 和 JavaScript 代码，我们已经创建了一个简单的 BMI 计算器。用户可以输入他们的体重和身高，计算器将计算他们的 BMI 值，并确定它所属于的范围。此计算器可以扩展以包括更多功能（例如使用图表来显示不同用户的 BMI 范围分布）。