jQuery製作 BMI計算機

tags: jQuery JavaScript jQuery Mobile

---

使用jQuery的range製作

<input type="range" name="height" id="height" min="100" max="200" step="1" value="160">

<!-- CONTENT -->
<div role="main" class="ui-content">
    <div data-role="fieldcontain">
        <label for="height">身高(CM)</label>
        <input type="range" name="height" id="height" min="100" max="200" step="1" value="160">
    </div>	
    <div data-role="fieldcontain">
        <label for="weight">體重(KG)</label>
        <input type="range" name="weight" id="weight" min="30" max="200" step="1" value="50">
    </div>
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <a href="#" data-role="button" data-theme="b" data-icon="info" id="again-btn">初始化</a>
        </div>
        <div class="ui-block-b">
            <a href="#" data-role="button" data-theme="b" data-icon="info" class="ui-btn-active"id="ok-btn">確認計算</a>
        </div>
    </div>
    <div id="info"></div>
</div><!-- /CONTENT -->    

JS code

使用toFixed()涵式
bmi = bmi.toFixed(2);

//1.起手式先監聽點擊
$(function(){
    $("#ok-btn").bind("click",function(){ 
    
        //2.定義變數方便code閱讀
        var w = $("#weight").val();
        var h = $("#height").val()/100;
        var bmi = w/(h*h);
        
        //3.使用toFixed()涵式 取bmi到小數點第二位
        bmi = bmi.toFixed(2);
        
        //4.判斷式，寫入資訊到#info
        if(bmi<18.5){
            $("#info").html("您的BMI為"+bmi+"，體重過輕!");  
            $("#info").css("color","blue");
        }else if(bmi>18.5 && bmi<24){
            $("#info").html("您的BMI為"+bmi+"，體重正常!");   
            $("#info").css("color","green");   				
        }else if(bmi>24){
            $("#info").html("您的BMI為"+bmi+"，體重過重!");    
            $("#info").css("color","red");  				
        }     	
    });
});

---