JS实现文字颜色渐变和背景颜色渐变

字颜色渐变，效果：

代码：

//html：
<span id=myText>哈喽吧是我们共同追求的编程平台</span>
//JS:
var ColorA = "#ff0000";
			var ColorB = "#0055ff";
			// 颜色#FF00FF格式转为Array(255,0,255)
			function color2rgb(color)
			{
			 var r = parseInt(color.substr(1, 2), 16);
			 var g = parseInt(color.substr(3, 2), 16);
			 var b = parseInt(color.substr(5, 2), 16);
			 return new Array(r, g, b);
			}
			 
			// 颜色Array(255,0,255)格式转为#FF00FF
			function rgb2color(rgb)
			{
			 var s = "#";
			 for (var i = 0; i < 3; i++)
			 {
			  var c = Math.round(rgb[i]).toString(16);
			  if (c.length == 1)
			   c = '0' + c;
			  s += c;
			 }
			 return s.toUpperCase();
			}
			 
			// 生成渐变
			function gradient()
			{
			 var str = myText.innerText;
			 var result = "";
			 var Step = str.length - 1;
			 
			 var Gradient = new Array(3);
			 var A = color2rgb(ColorA);
			 var B = color2rgb(ColorB);
			 
			 for (var N = 0; N <= Step; N++)
			 {
			  for (var c = 0; c < 3; c++) // RGB通道分别进行计算
			  {
			   Gradient[c] = A[c] + (B[c]-A[c]) / Step * N;
			  }
			  result += "<font color=" + rgb2color(Gradient) +
			   ">" + str.charAt(N) + "</font>";
			 }
			 myText.innerHTML = result;
			}
			 
			gradient(); // 运行程序

背景颜色渐变，效果：

代码：

//style
.cur-color-opacity{border: 1px solid #EEE; font-size: 0px;} .cur-color-opacity div{width: 0.1%; height: 40px; display: inline-block;}
//html
<div class="cur-color-opacity b-radius-4 of-hidden"></div>
//JS
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('#ff0000','#FFFFFF',1000);
				$.each(gradient,function(i,val){
					$('.cur-color-opacity').append('<div style="background-color:'+val+';">i</div>');
				})