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>

js控制从绿色到红色的渐变相关推荐

用JS控制SVG的预设动画
目录 SVG基础 SVG预定义元素,不同的元素可拥有不同的属性可用于 `` 路径的命令,所有命令均允许小写,大写表示绝对定位,小写表示相对定位 stroke属性,可广泛应用于任何种类的线条.文字或元 ...
js控制audio音量
作者:hu_time 描述:记录一下学习的一个使用原生js控制audio音量的小案例,代码如下: html: <!DOCTYPE html> <html lang="en& ...
.net 2.0 点击按钮用js控制是否回发关于vs2005的webproject补丁
.net 2.0 点击按钮用js控制是否回发点击按钮,对用户输入进行判断,如果用户输入的没有问题,就提交,反之就不能提交,这个可以用下面的js函数来完成 function check() { if( ...
js控制audio音量_js控制html5 audio音频暂停播放
js控制html5 audio音频暂停播放音乐控制音乐播放/暂停重新播放 function rbf(){ var audio = document.getElementById('music1 ...
js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
JS控制HTML元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
js控制文本框仅仅能输入中文、英文、数字与指定特殊符号
JS 控制文本框仅仅能输入数字 <input οnkeyup="value=value.replace(/[^0-9]/g,'')"οnpaste="value=v ...
css、js控制html标签的属性和内容
css.html <!DOCTYPE html> <html> <head><title>js控制html标签的属性和内容</title>& ...
frameset ajax,js控制frameSet示例
js控制frameSet示例 1:js修改frameset的cols属性来达到修改各个页面所占的宽高,例如隐藏当前frame页. 复制代码代码如下: window.parent.document.g ...
html判断整数小数点后两位小数点,js控制input框只能输入数字和一位小数点且小数点后面只有两位小数...
js控制input框只能输入数字和一位小数点且小数点后面只有两位小数 js控制input框只能输入数字和一位小数点且小数点后面只有两位小数 212或 0.66; 过滤 00000,1.10,0.00 ...

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

js控制从绿色到红色的渐变相关推荐

最新文章

热门文章