javascript - 如何连续将盒子变成随机颜色

Question

我正在通过更改 div 的背景颜色来试验 setInterval 和 setTimeout 函数。

我在这里想要实现的是我希望盒子连续变成随机颜色。我还有一个功能，可以通过单击框来阻止框更改其颜色。

var colorChanger = document.getElementById("colour-changer");
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);

function changeColor(){

  colorChanger.style.backgroundColor =  "rgb("+r+","+g+","+b+")";

}

var myTimer = setInterval(changeColor, 3000);
var running = true;

colorChanger.onclick = function(){

  if(running) {
    clearInterval(myTimer);
    colorChanger.innerHTML = "Timer stopped";
    running = false;
  } else {
    myTimer = setInterval(changeColor, 3000);
    colorChanger.innerHTML = "";
    running = true;
  }
 
};

#colour-changer {
  width:200px;
  height:100px;
  margin:30px auto;
  background-color:#fff;

  -webkit-transition:background-color 0.7s;
  -moz-transition: background-color 0.7s;
  transition:background-color 0.7s;
}

  <div id="colour-changer"></div>

为什么这不能连续改变随机颜色？

Answer 1

您只需要在 changeColor 中生成随机的 rgb。请注意，您可能应该使用 Math.floor 而不是 Math.round 以获得公平的输出，并且您可以通过调用返回随机数的函数来使代码更干燥编号:

var colorChanger = document.getElementById("colour-changer");

const randNum = () => Math.floor(Math.random()*256);

function changeColor(){
  colorChanger.style.backgroundColor =  `rgb(${randNum()},${randNum()},${randNum()})`;
}

var myTimer = setInterval(changeColor, 3000);
var running = true;

colorChanger.onclick = function(){

  if(running) {
    clearInterval(myTimer);
    colorChanger.innerHTML = "Timer stopped";
    running = false;
  } else {
    myTimer = setInterval(changeColor, 3000);
    colorChanger.innerHTML = "";
    running = true;
  }
 
};

#colour-changer {
  width:200px;
  height:100px;
  margin:30px auto;
  background-color:#fff;

  -webkit-transition:background-color 0.7s;
  -moz-transition: background-color 0.7s;
  transition:background-color 0.7s;
}

<div id="colour-changer"></div>