1

我的函数有这个问题，我正在尝试将一些颜色（预定义）随机化到我的 div 中，并在每次使用颜色时进行计数。

这是我的html：

<div class="change_color2" id="rand_1"></div>
<div class="change_color2" id="rand_2"></div>
<div class="change_color2" id="rand_3"></div>
<div class="change_color2" id="rand_4"></div>
<div class="change_color2" id="rand_5"></div>

还有一些将随机颜色作为背景的div：

<div class="change_color"></div>

这是我的js代码：

function colorfy_me() {
    var myColors = [
        '#543326', '#5EC631', '#A9D7DC', '#003946', '#E0D8C8'
    ];
    shuffleArray(myColors);
    var i = 1;
    $('div.change_color').each(function() {
        $(this).css('background-color', myColors[i]);
        i = (i + 1) % myColors.length;
    });
}    

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

但问题是它会随机更改集合中前 5 个 div 的颜色。而且我不知道如何计算每种颜色。

我创造了一个小提琴

4

2 回答 2

1

为什么不使用包含颜色和使用次数的对象来填充数组，而不是使用仅包含颜色的数组。像这样的东西：

var myColors = [
    { color: '#543326', uses: 0 },
    { color: '#5EC631', uses: 0 },
    { color: '#A9D7DC', uses: 0 },
    { color: '#003946', uses: 0 },
    { color: '#E0D8C8', uses: 0 }
];

然后你可以像这样分配你的颜色：

$(this).css('background-color', myColors[i].color);

并跟踪您使用每种颜色的次数：

myColors[i].uses++;

如果您不喜欢写出对象字面量，您甚至可以创建一个函数来获取原始颜色数组并将其转换为对象。

function MakeColorObjects(arrayOfColors) {
    var objs = [];
    for (var i=0; i<arrayOfColors.length; i++) {
         objs.push({ color: arrayOfColors[i], uses: 0 });
    }
    returns objs;
}

如果您想变得非常聪明，您可以创建自动跟踪其使用情况的对象，如下所示：

function TrackedColor(colorCode) {
    var self = this;
    var uses = 0;

    function getUses() {
        return uses;
    }

    function getColor() {
        uses++;
        return colorCode;       
    }

    function resetCount {
        uses = 0;
    }
}

现在你可以像这样使用它：

var myColors = [
    new TrackedColor('#543326'), 
    new TrackedColor('#5EC631'), 
    new TrackedColor('#A9D7DC'), 
    new TrackedColor('#003946'), 
    new TrackedColor('#E0D8C8')
];

和：

$(this).css('background-color', myColors[i].getColor());

而且您不必担心忘记增加使用次数，因为它会保持自己的状态。您可以使用检索当前值

myColors[i].getUses();
于 2013-06-03T12:59:02.283 回答
1

我最终得到了这个：http: //jsfiddle.net/GXVUE/1/

它只是将统计信息输出到带有 class="stats" 的 div 中。

(function($){

  var colors = ['#f00', '#0f0', '#00f']
    , colorsUsed = {}
    , $divsToColor = $('.random-color');

  $divsToColor.each(function(){

    var $div = $(this)
      , randomColor = colors[ Math.floor( Math.random() * colors.length ) ];

    $div.css('backgroundColor', randomColor);

    // Keeps track of how often a color is used...
    if( colorsUsed[randomColor] ){
        colorsUsed[randomColor]++;
    } else {
        colorsUsed[randomColor] = 1;
    }

  });

  // This reads through the stats.
  $('.stats').html(function(){
      var out = [];
      for( var color in colorsUsed ){
          out.push( color + ' was used ' + colorsUsed[color] + ' times.' );
      }
      return out.join('<br>');
  });

})(jQuery);
于 2013-06-03T13:06:04.813 回答