Question

我想制作一个带有HTML和CSS的6个盒子的猜测游戏，然后给每个人一个独特的颜色。

我生成RGB中的颜色，但它不会使数组和数组只是1,2,3,4,5,6。

var colors = [];
var squares = document.querySelectorAll(".square");
function generateColors (num){
  var r = Math.floor(Math.random()* 256);
  var g = Math.floor(Math.random()* 256);
  var b = Math.floor(Math.random()* 256);
  var rgb = "rgb(" + r + ", " + g + ", " + g + ")";

  var i = 0;
  for(i; i <= num-1; i++){
    colors[i] = colors.push(rgb);
  }
  for(i; i <= num-1; i++){
    squares[i].style.background = colors[i];
  }
  console.log(rgb);
}

generateColors(6);

Answer 1

您的代码中存在很少的错误。

首先，代替colors[i] = colors.push(rgb)使用colors.push(rgb)。

其次，你必须在for循环的每次迭代中丢失新颜色，这就是你必须将Math.random操作放在循环中的原因。否则，你每次都会丢失相同的rgb。

＆＃13;

var colors = [];
var squares = document.querySelectorAll(".square");

function generateColors(num) {

  for (var i = 0; i < num; i++) {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var rgb = "rgb(" + r + ", " + g + ", " + b + ")";
    colors.push(rgb);
  }

  for (var i = 0; i < num; i++) {
    squares[i].style.background = colors[i];
  }

}

＆＃13;

Answer 2

你只能定义每个变量（r，g和b），因此它们不会是6种不同的颜色。您还可以将颜色设置为字符串。这对你来说完全没问题，但是css不会得到这个。请改用rgb（）函数，如下所示：squares[i].style.background.rgb(r,g,b);

Answer 3

r，g，b值应位于循环内以加载颜色。

    var colors = [];
    var squares = document.querySelectorAll(".square");

    function generateColors(num) {
      var i = 0;
      for (i; i <= num - 1; i++) {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var rgb = "rgb(" + r + ", " + g + ", " + b + ")";
        colors.push(rgb);
      }
      for (i; i <= num - 1; i++) {
        squares[i].style.background = colors[i];
      }
      console.log(colors);
    }
    generateColors(6);

Answer 4

一些事情。尽可能优化您的cicles。您生成的值位于cicle外部，因此它们只被调用一次。你有一个小错误打印＆＃34;蓝色＆＃34;参与rgb。

＆＃13;

var colors;
var squares;
function generateColors(num){
  squares = document.querySelectorAll('.square');
  colors = [];
  var r,g,b, rgb;
  for(var i = 0; i < num; i++){
    r = Math.floor(Math.random()* 256);
    g = Math.floor(Math.random()* 256);
    b = Math.floor(Math.random()* 256);
    rgb = "rgb(" + r + ", " + g + ", " + b + ")";
    colors.push(rgb);
    squares[i].style.background = rgb;
  }
}

＆＃13;

body{
  display:flex;  
}
.square{
  width:20px;
  height:20px;
  background:#aaa;
  border: 1px solid black;
  padding:5px;
}

＆＃13;

<div class="square">
A
</div>
<div class="square">
B
</div>
<div class="square">
C
</div>
<div class="square">
D
</div>
<div class="square">
E
</div>
<div class="square">
F
</div>
<button onclick="generateColors(6)">Generate</button>

＆＃13;

在数组中添加项目并检索它们无法正常工作

4 个答案: