代码本身我目测应该没问题的,不知道你哪个版本的firebug。
你所说的渐变无效应该是另一个原因造成的。按照你的代码逻辑,for会在一瞬间循环完16次,然后延时100毫秒后,在一个瞬间切换16次颜色——我不觉得肉眼能够看得到这种所谓的瞬间渐变……(你可以试试把16次循环减少点就很明显了,你总是只能看到最后一次切换出的颜色)
你碰到的问题是,setTimeout延时是一种异步的操作,不会阻塞主体代码(你这里就是for循环)的执行,于是你主题代码中的for一瞬间就执行完了,生成的16个延时操作也跟着聚集在一起执行了。
你应该换一个思路,把下一次切换的内容放到setTimeout里去,而不要像你现在这样,在setTimeout的外部用for去实现。
我猜测下你的想法大概写了个,你参考下,应该就是你要的效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var i=0;
var changeColor = function (node) {
node.style.backgroundColor = "#ff" + i.toString(16);
if(i<16){
i++;
setTimeout(function () {changeColor(node)},100)
}else{
i=0;
setTimeout(function () {changeColor(node)},200)
}
};
changeColor(document.body);
}
</script>
</head>
<body>
</body>
</html>
PS,回头看了下突然发现其实你不是要研究渐变而是要研究闭包。好吧,那我也坑爹地学着你原来的代码样子闭一个……
<script type="text/javascript">
window.onload = function () {
var i=0;
var changeColor = function (node) {
node.style.backgroundColor = "#ff" + i.toString(16);
(function(c){
return c?function(node){
i++;
setTimeout(function () {changeColor(node)},100);
}:function(node){
i=0;
setTimeout(function () {changeColor(node)},200);
};
})(i<16)(node);
};
changeColor(document.body);
}
</script>