<html>
<head>
<title>해피CGI</title>
<style type="text/css">
#dhtmlgoodies_bmi_calculator{
margin-left:10px;
width:380px; /* Width of entire calculator */
height:400px; /* Height of entire calculator */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts to use */
}
#dhtmlgoodies_bmi_calculator .calculator_form{ /* Form */
width:170px; /* Width of form div */
float:left; /* Position the form at the left of the graph */
padding-left:5px;
padding-right:5px;
}
#dhtmlgoodies_bmi_calculator input{
width:130px;
}
#dhtmlgoodies_bmi_calculator .calculator_form .textInput{
width:40px; /* Width of small text inputs */
text-align:right; /* Right align input text */
}
#dhtmlgoodies_bmi_calculator .calculator_graph{
width:198px; /* Width of graph div */
float:left; /* Position bar graph at the left */
background-color:#DDD; /* Light gray background color */
border:1px solid #555; /* Gray border around graph */
height:100%;
position:relative;
}
.calculator_graph .graphLabels{ /* Help labels at the top of the graph */
background-color:#FFF; /* White bg */
padding:3px; /* Some air */
margin:2px; /* Around around help div */
border:1px solid #555; /* Gray border */
}
.graphLabels .square{ /* Small square showing BMI, e.g.: Below 18.5: Underweight */
height:12px; /* Width of square */
width:12px; /* Height of square */
border:1px solid #000; /* Black border */
margin:1px; /* "Air" */
float:left;
}
.graphLabels .label{ /* Help text, , e.g.: Below 18.5: Underweight */
width:130px; /* Width */
height:14px; /* Height */
font-size:11px; /* Font size */
padding-left:2px; /* Space at the left of label */
float:left;
}
.barContainer{ /* DIV for both the multicolor bar and users weight bar */
position:absolute;
bottom:0px;
border:1px solid #000;
border-bottom:0px;
text-align:center;
vertical-align:middle;
}
.barContainer div{ /* colored div inside "barContainer */
border-bottom:1px solid #000;
}
.barContainer .labelSpan{ /* Label indicating users BMI */
background-color:#FFF; /* White BG */
border:1px solid #000; /* Black border */
padding:1px; /* "Air" inside the box */
font-size:11px; /* Font size */
}
.clear{ /* Clearing div - you shouldn't do anything with this one */
clear:both;
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var useCm = true; // Using centimetre for height, false = inch
var useKg = true // Using kilos for weight, false = pounds
var graphColors = ['#6600CC','#66CC00','#00CCCC','#CC0000'];
var graphLabels = ['18.5 이하: 살좀더찌삼','18.5~24.9: 정상','25.0~29.9: 비만위험','30이상: 비만'];
var labelsPerRow = 1; /* Help labels above graph */
var barHeight = 300; // Total height of bar
var barWidth = 50; // Width of bars */
// Don't change anything below this point */
var calculatorObj;
var calculatorGraphObj;
var bmiArray = [0,18.5,25,30,60]; /* BMI VALUES */
var weightDiv = false;
function calculateBMI()
{
var height = document.bmi_calculator.bmi_height.value;
var weight = document.bmi_calculator.bmi_weight.value;
height = height.replace(',','.');
weight = weight.replace(',','.');
if(!useKg)weight = weight / 2.2;
if(!useCm)height = height * 2.54;
if(isNaN(height))return;
if(isNaN(weight))return;
height = height / 100;
var bmi = weight / (height*height);
createWeightBar(bmi);
}
function createWeightBar(inputValue){
if(!weightDiv){
self.status = Math.random();
weightDiv = document.createElement('DIV');
weightDiv.style.width = barWidth + 'px';
weightDiv.className='barContainer';
weightDiv.style.left = Math.round((calculatorGraphObj.offsetWidth/2) + ((calculatorGraphObj.offsetWidth/2) /2) - (barWidth/2)) + 'px';
calculatorGraphObj.appendChild(weightDiv);
var span = document.createElement('SPAN');
weightDiv.appendChild(span);
var innerSpan = document.createElement('SPAN');
innerSpan.className='labelSpan';
span.appendChild(innerSpan);
}else{
span = weightDiv.getElementsByTagName('SPAN')[0];
innerSpan = weightDiv.getElementsByTagName('SPAN')[1];
}
var color = graphColors[graphColors.length-1];
for(var no = bmiArray.length-1;no>0;no--){
if(bmiArray[no]>inputValue)weightDiv.style.backgroundColor = graphColors[no-1];
}
if(inputValue/1>1){
innerSpan.innerHTML = inputValue.toFixed(2);
span.style.display='inline';
}else span.style.display='none';
var height = Math.min(Math.round(barHeight * (inputValue / bmiArray[bmiArray.length-1])),barHeight-10);
span.style.lineHeight = Math.round(height) + 'px';
weightDiv.style.height = height + 'px';
}
function validateField()
{
this.value = this.value.replace(/[^0-9,\.]/g,'');
}
function initBmiCalculator()
{
calculatorObj = document.getElementById('dhtmlgoodies_bmi_calculator');
calculatorGraphObj = document.getElementById('bmi_calculator_graph');
if(!useCm)document.getElementById('bmi_label_height').innerHTML = 'inches';
if(!useKg)document.getElementById('bmi_label_weight').innerHTML = 'pounds';
var heightInput = document.getElementById('bmi_height');
heightInput.onblur = validateField;
var widthInput = document.getElementById('bmi_height');
widthInput.onblur = validateField;
var labelDiv = document.createElement('DIV');
labelDiv.className = 'graphLabels';
calculatorGraphObj.appendChild(labelDiv);
for(var no=graphLabels.length-1;no>=0;no--){
var colorDiv = document.createElement('DIV');
colorDiv.className='square';
colorDiv.style.backgroundColor = graphColors[no];
colorDiv.innerHTML = '<span></span>';
labelDiv.appendChild(colorDiv);
var labelDivTxt = document.createElement('DIV');
labelDivTxt.innerHTML = graphLabels[no];
labelDiv.appendChild(labelDivTxt);
labelDivTxt.className='label';
if((no+1)%labelsPerRow==0){
var clearDiv = document.createElement('DIV');
clearDiv.className='clear';
labelDiv.appendChild(clearDiv);
}
}
var clearDiv = document.createElement('DIV');
clearDiv.className='clear';
labelDiv.appendChild(clearDiv);
var graphDiv = document.createElement('DIV');
graphDiv.className='barContainer';
graphDiv.style.width = barWidth + 'px';
graphDiv.style.left = Math.round(((calculatorGraphObj.offsetWidth/2) /2) - (barWidth/2)) + 'px';
graphDiv.style.height = barHeight;
calculatorGraphObj.appendChild(graphDiv);
var totalHeight = 0;
for(var no=bmiArray.length-1;no>0;no--){
var aDiv = document.createElement('DIV');
aDiv.style.backgroundColor = graphColors[no-1];
aDiv.innerHTML = '<span></span>';
var height = Math.round(barHeight * (bmiArray[no] - bmiArray[no-1]) / bmiArray[bmiArray.length-1]) - 1;
aDiv.style.height = height + 'px';
graphDiv.appendChild(aDiv);
}
createWeightBar(1);
}
</script>
</head>
<body>
<div id="dhtmlgoodies_bmi_calculator">
<div class="calculator_form">
<form name="bmi_calculator">
<table>
<tr>
<td><label for="bmi_height">키</label>:</td><td><input class="textInput" type="text" id="bmi_height" name="bmi_height"> <span id="bmi_label_height">cm</span></td>
</tr>
<tr>
<td><label for="bmi_weight">몸무게</label>:</td><td><input class="textInput" type="text" id="bmi_weight" name="bmi_weight"> <span id="bmi_label_weight">kg</span></td>
</tr>
<tr>
<td colspan="2"><input type="button" onclick="calculateBMI()" value="Find BMI"></td>
</tr>
</table>
</form>
</div>
<div class="calculator_graph" id="bmi_calculator_graph">
</div>
</div>
<script type="text/javascript">
initBmiCalculator();
</script>
</body>
</html>
여기에서 키 몸무게 입력하고 Find BMI눌렀을시
"당신이 3개월동안 감량 가능한 몸무게는 kg입니다" 이렇게 나오게 하고싶은데요 ㅠㅠ
고수님들 도움좀 주세요 ㅠㅠ
홍총이
