我的思路是弄一个数组把几种颜色放进去，然后设置一个时间(时间较短)，从数组的第一个颜色快速渐变到数组的第二个颜色，变成第二个颜色后再停留一阵子(时间较长)，再从第二个元素快速渐变到第三个元素，接着就是像这样的循环，我不知道怎么改变rgb的值也不太清楚怎么实现一直循环，求位指教！谢谢了！
伊谢尔伦2017-04-10 15:12:00
循环的话可以用setInterval函数，然后再里面实现颜色切换：
$("body").css('background-color',颜色值);
补充：
其实完全可以用css3的animation实现。
高洛峰2017-04-10 15:12:00
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>
<script>
$(function(){
var orgColors=[
{r:0,g:0,b:255},
{r:255,g:127,b:80},
{r:34,g:165,b:13}
]
var colorGrandientSteps=10;
//form color1 to color2
function getColor(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)
}
}
var renderColor=(function(colors,defaultStep){
var curstep=1;
var color1=colors[0],color2=colors[1];
return function(){
var newColor=getColor(color1,color2,curstep,defaultStep);
var cssColor='rgb('+newColor.r+','+newColor.g+','+newColor.b+')';
$('p#colorp').css({
"background-color":cssColor
});
curstep++;
if(curstep===defaultStep+1){
//curstep 置为=1
curstep=1;
colors.push(color1);
colors.shift();
color1=colors[0];
color2=colors[1];
}
}
})(orgColors,colorGrandientSteps);
setInterval(function(){
renderColor();
},50);
});
</script>
</head>
<body style="margin:0px;border:0px solid #cccccc;width:100%;height:100%" >
<p id="colorp" style="width:100px;height:100px;border:1px solid #cccccc;"></p>
</body>
</html>
黄舟2017-04-10 15:12:00
屎代码，题主将就看吧，望大大狂喷
;(function changeColor() {
var arr = ['#00CC99', '#00FFFF', '#CCCCFF']
var t = 2000
var n = false
var body = document.querySelector('body')
body.style.transition = 'background-color 500ms'
function change() {
n = !n
var v = arr.shift()
body.style.backgroundColor = v
arr.push(v)
if(n) {
setTimeout(change, t)
} else {
setTimeout(change, 3*t)
}
}
change()
})()
直接复制粘贴到console，enter看效果
PHPz2017-04-10 15:12:00
我重新描述下我理解到你想要的动画过程吧！不对请指出
time0: 颜色1
time1: 维持颜色1
time2: 开始向颜色2渐变（此时任然是颜色1）
time3: 颜色完全由颜色1渐变为颜色2
time4: 维持颜色2
。。。
重复以上过程（颜色可以不止2种）
其中 time1 － time0 是颜色维持的时间(较长)time2 ＝ time1time3 － time2 是颜色渐变的过渡时间(较短)time4 － time3 ＝ time1 － time0
如果上述描述的过程是题主的意思，请往下看，否则可以忽略了
这个东西可以用纯css实现，也可以css结合js实现
纯css实现使用css3的animate ＋ keyframe来实现，不多做介绍
css＋js实现：
cssselector { transition: background-color (time3-time2) 过渡的函数; /* 其它样式 */ }
以下的$element是这个元素的jquery实例
javascriptvar color_array = [color1, color2, color3, color4];//你说的颜色数组 var current_color_index = 0; var duration = time3 - time0; //颜色的维持时间 ＋ 颜色的过渡时间 function colorChange() { //将颜色更改，然后css会执行渐变的过程 $element.css('background-color', color_array[current_color_index]); //确保在颜色数组内循环变化 current_color_index = (current_color_index + 1) % color_array.length; //定时改变颜色，可以将这个动作放到外部通过setInterval来循环，就这个例子来说，他们之间没太大区别。 setTimeout(arguments.callee, duration); } colorChange();
PHP中文网2017-04-10 15:12:00
以前写的，仅供参考啊。
http://www.cnblogs.com/zjfree/archive/2011/10/20/2219071.html
http://www.cnblogs.com/zjfree/archive/2011/10/20/2219044.html
大家讲道理2017-04-10 15:12:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script>
var color1=null;
var color2=null;
function random(){
return '#'+Math.random().toString(16).slice(2,8);
}
function start(){
color1=random();
document.body.style.backgroundColor=color1;
setTimeout(changeColor, 2000);
}
function changeColor(){
var a,b,c,i=0;
var animate=null;
color2=random();
var array1=strSlip(color1);
var array2=strSlip(color2);
var r1=array2[0]-array1[0];
var r2=array2[1]-array1[1];
var r3=array2[2]-array1[2];
animate=setInterval(function(){
array1[0]=array1[0]+Math.round(r1/30);
array1[1]=array1[1]+Math.round(r2/30);
array1[2]=array1[2]+Math.round(r3/30);
a=array1[0].toString(16);
b=array1[1].toString(16);
c=array1[2].toString(16);
i++;
document.body.style.backgroundColor=returnColor(a,b,c);
if(i==20){
clearInterval(animate);
color1=returnColor(a,b,c);
}
},100);
setTimeout(changeColor, 7000);
}
function returnColor(a,b,c){
return "#"+a+b+c;
}
function strSlip(str){
var num=[];
var x=parseInt(str.substring(1,3),16);
var y=parseInt(str.substring(3,5),16);
var z=parseInt(str.substring(5,7),16);
num.push(x);
num.push(y);
num.push(z);
return num;
}
start();
</script>
</body>
</html>