글
BMI 계산하기
안녕하세요?
오늘은 BMI즉 비만도 계산하는 소스입니다. 비만도는 체중을 키로 나눈값입니다. 이게 높으면 비만이지요. 정상은 20-24인가 그렇습니다. 그럼 소스를 보시죠.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function bmi() {
var w = parseFloat(document.frm.txtWeight.value);
var h = parseInt(document.frm.txtHeight.value);
var errors='';
if (document.frm.opHeight.value == "Inch") {h = h * 2.54;}
if (document.frm.opWeight.value == "Lb") {w = w * 0.4536;}
if ((w < 20)||(w > 200)||isNaN(w)){errors+='몸무게를 정확히 입력하세요.\n';}
if ((h < 100) || (h > 250)||isNaN(h)){errors+='키를 정확히 입력하세요.\n';}
if (errors){
alert(errors);
return 0;}
document.getElementById('feedback').innerHTML = 'Your BMI is ' + Math.round(10*((w * 10000 / (h * h))))/10;
}
function resetAll(){
document.getElementById('feedback').innerHTML="";
return true;
}
</script>
</head>
<body>
<form name="frm" id="cal_frm" style="width:300px; margin:10px 10px 20px 10px;" onsubmit="return false">
<table id="cal_data">
<tr>
<td style="padding-left:5px;">키:</td>
<td><input class="cal_text" type="text" name="txtHeight" ></td>
<td><select class="cal_option" name="opHeight">
<option value="Cm">Cm</option>
<option value="Inch">Inch</option>
</select>
</td>
</tr>
<tr>
<td style="padding-left:5px;">몸무게:</td>
<td><input class="cal_text" type="text" name="txtWeight" ></td>
<td><select class="cal_option" name="opWeight">
<option value="Kg">Kg</option>
<option value="Lb">Pound</option>
</select>
</td>
</tr>
<tr><td colspan="3" id="feedback" style="padding:10px 0 20px 0; border:none; font-weight:600; color:#555555; font-family:tahoma;"></td></tr>
<tr>
<td colspan="2" style="border:none; padding-bottom:10px;">
</td>
</tr>
</table>
</form>
<h2>BMI for adult:</h2>
<div style="width:100%;">
<table border="1px" width="350px;" cellpadding="2px" style="font-size:12px; border-collapse:collapse; border-color:Gray; background-color:White;">
<tr>
<td style="padding-left:10px;" ><b>BMI</b></td>
<td style="padding-left:10px;"><b>상태</b></td>
</tr>
<tr>
<td style="padding-left:10px;">18.5밑으로</td>
<td style="padding-left:10px;">저체중(밥좀많이드삼)</td>
</tr>
<tr>
<td style="padding-left:10px;">18.5 ~ 24.9</td>
<td style="padding-left:10px;">표준</td>
</tr>
<tr>
<td style="padding-left:10px;">25 ~ 29.9</td>
<td style="padding-left:10px;">비만위험(운동 열심히 하세요)</td>
</tr>
<tr>
<td style="padding-left:10px;">30.0 또는 이상</td>
<td style="padding-left:10px;">비만입니다.(살 안빼면 수명단축됩니다.)</td>
</tr>
</table>
</div>
</body>
</html>
어려운거 같지만 따져보면 그렇게 어렵지도 않습니다.
<input onclick="bmi()" class="cal_button" type="button" value="계산" > <input onclick="resetAll()" type="reset" value="다시입력" class="cal_button" >
로 계산 버튼을 누르면 bmi함수를 호출하고 다시입력버튼을 누르면 resetAll함수를 호출합니다.
function bmi() {
var w = parseFloat(document.frm.txtWeight.value);
var h = parseInt(document.frm.txtHeight.value);
var errors='';
if (document.frm.opHeight.value == "Inch") {h = h * 2.54;}
if (document.frm.opWeight.value == "Lb") {w = w * 0.4536;}
if ((w < 20)||(w > 200)||isNaN(w)){errors+='몸무게를 정확히 입력하세요.\n';}
if ((h < 100) || (h > 250)||isNaN(h)){errors+='키를 정확히 입력하세요.\n';}
if (errors){
alert(errors);
return 0;}
document.getElementById('feedback').innerHTML = 'Your BMI is ' + Math.round(10*((w * 10000 / (h * h))))/10;
}
bmi함순데요. w,h는 폼에 텍스트박스에 값을 parseint, parseFloat해서 숫자로 변환시킵니다. int는 정수형, Float은 실수형이죠. 그다음에 값변환을 하지요. value값이 inch이면 h키에다가 2.54를 곱하고 체중값이 Lb파운드면 체중에다가 0.4536을 곱합니다. 그다음에 체중이 너무 작거나 크거나 키가 너무 작거나 크면 에러를 출력합니다. 그리고 ,BMI를 계산하지요. Math.round즉 반올림하라는 거지요. w/(h*h)에 다가 10000을 곱한게 BMI입니다.
이상 이해가 가시는지요? 실행은 직접 해보시기 바랍니다. 그럼 다음시간에 또 만나요~
'Java Script' 카테고리의 다른 글
| 체크해야 입력할수 있는 폼 (0) | 2011.12.29 |
|---|---|
| 비밀번호 보이기 /숨기기 (0) | 2011.12.25 |
| 지정한 시간 후에 함수 실행 (0) | 2011.12.18 |
| F1누르면 도움말 불러오기 (0) | 2011.12.13 |
| 버튼을 누르면 사이트로 이동 (0) | 2011.10.14 |
