CSS計算BMI
Body Mass Index（體重指數(shù)）是衡量身體胖瘦的一種方法。將體重除以身高的平方，就可以得到BMI指數(shù)。BMI指數(shù)在18.5到24.9之間屬于正常范圍，低于18.5為偏瘦，高于24.9為超重。
下面是使用CSS計算BMI的代碼：
<html>
<head>
<style>
.calc-BMI {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.calc-BMI label {
margin-right: 10px;
}
.calc-BMI input {
margin-right: 10px;
}
.calc-BMI button {
padding: 10px;
font-size: 16px;
}
.calc-BMI .result {
margin-top: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="calc-BMI">
<label for="weight">體重(kg):</label>
<input type="number" id="weight">
<label for="height">身高(m):</label>
<input type="number" id="height">
<button onclick="calcBMI()">計算BMI</button>
<div class="result"></div>
</div>
<script>
function calcBMI() {
var weight = document.getElementById("weight").value;
var height = document.getElementById("height").value;
var bmi = weight / (height * height);
document.querySelector(".result").innerText = "您的BMI是：" + bmi.toFixed(2);
}
</script>
</body>
</html>以上代碼通過flex布局使計算器居中，并使用input標(biāo)簽獲取體重和身高輸入值，使用button標(biāo)簽觸發(fā)計算BMI事件。最終使用文本節(jié)點顯示BMI值。
上一篇mysql多機強一致
下一篇css計算div高度