所以我正在尝试为我的网站进行这种平滑的色彩渐变过渡。我做了一个应该做的功能,它甚至看起来会起作用,但是我遇到了一个我至少不明白的问题,我以前也没见过类似的东西。我在我的函数中使用递归并将我改变的颜色传递回要再次更改的函数。我只在当前颜色与目标颜色匹配时退出。我完全确认的是,当我再次将2个数组传回函数时,它们将它们分开。
例如:在通过之前,startColsAr = [211,211,211]。 通过后,startColsAr = ['2'; '1'; '1'; ''; '2'; '1'; '1'; ''; '2'; '1'; '1']。(半冒号用于使阅读更容易)。
正如您在下面的函数中所看到的,我无处可做任何改变数组内容的事情。 这是我的功能:
function transitionOut(startColAr,endColAr, waitTime, interval, page){
//change the colors
for(var i=0;i<3;i++){
if(startColAr[i]<endColAr[i]){
startColAr[i]+=interval;
if(startColAr[i]>endColAr[i]){startColAr[i]=endColAr[i];}
}else if(startColAr[i]>endColAr[i]){
startColAr[i]-=interval;
if(startColAr[i]<endColAr[i]){startColAr[i]=endColAr[i];}
}
}
//var color="rgb("+startColAr[0]+", "+startColAr[1]+", "+startColAr[2]+")";
var color = "#"+startColAr[0].toString(16)+startColAr[1].toString(16)+startColAr[2].toString(16);
document.body.style.backgroundColor = color;
if(startColAr[0]==endColAr[0] && startColAr[1]==endColAr[1] && startColAr[2]==endColAr[2]){
location.href=page;
}
window.setTimeout("transitionOut(\'"+startColAr+"\', \'"+endColAr+"\', \'"+delay+"\', \'"+interval+"\', \'"+page+"\')",waitTime);
}
现在,我只传递两个数组的3个值,所以我可以轻松地将2个数组更改为6个整数参数(并且可能使函数工作(所以不要告诉我去下载新的库转换,这是关于ARRAYS)),但我想知道为什么会这样。有没有人有什么建议?我已经尝试了一些不同的东西来缩小范围,但我似乎无法对此进行任何考虑。一点帮助?
答案 0 :(得分:0)
问题出在以下几行:
window.setTimeout("transitionOut(\'"+startColAr+"\', \'"+endColAr+"\', \'"+delay+"\', \'"+interval+"\', \'"+page+"\')",waitTime);
在准备稍后运行的代码时,您正在将数组转换为字符串。根据{{3}},使用setTimeout函数的替代形式可能更容易:
window.setTimeout(transitionOut, waitTime, startColAr, endColAr, waitTime, interval, page);
答案 1 :(得分:0)
我认为这一行是你的问题
window.setTimeout("transitionOut(\'"+startColAr+"\', \'"+endColAr+"\', \'"+delay+"\', \'"+interval+"\', \'"+page+"\')",waitTime);
你可能想要像
这样的东西window.setTimeout(transitionOut, waitTime, startColAr, endColAr, waitTime, interval,page,waitTime);
您可以使用字符串文字调用setTimeout,但我不认为这是推荐的。