js控制从绿色到红色的渐变

先上效果图...

     <style>
     .CT{ 
        bottom: 0px;
        position: absolute;
     }
     .BOX{
        position: relative;
        float:left;
        height:200px;
        width:20px;
     }
     </style>
            <div>
                <div class="BOX">
                    <div class="CT" id="CT10">
                        10
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT20">
                        20
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT30">
                        30
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT40">
                        40
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT50">
                        50
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT60">
                        60
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT70">
                        70
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT80">
                        80
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT90">
                        90
                    </div>
                </div>
                <div class="BOX">
                    <div class="CT" id="CT100">
                        100
                    </div>
                </div>
            </div>

            <script>
 
/*
*求由绿到红的渐变色值,百分比 bili 取值 1...100
*/
function getColorByBaiFenBi(bili){
    //var 百分之一 = (单色值范围) / 50;  单颜色的变化范围只在50%之内
    var one = (255+255) / 100;  
    var r=0;
    var g=0;
    var b=0;

    if ( bili < 50 ) { 
        // 比例小于50的时候红色是越来越多的,直到红色为255时(红+绿)变为黄色.
        r = one * bili;
        g=255;
    }
    if ( bili >= 50 ) {
        // 比例大于50的时候绿色是越来越少的,直到0 变为纯红
        g =  255 - ( (bili - 50 ) * one) ;
        r = 255;
    }
    r = parseInt(r);// 取整
    g = parseInt(g);// 取整
    b = parseInt(b);// 取整

    //console.log("#"+r.toString(16,2)+g.toString(16,2)+b.toString(16,2));
    //return "#"+r.toString(16,2)+g.toString(16,2)+b.toString(16,2);
    //console.log("rgb("+r+","+g+","+b+")" );
    return "rgb("+r+","+g+","+b+")";
        
}

function setStyle(bili,id){
    var a =document.getElementById("CT"+bili); 
    a.style.backgroundColor =  getColorByBaiFenBi( bili) ; 
    a.style.height= 2 * bili +"px";
}
setStyle(10,10);
setStyle(20,20);
setStyle(30,30);
setStyle(40,40);
setStyle(50,50);
setStyle(60,60);
setStyle(70,70);
setStyle(80,80);
setStyle(90,90);
setStyle(100,100);
 

 </script>