Question

伙计们我想获得2种随机颜色，并从这2种颜色中为我的4个div制作background-color。

我想要的是如何确保将2种颜色用作background-color 2次。

（在我的代码中，我有时会看到一种随机颜色为背景颜色3次。）

＆＃13;

$(function() {
  function getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0),
      i = arr.length,
      min = i - count,
      temp, index;
    while (i-- > min) {
      index = Math.floor((i + 1) * Math.random());
      temp = shuffled[index];
      shuffled[index] = shuffled[i];
      shuffled[i] = temp;
    }
    return shuffled.slice(min);
  }

  var randomColor1 = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
  var randomColor2 = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

  var colors = [randomColor1, randomColor2];


  $(".first").css("background-color", getRandomArrayElements(colors, 1));
  $(".second").css("background-color", getRandomArrayElements(colors, 1));
  $(".third").css("background-color", randomColor1);
  $(".fourth").css("background-color", randomColor2);

});

＆＃13;

div {
  width: 100px;
  height: 100px;
  border: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>

＆＃13;

Answer 1

这个怎么样：

$.ajax({url: "/url/to/server", success: function(result){
    result.forEach(function(item) {
      console.log(item['chart_data']['data']);
    });
  }, complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(checkForUpdates, 3000);
    }
  });
});

Answer 2

即使这个答案稍后我想告诉你上面代码中的概念错误。

你混合了2个随机选择和2个修正选择。所以可能会出现3种颜色相同的情况。

// Possible picks: color1 | color2
$(".first").css("background-color", getRandomArrayElements(colors, 1));

// Possible picks: color1 | color2
$(".second").css("background-color", getRandomArrayElements(colors, 1));

// Fix pick: color1
$(".third").css("background-color", randomColor1);

// Fix pick: color2
$(".fourth").css("background-color", randomColor2);

这就是3种颜色可能相同的原因。所以你可以删除上面挑选的颜色（就像上一个答案那样），或者将所有4种颜色放在一个数组中，随机抽取并逐个选择。（如下例所示）

$(function() {

// Code from this SO question:
// http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript
function shuffle(array) {
    let counter = array.length;

    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        let index = Math.floor(Math.random() * counter);

        // Decrease counter by 1
        counter--;

        // And swap the last element with it
        let temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }

    return array;
}
  
  var randomColor1 = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
  var randomColor2 = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

  var colors = shuffle([randomColor1, randomColor2, randomColor1, randomColor2]);
  var elements = ['.first','.second','.third','.fourth'];

  elements.forEach(function(selector, index) {
    $(selector).css('background-color', colors[index]);
  });
  

});

div {
  width: 100px;
  height: 100px;
  border: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>

Answer 3

function getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0),
      i = arr.length,
      min = i - count,
      temp, index,color;
    while (i-- > min) {
      index = Math.floor((i + 1) * Math.random());
      temp = shuffled[index];
      shuffled[index] = shuffled[i];
      shuffled[i] = temp;
	  color = shuffled.slice(min);
	  if(arr.length == getRandomArrayElements["time"].length)
	  {
		  break;
	  }
	  if(getRandomArrayElements["time"][color] != undefined)
	  {
		  i++;
	  }
	  else
	  {
		getRandomArrayElements["time"][color] = "1"  
	  }
    }
	
    return color;
  }
	getRandomArrayElements["time"] = [];

如何确保每两种颜色使用两次？

3 个答案: