你的位置:首页 > Java教程

[Java教程]颜色渐变的JS代码


今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦!

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body><script src="js/jquery-1.11.3.js"></script><script src="js/swiper-3.3.1.jquery.min.js"></script><script type="text/javascript">  /*   // startColor:开始颜色hex   // endColor:结束颜色hex   // step:几个阶级(几步)   */  function gradientColor(startColor,endColor,step){    startRGB = this.colorRgb(startColor);//转换为rgb数组模式    startR = startRGB[0];    startG = startRGB[1];    startB = startRGB[2];    endRGB = this.colorRgb(endColor);    endR = endRGB[0];    endG = endRGB[1];    endB = endRGB[2];    sR = (endR-startR)/step;//总差值    sG = (endG-startG)/step;    sB = (endB-startB)/step;    var colorArr = [];    for(var i=0;i<step;i++){      //计算每一步的hex值      var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');      colorArr.push(hex);    }    return colorArr;  }  // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)  gradientColor.prototype.colorRgb = function(sColor){    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;    var sColor = sColor.toLowerCase();    if(sColor && reg.test(sColor)){      if(sColor.length === 4){        var sColorNew = "#";        for(var i=1; i<4; i+=1){          sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));        }        sColor = sColorNew;      }      //处理六位的颜色值      var sColorChange = [];      for(var i=1; i<7; i+=2){        sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));      }      return sColorChange;    }else{      return sColor;    }  };  // 将rgb表示方式转换为hex表示方式  gradientColor.prototype.colorHex = function(rgb){    var _this = rgb;    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;    if(/^(rgb|RGB)/.test(_this)){      var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");      var strHex = "#";      for(var i=0; i<aColor.length; i++){        var hex = Number(aColor[i]).toString(16);        hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位        if(hex === "0"){          hex += hex;        }        strHex += hex;      }      if(strHex.length !== 7){        strHex = _this;      }      return strHex;    }else if(reg.test(_this)){      var aNum = _this.replace(/#/,"").split("");      if(aNum.length === 6){        return _this;      }else if(aNum.length === 3){        var numHex = "#";        for(var i=0; i<aNum.length; i+=1){          numHex += (aNum[i]+aNum[i]);        }        return numHex;      }    }else{      return _this;    }  }  var gradient = new gradientColor('#e82400','#8ae800',10);  console.log(gradient);//控制台输出  alert(gradient);  for(var i=0;i<gradient.length;i++){    var htmls='<div background-color: #f5f5f5; color: #000000;">'+i+'">'+i+'</div>';    $("body").append(htmls);    console.log($("mmm"+i));    console.log(gradient[i]);    $(".mmm"+i).css("background-color",gradient[i]);  }</script></body></html>

再附上一个颜色代码对应表http://www.360doc.com/content/13/1120/12/14695328_330723062.shtml