使用JavaScript实现简易BMI计算器
作者:青柠时间:2026-10-30 12:19:50浏览:245
本文介绍如何利用JavaScript编写一个简易的BMI(身体质量指数)计算器。通过定义获取BMI和理想体重的函数,结合HTML表单交互,实现身高、体重数据的输入与计算结果展示,帮助开发者快速掌握基础的前端逻辑处理。
BMI计算器实现概述
前言
BMI指数(Body Mass Index)是国际通用的衡量人体胖瘦程度及健康状况的标准。在评估不同身高人群体重对健康的影响时,BMI值是一个中立且可靠的参考指标。本文将演示如何使用JavaScript构建一个BMI计算工具,具体内容如下。
以下直接展示核心实现代码。
核心代码实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>BMI计算器</title>
</head>
<head>
<script>
var BMI={};
BMI.getBMI=function(a,b){
var bmi=b/((a/100)*(a/100));
return bmi;
};
BMI.idealweight=function(a){
var x=(a-100)*0.9;
return x;
};
function Cal(form){
var a=eval(form.height.value);
var b=eval(form.weight.value);
var bmi=eval(form.BMI.value);
var bmiValue =BMI.getBMI(a,b);
BMI.disp_alert(bmiValue );
form.IW.value=BMI.idealweight(a);
form.BMI.value= bmiValue ;
}
BMI.disp_alert = function(bmi){
if (bmi < 18.5)
{
alert("你的体重太轻,要多吃点哟!");
}
else if (bmi >= 18.5 && bmi < 25)
{
alert("亲,你的体重正常,要继续保持哟!");
}
else if (bmi >= 25 && bmi< 30)
{
alert("亲,您的体重过重,要减肥了!");
}
else
{
alert("亲,你确实要减肥了!");
}
}
</script>
</head>
<body>
<form method=post>
你的身高(cm):<input type="text" name="height"><br>
<br/>
你的体重(kg):<input type="text" name="weight"><br>
<br/>
<input type="button" value="开始计算" onclick="Cal(this.form)">
<br/>
<br/>
你的理想体重:<input type="text" name="IW"><br/>
<br/>
您的BMI:<input type="text" name="BMI">
</form>
</body>
</html>
总结
上述内容即为使用JavaScript实现BMI计算器的完整过程。该示例结构简洁,感兴趣的用户可以尝试动手实践,以加深对JavaScript基础应用的理解。
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
