Bài viết này sẽ giúp bạn tìm hiểu về chỉ số BMI và cách tính chỉ số BMI, cách làm trang tính BMI và bạn có thể tự tính BMI cho mình và cho mọi người.
Chỉ số bmi là gì?
Chỉ số BMI (Body Mass Index) là một phép đo được sử dụng rộng rãi để đánh giá mức độ cân nặng của một người dựa trên chiều cao và cân nặng của họ. Công thức tính BMI là cân nặng (kg) chia cho bình phương của chiều cao (m).
Để tính chỉ số BMI bạn cần làm theo các bước sau:
Để tính chỉ số BMI (Body Mass Index), bạn cần làm theo các bước sau:
- Đo lường cân nặng của bạn: Sử dụng cân đo lường để xác định cân nặng của bạn. Cân nặng thường được đo bằng kilogram (kg).
- Đo lường chiều cao của bạn: Sử dụng thước đo hoặc cân chỉ chiều cao để xác định chiều cao của bạn. Chiều cao thường được đo bằng mét (m).
- Áp dụng công thức BMI: Sử dụng công thức sau để tính toán chỉ số BMI: Trọng lượng (kg) / Bình phương chiều cao (cm)
- Tính toán chỉ số BMI: Thực hiện phép tính bằng cách chia cân nặng của bạn cho bình phương của chiều cao của bạn.
- Phân loại chỉ số BMI: Dựa trên kết quả thu được, phân loại chỉ số BMI của bạn vào một trong các phạm vi sau:
- Dưới 18.5: Thiếu cân
- Từ 18.5 đến 24.9: Cân nặng bình thường
- Từ 25.0 đến 29.9: Thừa cân
- Từ 30.0 trở lên: Béo phì
- Đánh giá kết quả: Dựa trên phân loại, đánh giá xem chỉ số BMI của bạn có nằm trong phạm vi nào và có cần áp dụng biện pháp nào để duy trì hoặc cải thiện sức khỏe của bạn không.
Tính chỉ số bmi của bạn
Mã nguồn tham khảo cho việc tính chỉ số BMI:
Xem mã nguồn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<style>
/* Import Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
/*
Define CSS variables for colors
*/
:root {
--background-color: #f6f6f6;
--vigo-color: #f09831;
--slider-color: #A3A3A3;
--input-number-color: #EBEBEB;
}
/* Prepare your work table. 😎 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-left: 0.2em;
margin-right: 0.2em;
margin-bottom: 0.9em;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: var(--background-color);
color: black;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Roboto', sans-serif;
}
.bmi-calculator {
border: 5px solid white;
-moz-box-shadow: 0px 0px 5px hsl(15, 2%, 55%);
-webkit-box-shadow: 0px 0px 5px hsl(15, 2%, 55%);
box-shadow: 0px 0px 10px hsl(0,0%,73.9%);
padding: 3em;
margin: 2em;
height: 520px;
background-color: white;
}
.bmi-calculator-weight, .bmi-calculator-height {
margin-bottom: 2.2em;
width: 100%;
}
.weight-slider, .height-slider {
width: 100%;
height: 1px;
border-radius: 10px;
background: var(--slider-color); /* Light grey background. */
outline: none; /* Remove outline. */
}
/* DEFINE STYLING FOR INPUT RANGE SLIDERS & INPUT TYPE NUMBER FOR BROWSER COMPATIBILITY */
input[type=range] {
-moz-appearance: none; /* Override default CSS styles */
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
}
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2.5px solid var(--vigo-color);
height: 20px;
width: 20px;
border-radius: 40px;
background: white;
cursor: pointer;
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
border: 2.5px solid var(--vigo-color);
height: 20px;
width: 20px;
border-radius: 40px;
background: white;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
border: 2.5px solid var(--vigo-color);
height: 20px;
width: 20px;
border-radius: 40px;
background: white;
cursor: pointer;
}
/* INPUT TYPE NUMBER STYLING */
input[type=number] {
-moz-appearance: none; /* Override default CSS styles */
-webkit-appearance: none;
cursor: pointer;
background: var(--input-number-color);
border-style: none;
height: 30px;
width: 60px;
margin-left: 20px;
margin-right: 10px;
text-align: right;
font-family: 'Roboto', sans-serif;
font-size: 1.5em;
}
input[type=number]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
/*
Styling for "Calculate" button
*/
.gumb {
text-align: center;
font-size: 1em;
color: white;
width: 100%;
margin-bottom: 10px;
padding: 11px 32px;
border: none;
background-color: var(--vigo-color);
text-transform: uppercase;
cursor: pointer;
}
/*
Media querie for iPhone 5
*/
@media only screen and (max-width: 325px) {
.bmi-calculator {
height: 560px;
}
h1 {
font-size: 1.5em;
}
}
</style>
</head>
<body>
<form name="bmiForm">
<div class="bmi-calculator">
<h1 style="margin-bottom: 1em;">Tính chỉ số BMI</h1>
<div class="bmi-calculator-weight">
<input class="weight-slider" name="realweight" id="myWeight" type="range" min="25" max="180" value="60"/>
<p style="margin-top: 1.8em;">
Cân nặng:
<input name="Cannang" id="inputWeight" type="number" value="60" min="25" max="180" oninput="showValWeight(this.value)"/>
<span id="weight"></span> kg
</p>
</div>
<div class="bmi-calculator-height">
<input class="height-slider" name="realheight" id="myHeight" type="range" min="100" max="220" value="160">
<p style="margin-top: 1.8em;">
Chiều cao:
<input name="Chieucao" id="inputHeight" type="number" value="160" min="100" max="220" oninput="showValHeight(this.value)"/>
<span id="height"></span> cm
</p>
</div>
<input class="gumb" type="button" value="Calculate" onclick="calculateBmi()" style="margin-top: 0.5em">
<p style="margin-top: 1em;font-size: 1.2em;">
<strong>Kết quả:</strong>
<span id="yourbmi" style="font-size: 1.2em;margin-left: 8px;"></span>
</p>
<p></p>
<p>
<span id="evaluationMessage"></span>
</p>
</div>
</form>
<script>
'use strict';
// Define variables for range sliders
// Weight variables
var weightSlider = document.getElementById("myWeight");
var weightOutput = document.getElementById("inputWeight");
// Height variables
var heightSlider = document.getElementById("myHeight");
var heightOutput = document.getElementById("inputHeight");
// Display slider value
weightOutput.innerHTML = weightSlider.value;
heightOutput.innerHTML = heightSlider.value;
// Update sliders in real time while dragging it
weightSlider.oninput = function () {
weightOutput.innerHTML = this.value;
}
heightSlider.oninput = function () {
heightOutput.innerHTML = this.value;
}
// Change weight-slider value on weight-number input
function showValWeight(newVal) {
weightSlider.value=newVal;
};
// Change height-slider value on height-number input
function showValHeight(newVal) {
heightSlider.value=newVal;
};
// *** Change number input when dragging slider ***
// Add 2 eventListeners for weight and input sliders
weightSlider.addEventListener("input", updateValueWeight);
heightSlider.addEventListener("input", updateValueHeight);
function updateValueWeight(e) {
weightOutput.value = e.srcElement.value;
}
function updateValueHeight(e) {
heightOutput.value = e.srcElement.value;
}
// Calculate BMI
function calculateBmi() {
var weight = document.bmiForm.realweight.value;
var height = (document.bmiForm.realheight.value)/100;
var realbmi = (weight)/Math.pow(height, 2);
var realbmiOutput = document.getElementById("yourbmi");
var messageOutput = document.getElementById("evaluationMessage");
var roundedBmi = realbmi.toFixed(1);
messageOutput.innerHTML = ""; // Clear message before calculating new BMI
realbmiOutput.innerHTML = " " + roundedBmi; // Print BMI
// Appropriate message for your BMI rating
if (roundedBmi < 18.5) {
messageOutput.innerHTML = "Gầy";
} else if (roundedBmi >= 18.5 && roundedBmi < 24.9) {
messageOutput.innerHTML = "Bình thường";
} else if (roundedBmi >= 24.9 && roundedBmi < 29.9) {
messageOutput.innerHTML = "Thừa cân";
} else {
messageOutput.innerHTML = "Béo phì";
}
// Console loggings
console.log('Cân nặng: ' + weight + " kg");
console.log('Chiều cao: ' + height + " m");
console.log('BMI: ' + realbmi);
}
</script>
</body>
</html>