Javascript 如何将长方体连续更改为随机颜色

我正在通过改变div的背景色来试验

setInterval

和

setTimeout

函数

我想在这里实现的是，我希望长方体连续地变换为随机颜色。我也有一个功能，我可以阻止改变它的颜色点击框框

var colorChanger=document.getElementById（“颜色转换器”）；
var r=Math.round（Math.random（）*255）；
var g=Math.round（Math.random（）*255）；
var b=Math.round（Math.random（）*255）；
函数changeColor（）{
colorChanger.style.backgroundColor=“rgb（“+r+”、“+g+”、“+b+”）；
}
var myTimer=setInterval（changeColor，3000）；
var running=true；
colorChanger.onclick=函数（）{
如果（正在运行）{
清除间隔（myTimer）；
colorChanger.innerHTML=“计时器已停止”；
运行=错误；
}否则{
myTimer=设置间隔（changeColor，3000）；
colorChanger.innerHTML=“”；
运行=真；
}
};
#颜色变换器{
宽度：200px；
高度：100px；
保证金：30像素自动；
背景色：#fff；
-webkit过渡：背景色0.7s；
-moz过渡：背景色0.7s；
过渡：背景色0.7s；
}
您只需在
changeColor
中生成随机的
rgb
s即可。请注意，您可能应该使用
Math.floor
而不是
Math.round
来获得公平的输出，您可以通过调用返回随机数的函数来使代码更加干燥：


var colorChanger=document.getElementById（“颜色转换器”）；
const randNum=（）=>Math.floor（Math.random（）*256）；
函数changeColor（）{
colorChanger.style.backgroundColor=`rgb（${randNum（）}，${randNum（）}，${randNum（）}）`；
}
var myTimer=setInterval（changeColor，3000）；
var running=true；
colorChanger.onclick=函数（）{
如果（正在运行）{
清除间隔（myTimer）；
colorChanger.innerHTML=“计时器已停止”；
运行=错误；
}否则{
myTimer=设置间隔（changeColor，3000）；
colorChanger.innerHTML=“”；
运行=真；
}
};
#颜色变换器{
宽度：200px；
高度：100px；
保证金：30像素自动；
背景色：#fff；
-webkit过渡：背景色0.7s；
-moz过渡：背景色0.7s；
过渡：背景色0.7s；
}
您只需在
changeColor
中生成随机的
rgb
s即可。请注意，您可能应该使用
Math.floor
而不是
Math.round
来获得公平的输出，您可以通过调用返回随机数的函数来使代码更加干燥：


var colorChanger=document.getElementById（“颜色转换器”）；
const randNum=（）=>Math.floor（Math.random（）*256）；
函数changeColor（）{
colorChanger.style.backgroundColor=`rgb（${randNum（）}，${randNum（）}，${randNum（）}）`；
}
var myTimer=setInterval（changeColor，3000）；
var running=true；
colorChanger.onclick=函数（）{
如果（正在运行）{
清除间隔（myTimer）；
colorChanger.innerHTML=“计时器已停止”；
运行=错误；
}否则{
myTimer=设置间隔（changeColor，3000）；
colorChanger.innerHTML=“”；
运行=真；
}
};
#颜色变换器{
宽度：200px；
高度：100px；
保证金：30像素自动；
背景色：#fff；
-webkit过渡：背景色0.7s；
-moz过渡：背景色0.7s；
过渡：背景色0.7s；
}

注：请注意，我使用jQuery是为了演示

附言：请注意，我使用jQuery是为了演示。
您已经非常接近了。只是您只需随机设置一次颜色。如果将随机颜色的生成移动到
changeColor
中，则会看到颜色在每个间隔处都会发生变化。另一件你可能要考虑的“连续”改变是将间隔设置为动画的持续时间。现在设置为3000，即3秒，动画设置为0.7秒。因此，在间隔中使用700（0.7秒）将使其连续


var colorChanger=document.getElementById（“颜色转换器”）；
var r=Math.round（Math.random（）*255）；
var g=Math.round（Math.random（）*255）；
var b=Math.round（Math.random（）*255）；
函数changeColor（）{
r=Math.round（Math.random（）*255）；
g=Math.round（Math.random（）*255）；
b=Math.round（Math.random（）*255）；
colorChanger.style.backgroundColor=“rgb（“+r+”、“+g+”、“+b+”）；
}
var myTimer=setInterval（changeColor，700）；
var running=true；
colorChanger.onclick=函数（）{
如果（正在运行）{
清除间隔（myTimer）；
colorChanger.innerHTML=“计时器已停止”；
运行=错误；
}否则{
myTimer=设置间隔（changeColor，700）；
colorChanger.innerHTML=“”；
运行=真；
}
};
#颜色变换器{
宽度：200px；
高度：100px；
保证金：30像素自动；
背景色：#fff；
-webkit过渡：背景色0.7s；
-moz过渡：背景色0.7s；
过渡：背景色0.7s；
}
你很接近。只是您只需随机设置一次颜色。如果将随机颜色的生成移动到
changeColor
中，则会看到颜色在每个间隔处都会发生变化。另一件你可能要考虑的“连续”改变是将间隔设置为动画的持续时间。现在设置为3000，即3秒，动画设置为0.7秒。因此，在间隔中使用700（0.7秒）将使其连续


var colorChanger=document.getElementById（“颜色转换器”）；
var r=Math.round（Math.random（）*255）；
var g=Math.round（Math.random（）*255）；
var b=Math.round（Math.random（）*255）；
函数changeColor（）{
r=Math.round（Math.random（）*255）；
g=Math.round（Math.random（）*255）；
b=Math.round（Math.random（）*255）；
colorChanger.style.backgroundColor=”
 // Generate A Random Color
function randomColor () {
  var red   = (Math.floor(Math.random() * 256));
  var green = (Math.floor(Math.random() * 256));
  var blue  = (Math.floor(Math.random() * 256)); 
  return 'rgb(' + red + ',' + green + ',' + blue +')';
}

$(document).ready(function () {
   setInterval(function() {
     var color = randomColor();
     $('body').css('background-color', color);
   }, 4000); // end of setInterval 
}