BMI计算器（BMI，Body Mass Index）

最新推荐文章于 2024-10-27 20:00:57 发布

花卷卷爱吃肉

最新推荐文章于 2024-10-27 20:00:57 发布

阅读量3.1k

点赞数 53

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.csdn.net/2301_76675652/article/details/134682380

本文介绍了如何使用JavaScript在前端实现一个简单的BMI计算器，用户输入身高和体重后，程序会计算BMI并根据结果给出健康建议，同时提供重置功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据用户输入的身高和体重，计算出体重指数（BMI，Body Mass Index），并且根据 BMI 值的大小给出相应的身体状况建议。

下面是这段代码的详细解析和说明：

1. 用户输入

用户在页面上输入一个身高和一个体重，并点击计算按钮。程序通过 document.getElementById 函数获取用户输入的身高和体重，并将身高和体重转换为数字类型，并存储到变量 height 和 weight 中。
let height = parseFloat(document.getElementById("height").value);
let weight = parseFloat(document.getElementById("weight").value);

2. 计算 BMI

根据用户输入的身高和体重，程序计算出体重指数（BMI，Body Mass Index），并将 BMI 的值存储到变量 prompt 中。
let prompt = weight / (height * height);

BMI 的计算公式为：
BMI = 体重（kg）/ 身高（m）的平方

3. 判断身体状况

根据 BMI 的大小，程序判断用户的身体状况，并给出相应的建议，通过调用 alert 函数弹出对话框。
if (prompt < 18) {
alert("过轻")
} else if (prompt >= 18 & prompt < 24) {
alert("正常")
} else if (prompt >= 24 & prompt < 28) {
alert("超重")
} else if (prompt >= 28 & prompt < 32) {
alert("肥胖")
} else if (32 <= prompt) {
alert("过度肥胖")
}

4. 显示 BMI 值

程序使用 getElementById 函数获取页面上一个 id 为 "prompt" 的元素，并将计算后的 BMI 值插入到该元素中。
document.getElementById("prompt").innerHTML = weight / (height * height).toFixed(2);

另外，使用了 toFixed 函数将 BMI 值保留两位小数。

5. 重置输入和结果

程序定义了一个 reset 函数，在用户点击“重置”按钮时调用该函数，可以清空用户输入的身高和体重，并且将页面上显示的 BMI 值清空。
function reset() {
document.getElementById("height").value = "";
document.getElementById("weight").value = "";
document.getElementById("prompt").innerHTML = "";
}

6. 页面显示

通过 HTML 代码，程序实现了一个文本框和两个按钮，分别用于输入身高、体重和计算、重置 BMI 值。同时，在页面上也显示了 BMI 值，并根据 BMI 值的大小给出身体状况建议。
<label for="height"></span></label>
<input id="height" type="number" min="0"><br>
<label for="weight">体重：</label>
<input id="weight" type="number" min="0">
<div class="input-field">
<button οnclick="cal()">计算</button>

<button οnclick="reset()">重置</button>

</div>
<div id="result">
<p>BMI: <span id="prompt"></span></p>
</div>

具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<head>
    <script>
        function cal() {
            let height = parseFloat(document.getElementById("height").value);
            let weight = parseFloat(document.getElementById("weight").value);
            let prompt = weight / (height * height);
            if (prompt < 18) {
                alert("过轻")
            }
            else if (prompt >= 18 & prompt < 24) {
                alert("正常")
            }
            else if (prompt >= 24 & prompt < 28) {
                alert("超重")
            }
            else if (prompt >= 28 & prompt < 32) {
                alert("肥胖")
            }
            else if (32 <= prompt) {
                alert("过度肥胖")
            }
            document.getElementById("prompt").innerHTML = weight / (height * height).toFixed(2);
        }
        function reset() {
            document.getElementById("height").value = "";
            document.getElementById("weight").value = "";
            document.getElementById("prompt").innerHTML = "";
        }
    </script>
</head>

<body style="line-height: 35px;text-align: center;">
    <label for="height">身高：</span></label>
    <input id="height" type="number" min="0"><br>
    <label for="weight">体重：</label>
    <input id="weight" type="number" min="0">
    <div class="input-field">
        <button onclick="cal()">计算</button>
        <button onclick="reset()">重置</button>
    </div>
    <div id="result">
        <p>BMI: <span id="prompt"></span></p>
    </div>
</body>

</html>