Javascript 逐个更改项目的颜色
我编写了一个脚本，创建了一组较小的圆，这些圆排列成一个圆，通过循环一个接一个地添加到DOM中。在第一个循环完成后，我希望在I==54时开始另一个循环，从列表中的第一个圆开始，逐个将圆的颜色从灰色更改为红色 这是我的代码： var i=1； var appendCircle=函数循环{ setTimeoutfunction{ var$circle=； var$container=$.circles包装器.circles； $container.append$circle； i++； 如果我<55{ 环 } }, 20; //这就是问题所在，因为这会同时改变所有小圆圈的颜色。 如果i==54{ setTimeoutfunction{ $.circle.eachfunction{ $this.css{ 背景：蓝色 }; } }, 20; } }; setTimeoutappendCircle，100； .圆形包装纸{ 位置：绝对位置； 最高：39%； 左：51%； } .圆圈{ 位置：相对位置； 变换：旋转48度； } .圆圈{ 宽度：2米； 高度：.2米； 边缘：-.2米； 边界半径：50%； 背景：ceced0； }Javascript 逐个更改项目的颜色,javascript,jquery,css,loops,Javascript,Jquery,Css,Loops,我编写了一个脚本，创建了一组较小的圆，这些圆排列成一个圆，通过循环一个接一个地添加到DOM中。在第一个循环完成后，我希望在I==54时开始另一个循环，从列表中的第一个圆开始，逐个将圆的颜色从灰色更改为红色 这是我的代码： var i=1； var appendCircle=函数循环{ setTimeoutfunction{ var$circle=； var$container=$.circles包装器.circles； $container.append$circle； i++； 如果我
你给每个圆指定了类circle+索引，所以你所要做的就是循环遍历每个索引并更改每个元素的背景色。我所做的是使用相同的循环函数，在我达到55之后，我用它的mod 55来选择圆。下面是代码和代码片段 我还注意到一些圆圈重叠。如果生成50个圆，则不会有任何重叠。我写了下面的代码来反映这一点 var i=1； var appendCircle=函数循环{ setTimeoutfunction{ 如果我<51{ var$circle=； var$container=$.circles包装器.circles； $container.append$circle； } 否则{ var circleIndex=i%51+1； $.circle+circleIndex.css背景色，蓝色； }
如果第一次通过后，您可能希望找到创建的圆并对其进行修改。您将为它们提供一个circle+i类，以便您可以轻松找到它们。请检查代码剪切。我添加了第三次通过，因为 var i=1， 圈数=52； var appendCircle=函数循环{ setTimeoutfunction{ i++； //第一关 如果我
您只需要更改一个元素的CSS，然后启动超时以更改下一个元素 var i=1； var appendCircle=函数循环{ setTimeoutfunction{ var$circle=； var$container=$.circles包装器.circles； $container.append$circle； i++； 如果我<55{ 环 } }, 20; var j=0； 函数变色{ $.circle.eqj.cssbackground，蓝色； j++； 如果j>=$.circle.length{ clearIntervalchangeInterval； } } 如果i==53{ setIntervalchangeColor，20； } } setTimeoutappendCircle，100； .圆形包装纸{ 位置：绝对位置； 最高：39%； 左：51%； } .圆圈{ 位置：相对位置； 变换：旋转48度； } .圆圈{ 宽度：2米； 高度：.2米； 边缘：-.2米； 边界半径：50%； 背景：ceced0； }
jQuery的一些特性使得类似这样的动画相当简单，不过您需要了解几种方法 jQuery和javascript的漏洞可以被利用，如下所示：
var appendCircles = function($container) {
//create and append hidden circles
for(var i=0; i<50; i++) {
$("<div class='circle'></div>").css('transform', 'rotate(' + 7.2 * i + 'deg) translate(3em)').hide().appendTo($container);
}
//find the freshly appended hidden circles
var $circles = $container.find(".circle");
//initial delay
$circles.eq(0).delay(100).promise()
.then(function() {
//show the circles, one by one
return $circles.get().reduce(function(promise, el) {
return promise.then(function() {
return $(el).show().delay(20).promise();
});
}, $.when());//$when() is a resolved promise that gets the built promise chain started
})
.then(function() {
//make circles blue, one by one
return $circles.get().reduce(function(promise, el) {
return promise.then(function() {
return $(el).css('backgroundColor', 'blue').delay(20).promise();
});
}, $.when());//$when() is a resolved promise that gets the built promise chain started
});
};
appendCircles($(".circles"));