Question

这是我的小提琴：http://jsfiddle.net/pYM38/16/

 var box = document.getElementById('box');

 var colors = ['purple', 'yellow', 'orange', 'brown', 'black'];

 box.onclick = function () {

    for (i = 0; i < colors.length; i++) {

        box.style.backgroundColor = colors[i];


      }

};

我正在学习JavaScript。我试图让它循环遍历数组中的每种颜色，但当我点击框（jsfiddle上的演示）时，它会转到数组中的最后一个元素。

Answer 1

你希望它被动画或延迟吗？

因为您的示例完美无缺，所以您循环遍历所有颜色并且速度非常快，您只能看到最后一个颜色。

var box = document.getElementById('box');

 var colors = ['purple', 'yellow', 'orange', 'brown', 'black'];
 var running = 0;    
 box.onclick = function () {
    if(running>0) return;
    for (i = 0; i < colors.length; i++) {
        running++;
        setTimeout(function() {
             box.style.backgroundColor = colors[i];
             running--;
        }, 1000);

      }

};

Answer 2

以下是两种方法，具体取决于您的目标：

点击

循环到下一步

var box = document.getElementById('box'),
    colors = ['purple', 'yellow', 'orange', 'brown', 'black'];

box.onclick = function () {
    color = colors.shift();
    colors.push(color);

    box.style.backgroundColor = color;
};

http://jsfiddle.net/pYM38/17/

循环播放全部点击

var box = document.getElementById('box'),
    colors = ['purple', 'yellow', 'orange', 'brown', 'black'];

box.onclick = function () {
    (function loop(){
        var color = colors.shift();

        box.style.backgroundColor = color;

        if (colors.length) {
            setTimeout(loop, 1000);
        }
    })();
};

http://jsfiddle.net/pYM38/23/

重新启动下一步点击

var box = document.getElementById('box'),
    colors = ['purple', 'yellow', 'orange', 'brown', 'black'];

box.onclick = function () {
    var set = colors.slice(0);

    (function loop(){
        var color = set.shift();

        box.style.backgroundColor = color;

        if (set.length) {
            setTimeout(loop, 1000);
        }
    })();
};

通过循环点击更改背景颜色

2 个答案: