JS

Question

我正在尝试运行一个循环，通过随机生成十六进制代码来不断更改颜色。我试图在这里搜索，但找不到任何这样做。

我无法弄清楚如何让循环运行并持续改变颜色（直到循环结束）。我是JavaScript的新手。

这是我的JSFiddle。

HTML

<body>
<div id="outer">
    <div id="test">Generate colors.</div>
</div>
</body>

JS

for ( i = 0; i < 20000; i++ ) {
    var t = document.getElementById('test');
    var z = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    t.style.color = z
}

Answer 1

您无法在循环中更改颜色，元素的颜色不会更改，直到您退出代码并将控件返回到浏览器。

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

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

演示：http://jsfiddle.net/et3qtr3t/

Answer 2

你对小提琴的评论setInterval是正确的。它会定期更改颜色（根据定义的毫秒数）。

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

http://jsfiddle.net/kkfnjpsh/5/

var i = 0;
var runner = setInterval(function(){
    if(i < 20000) {
        var t = document.getElementById('test');
        var z = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
        t.style.color = z;
        i++;
    }
    else {
        clearInterval(runner);
    }
}, 3000);

Answer 3

我知道它已经被回答了，但我的包含了明确的设定计时器。

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);
}

结果：Result

Answer 4

你没有循环 - 你间隔：

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);

使用JSFiddle：http://jsfiddle.net/046q6ohf/

循环中随机更改innerHTML颜色

HTML

JS

4 个答案: