Bmi计算器在线_身材比例计算器

根据用户输入的身高和体重，计算出体重指数（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>

今天的文章Bmi计算器在线_身材比例计算器分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/89278.html