BMI คือ ค่าดัชนีมวลกาย (Body Mass Index)
ค่าดัชนีมวลกาย (Body Mass Index) สามารถคำนวณได้จาก น้ำหนักตัว (กิโลกรัม) หารด้วยส่วนสูง (เมตร) แล้วยกกำลัง 2 ซึ่งสูตรนี้สามารถใช้ได้ทั้งผู้หญิงและผู้ชาย สรุปได้ว่าการหาค่า BMI คือ การเช็คตัวเองแบบพื้นฐานว่าเราเสี่ยงเป็นโรคอ้วนหรือไม่นั่นเอง
ซึ่งโปรแกรมนี้จะนำข้อมูลที่คำนวณได้มาแสดงผลเป็นภาพมิเตอร์ ด้วย RGraph
ทดสอบงานสำเร็จ
Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 1/3 Include the library gauge meter-->
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.meter.js"></script>
<!-- <script src="https://www.rgraph.net/libraries/RGraph.gauge.js"></script> -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Grape+Nuts&family=K2D:wght@300&display=swap');
*, *::before, *::after{
margin: 0;
padding: 0;
text-decoration: none;
font-family: 'K2D', cursive;
box-sizing: border-box;
}
#root, #__next {
isolation: isolate;
}
html, body {
min-height: 100%;
}
body{
line-height: 1.5;
-webkit-font-smoothing: antialiased;
margin: auto;
background-image: linear-gradient(120deg,#f0b501,#8e44ad);
font-family: 'K2D', cursive;
}
div.row{
margin: 1px;
font-family: 'K2D';
font-size: x-large;
}
input#body_weight, input#body_height{
font-family: 'K2D';
font-size: larger;
}
span#cc {
color: rgb(246, 246, 248);
text-align:center;
font-family: 'Audiowide', cursive;
}
div#meter {
margin: 0 auto;
padding-top: 5px;
height: 300px;
}
.msg{
padding-top: 15px;
padding-bottom: 15px;
background-color: black;
color: #0d0;
}
.block{
background: #f1f1f1;
border-radius: 15px;
width: 360px;
margin: 0 auto;
padding:10px;
top: 50%;
}
.rainbow {
position: relative;
z-index: 0;
border-radius: 10px;
overflow: hidden;
}
.rainbow::before {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#f18867, #f18867), linear-gradient(#e85f99, #e85f99), linear-gradient(#ffc400, #ffc400);
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.rainbow::after {
content: "";
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: rgb(8, 0, 0);
border-radius: 2px;
}
</style>
</head>
<body>
<div class="container-lg block mt-4">
<!-- 2/3 The canvas tag gauge meter(this is where the chart shows up) -->
<div class="rainbow" style="text-align:center;">
<div id="meter">
<canvas id="cvs" width="300" height="230">[No canvas support]</canvas>
<span class="my-auto" id="cc" style="font-size:2rem;">18.5</span>
</div>
</div>
<!-- form BMI -->
<div class="row">
<div id="msg" class="col-12 mt-2 text-center msg rainbow">
</div>
<div class="col-12 mt-2 text-center">
ส่วนสูง (Height)
</div>
<div class="col-7 col-auto">
<input class="form-control text-end" type="text" name="body_height" id="body_height"/>
</div>
<div class="col-5">
ซม. (cm.)
</div>
<div class="col-12 mt-3 text-center">
น้ำหนัก (Weight)
</div>
<div class="col-7 col-auto">
<input class="form-control text-end" type="text" name="body_weight" id="body_weight"/>
</div>
<div class="col-5">
กก. (kg.)
</div>
<div class="col-12 mt-3 mb-3 text-center">
<button class="btn btn-success " onclick="calbmi()">คำนวณ BMI</button> <button class="btn btn-warning" onclick="clearx();">ล้างข้อมูล</button>
</div>
</div>
</div>
<script id="rgraph-demo-source-code">
var BMI = 0
document.getElementById('cc').innerHTML=BMI.toFixed(2);
document.getElementById("msg").innerHTML= "โปรแกรมคำนวณดัชนีมวลกาย";
/** 3/3 This is the JavaScript code the creates the gauge meter */
defaultColors = [
[0,5,'#ff0'],
[5,10,'#ff0'],
[10,15,'#df0'],
[15,18.5,'#af3'],
[18.5,25,'#0c1'],
[25,30,'#fa0'],
[30,35,'#f80'],
[35,40,'#f50'],
[40,45,'#f30'],
[45,50,'#f20'],
];
// Create the Meter chart - it must be assigned to a variable in
// this case so that that variable can be used later.
meter = new RGraph.Meter({
id: 'cvs',
min: 0,
max: 50,
value: BMI,
options: {
marginLeft: 15,
marginRight: 15,
marginTop: 15,
marginBottom: 15,
// There's various configuration options here so that the Meter looks
// quite different to the default.
backgroundColor: 'black',
colorsRanges: defaultColors,
anglesStart: RGraph.PI -0.5,
anglesEnd: RGraph.TWOPI + 0.5,
centery: 150,
textSize: 14,
textColor: 'white',
textValign: 'center',
segmentsRadiusStart: 95,
border: 0,
tickmarksSmallCount: 0,
tickmarksLargeCount: 0,
needleRadius: 70,
needleColor: '#ddd',
needleHeadWidth: 0.1,
needleHeadLength: 20,
centerpinStroke: 'black',
centerpinFill: '#ddd'
}
}).draw();
/** BMI */
function calbmi()
{
var body_height=document.getElementById('body_height').value;
var body_weight= document.getElementById('body_weight').value;
if(body_height && body_weight>10)
{
BMI = body_weight/((body_height/100)*(body_height/100));
document.getElementById('cc').innerHTML=BMI.toFixed(2);
if(BMI.toFixed(2)<=18.5)
{
document.getElementById("msg").innerHTML= "คุณอยู่ในเกณฑ์ ผอมเกินไป";
}
else if(BMI.toFixed(2)>18.5 && BMI.toFixed(2)<=25)
{
document.getElementById("msg").innerHTML= "คุณอยู่ในเกณฑ์ น้ำหนักปกติ";
}
else if(BMI.toFixed(2)>25 && BMI.toFixed(2)<=30)
{
document.getElementById("msg").innerHTML= "คุณอยู่ในเกณฑ์ เริ่มอ้วน";
}
else if(BMI.toFixed(2)>30 && BMI.toFixed(2)<=35)
{
document.getElementById("msg").innerHTML= "คุณอยู่ในเกณฑ์ อ้วน";
}
else if(BMI.toFixed(2)>35)
{
document.getElementById("msg").innerHTML= "คุณอยู่ในเกณฑ์ อ้วนมากผิดปกติ";
}
}else{
document.getElementById("msg").innerHTML= "ข้อมูลไม่ถูกต้อง";
}
meter.value = BMI
meter.grow();
}
function clearx()
{
BMI = 0;
document.getElementById('cc').innerHTML=BMI.toFixed(2);
document.getElementById("body_weight").value= "";
document.getElementById("body_height").value= "";
document.getElementById("msg").innerHTML= "โปรแกรมคำนวณดัชนีมวลกาย";
meter.value = BMI
meter.grow();
}
</script>
</body>
</html>