<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">
  
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>

<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>

좀더 흥미로운 내용이 많이 있습니다.. HOME > WEB/HTML/Css/Script를 확인하세요

애드센스로 즐거운 블로깅 하세요 매일매일 늘어 가는 수익 즐거운 인터넷 세상입니다.
도움말을 오픈해 두시고 위의 [Google Adsense로 귀하의 ~~]를 클릭하셔서 가입을 진행하시면 됩니다.

그리고 더불어 간편하게 사진을 편집하는 Picasa, 불필요한 팝업없는 FireFox, Real player로 실시간 스포츠 관전, 요금 없는 Sky pe로 즐거운 통화등 구글 툴로 즐거운 컴생활을 즐기세요!!
일단 패키지를 설치해 보세요 컴퓨터 생활이 틀려집니다.