Question

我正在使用vanilla javascript进行练习，每隔400ms将网格中的随机方块更改为随机颜色，但是一旦改变了颜色，方形就不能改变另外3s的颜色。这种延迟逻辑就是我所依赖的。

检查当前方块是否刚刚改变颜色以及防止该方块改变颜色3秒的最佳方法是什么？

正如您所看到的，一旦方形颜色发生变化，我就尝试添加新类。我也尝试将设置超时放在colorChange函数中。

HTML：

<div id="content">
  <div class = "box" id="square1"></div>
  <div class = "box" id="square2"></div>
  <div class = "box" id="square3"></div>
  <div class = "box" id="square4"></div> <br>
  <div class = "box" id="square5"></div>
  <div class = "box" id="square6"></div>
  <div class = "box" id="square7"></div>
  <div class = "box" id="square8"></div> <br>
  <div class = "box" id="square9"></div>
  <div class = "box" id="square10"></div>
  <div class = "box" id="square11"></div>
  <div class = "box" id="square12"></div> <br>
  <div class = "box" id="square13"></div>
  <div class = "box" id="square14"></div>
  <div class = "box" id="square15"></div>
  <div class = "box" id="square16"></div> 
</div>

使用Javascript：

setInterval(colorChange, 400);

if (square.className = "colored") {
    square.setTimeout(setColor(), 3000);
} 

function colorChange() {
    var colors = ["red", "blue", "yellow", "green", "orange", "purple"];
    var specificColor = colors[Math.floor(Math.random()*colors.length)];
    var randomId = Math.ceil(Math.random() * 17);
    var square = document.getElementById("square"+randomId);
    square.style.backgroundColor = specificColor;
    square.addClass = "colored";
}

感谢您的帮助。

Answer 1

在解决方案中，我制作了一个包含符合条件的颜色变化方块的数组。每当我们改变颜色时，从阵列中移除正方形并添加超时，在3秒后将正方形添加回数组。看看解决方案是否适合您。

＆＃13;

var squares = [];
for(var i=0;i<=16;i++)
  squares[i] = i;
var colors = ["red", "blue", "yellow", "green", "orange", "purple"];
setInterval(colorChange, 400);


function colorChange() {    
var specificColor = colors[Math.floor(Math.random()*colors.length)];
var randomId = Math.ceil(Math.random() * (squares.length-1));
var sq = squares[randomId];
var square = document.getElementById("square"+sq);
square.style.backgroundColor = specificColor;
square.addClass = "colored";
squares.splice(randomId,1);
setTimeout(function(){squares.push(sq);}, 3000);
}

＆＃13;

#content {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.box {
  width: 98px;
  height: 98px;
  border: 1px solid red;
  float: left;
}

＆＃13;

<div id="content">
  <div class = "box" id="square1"></div>
  <div class = "box" id="square2"></div>
  <div class = "box" id="square3"></div>
  <div class = "box" id="square4"></div> <br>
  <div class = "box" id="square5"></div>
  <div class = "box" id="square6"></div>
  <div class = "box" id="square7"></div>
  <div class = "box" id="square8"></div> <br>
  <div class = "box" id="square9"></div>
  <div class = "box" id="square10"></div>
  <div class = "box" id="square11"></div>
  <div class = "box" id="square12"></div> <br>
  <div class = "box" id="square13"></div>
  <div class = "box" id="square14"></div>
  <div class = "box" id="square15"></div>
  <div class = "box" id="square16"></div> 
</div>

＆＃13;

Answer 2

为什么不创建一个Square对象来保留对dom节点的引用，以及一个标志来查看它是否在过去3秒内被更改了？
您可以创建Squares数组，选择Square并检查它是否已标记;如果不是，请更改其颜色，否则再次调用Square选择功能。

请参阅this codepen

哦，并使用Math.floor否则你不会改变第一个方格。

<强> JS

const COLOR_CHANGE_INTERVAL = 400;
const DRYING_INTERVAL = 3000;

let Square = function(tag){
  this.dom = tag;
  this.flagged = false;
}

// Create an array and populate it
let squares = [];

// convert from html collection into array
const _squares = Array.prototype.slice.call(document.getElementsByClassName("box"));
_squares.forEach(function(square,idx){
  squares.push(new Square(square));
});

setInterval(chooseSquare, COLOR_CHANGE_INTERVAL, squares);

function chooseSquare(arr){
  var randomId = Math.floor(Math.random() * arr.length);
  const currentSquare = arr[randomId];
  if(!currentSquare.flagged){
    colorChange(currentSquare);
  } else {
    chooseSquare(currentSquare);
  }
}

function colorChange(square) {
    var colors = ["red", "blue", "yellow", "green", "orange", "purple"];
    var specificColor = colors[Math.floor(Math.random()*colors.length)];
    square.dom.style.backgroundColor = specificColor;
    square.flagged = true;
    setTimeout(function(){
      square.flagged = false;
    }, DRYING_INTERVAL); 
}

Answer 3

看看这是否适合您：

＆＃13;

setInterval(colorChange, 400);

var timeout = new Array(16);

function colorChange() {
    var colors = ["red", "blue", "yellow", "green", "orange", "purple"];
    var specificColor = colors[Math.floor(Math.random()*colors.length)];
    var randomId = Math.ceil(Math.random() * 16);
    if(new Date().getTime() - (timeout[randomId-1] || 0) >= 3000) {
      timeout[randomId-1] = new Date().getTime();
      var square = document.getElementById("square"+randomId);
      square.style.backgroundColor = specificColor;
      square.addClass = "colored";
    }
}

＆＃13;

#content {
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.box {
  width: 98px;
  height: 98px;
  border: 1px solid black;
  float: left;
}

＆＃13;

<div id="content">
  <div class = "box" id="square1"></div>
  <div class = "box" id="square2"></div>
  <div class = "box" id="square3"></div>
  <div class = "box" id="square4"></div> <br>
  <div class = "box" id="square5"></div>
  <div class = "box" id="square6"></div>
  <div class = "box" id="square7"></div>
  <div class = "box" id="square8"></div> <br>
  <div class = "box" id="square9"></div>
  <div class = "box" id="square10"></div>
  <div class = "box" id="square11"></div>
  <div class = "box" id="square12"></div> <br>
  <div class = "box" id="square13"></div>
  <div class = "box" id="square14"></div>
  <div class = "box" id="square15"></div>
  <div class = "box" id="square16"></div> 
</div>

＆＃13;

如果该方块的颜色刚刚改变，如何延迟改变网格中正方形的背景颜色？

3 个答案: