Javascript 在循环中随机更改innerHTML颜色

我试图运行一个循环，通过随机生成十六进制代码来不断改变颜色。我试图在这里搜索，但找不到任何与此相关的内容

我不知道如何让循环运行并持续更改颜色（直到循环结束）。我是JavaScript新手

这是我的

HTML

生成颜色。

JS （i=0；i<20000；i++）的

{
var t=document.getElementById（'test'）；
var z='#'+（Math.random（）*0xFFFFFF不能更改循环中的颜色，只有退出代码并将控件返回到浏览器，元素的颜色才会更改

可以使用间隔运行代码，并每次将控件返回到浏览器：

window.setInterval(function(){
  var t = document.getElementById('test');
  var z = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
  t.style.color = z
}, 100);

window.setInterval（函数（）{
var t=document.getElementById（'test'）；
var z='#'+（Math.random（）*0xFFFFFF您在fiddle上的注释
setInterval
是正确的。它将使颜色定期更改（根据定义的毫秒）

但是您必须删除
for
循环，因为它将立即运行，您甚至看不到更改……您必须管理自己的变量计数器，并清除它之后的间隔：


var i=0；
var runner=setInterval（函数（）{
如果（i<20000）{
var t=document.getElementById（'test'）；
var z='#'+（Math.random（）*0xFFFFFF我知道它已经被回答了，但是我的包括设置计时器的cleartimeout

var myVar = setInterval(function(){changeColor()}, 1000);
setTimeout(function(){clearInterval(myVar)}, 5000);

调用setTimeout中的第二个参数可以用作计时器，因此动画会在之后停止，在本例中，它被设置为5秒

function changeColor() {
    var t = document.getElementById('test');
    var z = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    t.style.color = z;
    console.log(z);
}

函数changeColor（）{
var t=document.getElementById（'test'）；
var z='#'+（Math.random（）*0xFFFFFF您不循环-您的间隔：

var target= document.getElementById('test'),
colorChange = function() {
    target.style.color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
};

// run interval
var d = setInterval(function() {

     colorChange();
}, 500);

// clear after 5s

setTimeout(function() {
    clearInterval(d);
}, 5000);

var target=document.getElementById（'test'），
colorChange=函数（）{
target.style.color='#'+（Math.random（）*0xffffffffthat
for
循环将执行得非常快，而且很可能看起来它甚至从未更改过颜色，fyisisnce
t
没有更改，您可以将其分配到循环外部。@tymeJV当我尝试增加循环的持续时间时（使I<20000000，等等）显示div只需要更长的时间。就是这样！非常感谢。你知道我在哪里可以找到一些说明元素颜色无法更改的文档吗？我正在寻找一段时间..将在计时器启动时接受expires@OverMindfor循环在X时间内运行Y个循环，这意味着每个循环花费的时间c=Y/X（大约）。即使c比访问DOM和执行更改所需的时间长，但每次更改的持续时间都很短，以至于您不会注意到。@OverMind:查找有关事件循环的信息将为您提供一些相关信息。例如，这一点的含义不太清楚，但有一个开始：@royhowie:没错，但这不是原因儿子。如果你循环很长时间，那么即使你错过了绝大多数更改，也会看到一些更改。在代码运行时，浏览器只是冻结，因此在循环之后才会显示任何内容。
var myVar = setInterval(function(){changeColor()}, 1000);
setTimeout(function(){clearInterval(myVar)}, 5000);

function changeColor() {
    var t = document.getElementById('test');
    var z = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    t.style.color = z;
    console.log(z);
}

var target= document.getElementById('test'),
colorChange = function() {
    target.style.color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
};

// run interval
var d = setInterval(function() {

     colorChange();
}, 500);

// clear after 5s

setTimeout(function() {
    clearInterval(d);
}, 5000);