时间戳

首页 > 解决方案 > 随机循环按计划工作，但在几次调用后卡在特定的随机数上

javascript - 随机循环按计划工作，但在几次调用后卡在特定的随机数上

问题描述

我使用 css 和 html 创建了 13 个看起来像盒子的对象，每个对象都有独特的背景颜色。然后用javascript添加了一些随机变色功能。

我想要发生的事情：单击 13 个框中的任何一个后，每个框都会变成“新”颜色。这种“新”颜色将从每个盒子最初固定的颜色中随机选择。这将永远持续下去。

发生了什么：当单击框时，它们确实会像我想要的那样改变颜色，但是在单击大约 5-10 次后，它们都会变成完全相同的颜色。

如何让功能继续运行而不停留在某种颜色？

我可能搞砸了 for 循环/所有的 javascript，但无法弄清楚。非常感谢任何帮助。

这是我的完整代码：https ://codepen.io/zaemees/pen/roGgGV

一些代码：

html:

<div class="aqua1 specs"></div>
<div class="chartreuse1 specs"></div>
<div class="deeppink1 specs"></div>
<div class="dodgerblue1 specs"></div>
<div class="gold1 specs"></div>
<div class="indigo1 specs"> </div>
<div class="lightpink1 specs"></div>
<div class="mediumpurple1 specs"></div>
<div class="coral1 specs"></div>
<div class="springgreen1 specs"></div>
<div class="red1 specs"></div>
<div class="peachpuff1 specs"></div>
<div class="deepskyblue1 specs"></div>

js：

var bloop = document.getElementsByClassName('specs');

for (var i = 0; i < bloop.length; i++){
  bloop[i].onclick = function() {
    for (var i = 0; i < bloop.length; i++){
   bloop[i].style.backgroundColor = window.getComputedStyle(bloop[Math.floor(Math.random()*13)]).getPropertyValue('background-color');
  }
 }
}

标签： javascripthtmlcssfor-loop

解决方案

我不确定我是否完全理解这段代码，但据我所知，您在两个 for 循环中都使用了变量“i”两次。我不知道这是否是故意的，但是将嵌套变量“i”更改为“j”应该可以完成这项工作。我希望这会有所帮助！

推荐阅读