怎么用js实现渐变切换背景颜色

Question

我的思路是弄一个数组把几种颜色放进去，然后设置一个时间(时间较短)，从数组的第一个颜色快速渐变到数组的第二个颜色，变成第二个颜色后再停留一阵子(时间较长)，再从第二个元素快速渐变到第三个元素，接着就是像这样的循环，我不知道怎么改变rgb的值也不太清楚怎么实现一直循环，求位指教！谢谢了！

Answer 1

循环的话可以用setInterval函数，然后再里面实现颜色切换：$("body").css('background-color',颜色值);补充：其实完全可以用css3的animation实现。

Answer 2

$(function(){varorgColors=[{r:0,g:0,b:255},{r:255,g:127,b:80},{r:34,g:165,b:13}]varcolorGrandientSteps=10;//formcolor1tocolor2functiongetColor(color0,color1,curstep,defaultStep){return{g:parseInt(color0.g+(color1.g-color0.g)/defaultStep*curstep,10),r:parseInt(color0.r+(color1.r-color0.r)/defaultStep*curstep,10),b:parseInt(color0.b+(color1.b-color0.b)/defaultStep*curstep,10)}}varrenderColor=(function(colors,defaultStep){varcurstep=1;varcolor1=colors[0],color2=colors[1];returnfunction(){varnewColor=getColor(color1,color2,curstep,defaultStep);varcssColor='rgb('+newColor.r+','+newColor.g+','+newColor.b+')';$('div#colorDiv').css({"background-color":cssColor});curstep++;if(curstep===defaultStep+1){//curstep置为=1curstep=1;colors.push(color1);colors.shift();color1=colors[0];color2=colors[1];}}})(orgColors,colorGrandientSteps);setInterval(function(){renderColor();},50);});