连续随机化每个 div 的颜色

Question

I'm trying to replicate what is seen in this gif: Grid Layout我正在尝试复制此 gif 中看到的内容：网格布局

I have to randomize the colors of each div inside the grid-container every second using setInterval() and querySelectorAll() after clicking the button on the top left corner, and display the current time as seen in the GIF.单击左上角的按钮后，我必须每秒使用setInterval()和querySelectorAll()随机化网格容器内每个 div 的颜色，并显示在 GIF 中看到的当前时间。 I know that the colors are randomly selected and actually use the CSS rgba() function.我知道颜色是随机选择的，实际上使用了 CSS rgba() 函数。 Here's what I have in my html file:这是我的 html 文件中的内容：

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

</style>

<script>
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);

function changeColor(){
  for (const elem of document.querySelectorAll('div')) {
    r = Math.round(Math.random()*255);
    g = Math.round(Math.random()*255);
    b = Math.round(Math.random()*255);
    elem.style.backgroundColor =  "rgb("+r+","+g+","+b+", 0.8)";
  }

  var myTimer = setInterval(changeColor, 1000);
  var running = true;
}
</script>

</head>
<body>

<h1>Grid Layout</h1>

<p>This grid layout contains six columns and three rows:</p>

<div class="flex-container">
    <button onclick="changeColor()">GO!</button>
    <p id="timeinfo">TIME</p>
</div>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

I'm lost in regards to that.对此我很迷茫。 Any insight would be appreciated.任何见解将不胜感激。 Thanks!谢谢！

Answer 1

You need to take the setInterval() function out of the changeColor() function.您需要从 changeColor() 函数中取出 setInterval() 函数。 You are creating a new interval with each subsequent changeColor() recursive call, and that is what's causing the speed up until we become epileptic.您正在为每个后续的 changeColor() 递归调用创建一个新的间隔，这就是导致速度加快的原因，直到我们变得癫痫。 Plus add the more specific selector others have mentioned ('.grid-container > div').另外添加其他人提到的更具体的选择器（'.grid-container > div'）。 This is something that is probably better done in a reactive style, rather than looping through an array of elements every second, but if you are just getting into html/js/css this is a pretty good little test.这在响应式风格中可能会更好，而不是每秒循环遍历元素数组，但如果您刚刚进入 html/js/css，这是一个非常好的小测试。 I would probably do something more like this:我可能会做更多这样的事情：

var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);
var myTimer;

function startSwitching() {
  myTimer = setInterval(changeColor, 1000);
}

function stopSwitching() {
  clearInterval(myTimer);
}

function changeColor(){
  for (const elem of document.querySelectorAll('.grid-container > div')) {
    r = Math.round(Math.random()*255);
    g = Math.round(Math.random()*255);
    b = Math.round(Math.random()*255);
    elem.style.backgroundColor =  "rgb("+r+","+g+","+b+", 0.8)";
  }
}

You need to be careful using intervals and make sure you clean up after yourself, or you could crash the browser.您需要小心使用间隔并确保自己清理干净，否则可能会导致浏览器崩溃。 Also, you didn't really ask a question, so it's unclear what exactly you are wanting to change.此外，您并没有真正提出问题，因此目前还不清楚您究竟想要改变什么。

Answer 2

document.querySelectorAll('div') actually returns a list of elements. document.querySelectorAll('div')实际上返回一个元素列表。 In order to change the styling, you'll want to iterate through the elements.为了更改样式，您需要遍历元素。 Here's one way you could go about doing that:您可以通过以下一种方法来做到这一点：

for (const elem of document.querySelectorAll('.grid-container > div')) {
    r = Math.round(Math.random()*255);
    g = Math.round(Math.random()*255);
    b = Math.round(Math.random()*255);
    elem.style.backgroundColor = "rgb("+r+","+g+","+b+")";
}

Answer 3

在for循环中添加document.querySelectorAll('.grid-container > div') ，这样只有grid-container里面的div才会变色。

连续随机化每个 div 的颜色

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-10-23 18:31:30

解决方案2
0 2020-10-23 17:17:05

解决方案3
0 2020-10-23 17:45:34

连续随机化每个 div 的颜色

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-10-23 18:31:30

解决方案2 0 2020-10-23 17:17:05

解决方案3 0 2020-10-23 17:45:34

解决方案1
1 已采纳 2020-10-23 18:31:30

解决方案2
0 2020-10-23 17:17:05

解决方案3
0 2020-10-23 17:45:34