使用javascript更改不同形状的颜色

Question

如何应用以下条件为图1中所示的所有9个块生成随机颜色。

a）从颜色代码信息中随机应用4个相同颜色的SAME颜色 提供的表格。颜色必须与5个区块的其余部分不同。

b）从颜色代码信息中随机应用3个相同颜色的SAME颜色 提供的表格。颜色必须与6块的其余部分不同。

c）从颜色代码信息中随机应用2个SAME颜色块 提供的表格。颜色必须与7块的其余部分不同。

颜色代码信息表：

#800000,
#A36386,
#FFD4D8,
#223CFF,
#F5FF5A,
#FF5555,
#A7EBFF

var abcArray = ["#800000", "#A36386", "#FFD4D8", "#223CFF", "#F5FF5A", "#FF5555", "#A7EBFF"];

function run() {
  var abcArray = ["#800000", "#A36386", "#FFD4D8", "#223CFF", "#F5FF5A", "#FF5555", "#A7EBFF"];

  var table = document.getElementsByClassName("spanrows2")[0];
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  var txt = document.createTextNode("Question 1 number: 1");

  table.appendChild(tr);
  td.appendChild(txt);
  tr.appendChild(td);
}

window.addEventListener("load", run, false);

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;
}

.spanrows1,
.spanrows2 {
  text-align: center;
}

.spanrows1 {
  width: 400px;
}

.spanrows2 {
  width: 600px;
}

.span2rows {
  text-align: left;
}

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

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

.alignTxt {
  text-align: center;
}

<div class="alignTxt"><span id="titleTxt"></span></div>
<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>

Answer 1

我相信你正在寻找document.getElementsByClassName。

此方法可以获取具有特定类名的所有元素。这是documention。

通过它，您将能够获得您的元素。

为了使事情随机化，你必须让计算机随机生成某种真/假值。为了实现这一点，Math.Random应该可以正常工作。这是documentation。

我故意排除代码示例，因为这是一项任务。我已经提到了一些特别有用的功能，并提供了有关这些功能的文档的链接。我这样做的目的是让你阅读这些函数并尝试自己实现它们。

如果您无法使用这两项功能，请不要害怕在这里寻求更多帮助。 ：）