<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BMI</title>
<link rel="stylesheet" href="bmi.css">
</head>
<body>
<div id="top"></div>
<div id="middle">
<div id="left">
<h1>免费计算你的身体质量指数 (BMI)</h1>
<div>
<label for="">身高：</label>
<input type="text" placeholder="请输入您的身高" id="height"> M
</div>
<div>
<label for="">体重：</label>
<input type="text" placeholder="请输入您的体重" id="weight"> KG
</div>
<div>
<input type="checkbox">
<span>自动保存您的记录</span>
</div>
<div>
<input type="button" value="计算BMI" id="commit">
</div>
</div>
<div id="right">
<ul>
<li><span>分类</span><span>BMI范围</span></li>
<li><span>偏瘦</span><span><=18.4</span></li>
<li><span>正常</span><span>18.5~23.9</span></li>
<li><span>过重</span><span>24.0~27.9</span></li>
<li><span>肥胖</span><span>>=28.0</span></li>
</ul>
</div>
</div>
<div id="foot"></div>
</body>
<script src="bmi.js"></script>
<!-- js的代码必须写在 script 标签的内部 -->
<script>
// 获取到 button
var btn = document.getElementById("commit");
// 绑定事件
btn.onclick = function (){
// 获取输入的身高和体重信息
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
// 法1：注重结果
// BMI(weight, height);
// 法2：注重过程
alert(BMI2(weight, height));
}
</script>
</html>
1.bmi.css
body,ul {
margin:0;padding: 0;
}
ul {
list-style: none;
}
#top { height: 100px;background-color: skyblue; }
#middle {
1000px; margin:20px auto;height: 400px;
}
#left {
float: left;550px;
}
#left div {
padding:15px;
}
#right {
float: right; 400px;
}
#right ul {
margin-top: 70px;
}
#right ul li {
padding: 10px 0;
}
#foot {
1000px; margin:20px auto; border-top: 1px solid #ccc;
}
2.bmi.js
// 法1：注重结果
function BMI (w, h) {
// 计算BMI指数
var bmi = w/(h*h);
// 判断指数的情况
if (bmi <= 18.4) {
alert("瘦");
} else if (bmi > 18.4 && bmi <= 23.9) {
alert("正");
} else if (bmi > 23.9 && bmi <= 27.9) {
alert("重");
} else {
alert("肥");
}
}
// 法2：注重过程
function BMI2 (w, h) {
// 计算BMI指数
var bmi = w/(h*h);
var r = null;
// 判断指数的情况
if (bmi <= 18.4) {
r = "瘦";
} else if (bmi > 18.4 && bmi <= 23.9) {
r = "正";
} else if (bmi > 23.9 && bmi <= 27.9) {
r = "重";
} else {
r = "肥";
}
return r;
}