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