Question

我对html和Javascript编码都很陌生，而且最近才学会通过w3schools.com教程与他们合作。

现在，我尝试在网页上产生以下效果：

页面上有9个方块（使用标签设置）。我希望使用Javascript或jquery编码来使每个块在每次（重新）加载时随机变为七种不同颜色中的一种。

我可以想出如何为各个块生成随机颜色，但现在我需要制作它，这样每次只生成3种颜色，颜色A中有4个块，颜色B中有3个块，颜色中有2个颜色C（颜色A，B和C可以是7种颜色中的任何颜色，并且每次页面（重新）加载时产生相同颜色的块组应该是随机/不同的，我只需要将它们分组在4中每次都是3/2格式。）

希望我在表达我想要做的事情时不要太困惑。任何帮助/建议将不胜感激。

谢谢！加布

编辑:(对不起，过去2天网络不稳定，我很抱歉）

这是我最初拥有的

我的html文件中的块代码：

<table>
<tr>
     <td class='spanrows2'>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
        <div class='squareDivs'><span class='squareTxt'></span></div>
   </td>
</tr>
</table>

这是我在.js文件中尝试随机颜色生成：

var colorArray = ["#800000", "#A7BEFF",....];

var randomColor = Math.floor((Math.random() * colorArray.length));

for (i = 0; i < 9; i++) {
    $(".squareDivs").eq(i).css("background-color", colorArray[randomColor]);

    }

CSS样式：

<style>
body{font-size:30px;
font-family: "Arial", "sans-serif";}

table {
margin-top:50px;
background-color:white;
border: 1px solid black;
margin-left:auto; 
margin-right:auto;
width:50%
}

td {
width: 700px;
padding: 5px;
border: 1px solid black;
}


.spanrows2 {
text-align: center;    
width: 600px;
}

.squareDivs {
width:100px;
height:100px;
background-color:#000000;
margin: 10px;
border-radius: 10px;
display: inline-block;
}

.squareTxt {
line-height: 100px;
vertical-align: middle;    
}


</style>

这样，每次重新加载时，所有9个块都会生成完全相同的颜色。我试图将它们分组为我上面描述的4/3/2格式。

更新：

我已经更新了我的脚本代码，现在我已经找到了一种方法，可以将随机颜色限制为每次只有3种（可能不是最流畅的方式，但它有效，而且全部都是我要求），但我仍然无法弄清楚如何将它们放入4/3/2组....

更新2：

我尝试在tempArray中为每种颜色实现一个计数器，这样它们就不会被使用超过给定的次数，但它似乎使整个事情变得更糟！现在每次重新加载时，所有9个块都是相同的颜色。有人可以指出我做错了什么（对以下代码做出的最新更改）？

    var colorArray = ["#800000", "#A36386", "#FFD4D8", "#223CFF", "#F5FF5A", "#FF5555", "#A7BEFF"];

    function Shuffle(o) {
        for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

    Shuffle(colorArray);

    var color1 = Math.floor((Math.random() * colorArray.length));

    var color2 = "#000000";
    do {
        color2 = Math.floor((Math.random() * colorArray.length));;
    }
    while (color2 != color1);

    var color3 = "#000000";
    do {
        color3 = Math.floor((Math.random() * colorArray.length));;
    }
    while (color3 != color1 && color3 != color2);

    var tempArray = [color1, color2, color3];

    for (i = 0; i < 9; i++) {
        var count1 = 0, count2 = 0, count3 = 0;
        var selectedColor;
        var randomColor = Math.floor((Math.random() * tempArray.length));
        if (colorArray[randomColor] == tempArray[0] && count1 <= 4) {
                selectedColor = tempArray[0];
                count1++;
        }
        else if (colorArray[randomColor] == tempArray[1] && count2 <= 3) {

            selectedColor = tempArray[1];
                count2++;
        }
        else if (count3 <= 2) {
            selectedColor = tempArray[2];
                count3++;
        }
        $(".squareDivs").eq(i).css("background-color", colorArray[selectedColor]);
}

Answer 1

您可以执行以下操作：

向页面

<div>

block

添加7个colorX类的CSS，使该类的元素背景为某种颜色，其中X为0到6的数字
根据块组中的元素数添加生成颜色的javascript，并将相关的CSS类添加到块中

＆＃13;

function addColors(numberOfColors, groups) {
  var blocks = document.querySelectorAll('.block'),
      colors = groups.reduce(function(arr, n) {
        var x = Math.floor(Math.random() * numberOfColors);
        while(arr.indexOf(x) >= 0) { // make sure colors are different
          x = (x + 1) % numberOfColors
        }
        return arr.concat(Array(n).fill(x));
      }, []);
  Array.from(blocks).forEach(function(block, idx) {
    block.classList.add('color' + colors[idx])
  })
}

document.addEventListener('DOMContentLoaded', function() {
  addColors(7, [4, 3, 2]);
})

＆＃13;

.block {
  width: 30%;
  height: 50px;
  display: inline-block;
}

.color0 {
  background-color: red;
}

.color1 {
  background-color: orange;
}

.color2 {
  background-color: yellow;
}

.color3 {
  background-color: green;
}

.color4 {
  background-color: lightblue;
}

.color5 {
  background-color: blue;
}

.color6 {
  background-color: violet;
}

＆＃13;

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

＆＃13;

使用Javascript生成随机的彩色块组

1 个答案: