1
1087<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var changeColor = function (node) {
var i;
for (i = 0; i < 16; i += 1) {
var bgc = "#ff" + i.toString(16);
(function (node,bgc) {
setTimeout(function (){
node.style.backgroundColor = bgc;
},100);
})(node,bgc);
}
setTimeout(function () {changeColor(node)},200);
};
changeColor(document.body);
}
</script>
</head>
<body>
</body>
</html>
firebug提示node.style.backgroundColor = bgc;中bgc未定义，可是我明明定义了呀
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
代码本身我目测应该没问题的，不知道你哪个版本的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>