js实现的双色平滑变化算法

女友用到这个算法，要我帮着写个双色平滑变化算法，花了2h，写了个，贴出来分享给大家：

//功能：实现颜色平滑变化的算法，共3个辅助函数，1个功能函数//code by 周育成，2010-1-11，All Rights Reserved © 2010-2011//-----------辅助函数区---------------------------------------//1.NumToInt(num)-四舍五入算法，对parseInt的取整算法进行补充//2.ToRGB(ColorString)-将颜色字符串转化为数字RGB//3.ToHex(num,n)-将10进制的数字num转换为n位长的16进制数，其中不足位数用0补齐function NumToInt(num){//四舍五入算法if (num>=(parseInt(num)+0.5)){return parseInt(num)+1;}else{return parseInt(num);}}//将颜色字符串转化为数字RGB表示function ToRGB(ColorString){if(ColorString!="" || ColorString!=null){ //缓存颜色var myrgb={"r":255,"g":255,"b":255};var HexRGB={"HexR":"ff","HexG":"ff","HexB":"ff"};//分割字符串，分离RGB颜色HexRGB.HexR=ColorString.substr(0,2);HexRGB.HexG=ColorString.substr(2,2);HexRGB.HexB=ColorString.substr(4,2); myrgb.r=parseInt(HexRGB.HexR,16);myrgb.g=parseInt(HexRGB.HexG,16);myrgb.b=parseInt(HexRGB.HexB,16);return myrgb;}}//将10进制的数字num转换为n位长的16进制数，其中不足位数用0补齐function ToHex(num,n){num=num.toString(16);//16进制转换var zero="";if(num.length<n){for(var i=0;i<n-1;i++){zero+="0";}//补齐num=zero+num;}//document.write("num = "+ num +"<br />");return num;}//-----------功能函数区---------------------------------------//1.getFadeColorList(colorStart,colorEnd)-实现渐变色值的计算，返回渐变色值数组function getFadeColorList(colorStart,colorEnd){//初始化，转换RGB颜色var rgbS=ToRGB(colorStart);var rgbE=ToRGB(colorEnd);//计算颜色差，保存在对象ColorDis中；var ColorDis={"r":0,"g":0,"b":0};ColorDis.r=rgbE.r-rgbS.r;ColorDis.g=rgbE.g-rgbS.g;ColorDis.b=rgbE.b-rgbS.b;//比较得出最大的颜色差的绝对值,保存在ColorLength中；var ColorLength=Math.abs(ColorDis.r);//比较算法，求出ColorDis.r，ColorDis.g，ColorDis.b的最大者if( ColorLength<=Math.abs(ColorDis.g) ){ColorLength=Math.abs(ColorDis.g);if( ColorLength<=Math.abs(ColorDis.b) ){ColorLength=Math.abs(ColorDis.b);}}//计算渐变色值缓存，每次颜色的变化用nowColor来缓存；var nowColor={"r":0,"g":0,"b":0};//红色变化系数rvar r=ColorDis.r/ColorLength;//绿色变化系数gvar g=ColorDis.g/ColorLength;//蓝色变化系数bvar b=ColorDis.b/ColorLength;var ColorList=new Array();//循环计算出颜色变化列表for (var i=0;i<ColorLength;i++){nowColor.r=NumToInt(rgbS.r+r*i);nowColor.g=NumToInt(rgbS.g+g*i);nowColor.b=NumToInt(rgbS.b+b*i);//方法一、RGB三原色值显示输出在页面，取消注释可查看效果//document.write(nowColor.r+","+nowColor.g+","+nowColor.b+"<br />");//方法二、十六进制颜色值显示输出在页面，取消注释可查看效果//document.write("#"+ToHex(nowColor.r,2)+ToHex(nowColor.g,2)+ToHex(nowColor.b,2)+"<br />");//方法三、将每一条颜色色绘制在屏幕上面，取消注释可查看效果//document.write("<div style="background:#"+ ToHex(nowColor.r,2)+ToHex(nowColor.g,2)+ToHex(nowColor.b,2)+"" mce_style="background:#"+ ToHex(nowColor.r,2)+ToHex(nowColor.g,2)+ToHex(nowColor.b,2)+""></div>");//方法四、返回十六进制的颜色变化列表，如使用一、二、三效果，则不需返回ColorList值，请将return句子注释掉ColorList[i]="#"+ToHex(nowColor.r,2)+ToHex(nowColor.g,2)+ToHex(nowColor.b,2);}//如使用一、二、三效果，则不需返回ColorList值//请将以下句子注释掉return ColorList;}//----------------测试用例----------------------------------//1.创建新的数组对象var ColorList=new Array();//2.取颜色变化列表，保存在对象ColorList中ColorList=getFadeColorList("FF0000","ff0001");//3.遍历列表，并做相关的输出for(var index in ColorList){document.write("<div style='background:"+ ColorList[index] +"'></div>");}