Question

我试图制作可以改变颜色的div。这是我的代码：

＆＃13;

window.onload = function () {
    for (;;){
        setTimeout(function () {
            document.querySelector('style').style.backgroundColor = colors[rand(colors.length)];
        }, 2000);        
    }
}

var colors = [
    'red',
    'green',
    'blue',
    'yellow',
    'magenta',
    'pink'
];


var rand = function (max) {
    return Math.floor(Math.random() * max);
};

＆＃13;

.style{
    background-color: pink;
    top: 50px;
    left: 50px;
    height: 50px;
    width: 50px;
}

＆＃13;

<body>
  <div class="style"></div>
  </body>

＆＃13;

但是我无法找出它为什么不起作用编辑：该脚本也崩溃浏览器

Answer 1

单个元素

假设你的标记是这样的：

<body>
    <div id="my-id"></div>
</body>

要创建“颜色循环”，您必须使用setInterva()设置一个无限次执行的函数（使用定义的间隔）来更改颜色。这是正确的代码：

var cur_color = -1,
    colors = [
        'red',
        'green',
        'blue',
        'yellow',
        'magenta',
        'pink'
    ];

var myInterval = setInterval(function() {
    document.getElementById('my-id').style.backgroundColor = colors[(++cur_color) % colors.length];
}, 2000);

这将每2秒更改一次颜色。如果要停止它，可以使用clearInterval()功能：

clearInterval(myInterval);

多个元素

假设你的标记是：

<body>
    <div class="my-class"></div>
    <div class="my-class"></div>
    <div class="my-class"></div>
</body>

您可以改为使用getElementsByClassName()方法：

var myInterval = setInterval(function() {
    var elements = document.getElementsByClassName('my-class');
    ++cur_color;
    for (var i=0; i<elements.length; i++) elements[i].style.backgroundColor = colors[cur_color % colors.length];
}, 2000);

工作示例

这是一个包含多个元素的工作示例：

var cur_color = -1,
    colors = [
        'red',
        'green',
        'blue',
        'yellow',
        'magenta',
        'pink'
    ];

var myInterval = setInterval(function () {
    var elements = document.getElementsByClassName('my-class');
    ++cur_color;
    for (var i = 0; i < elements.length; i++) elements[i].style.backgroundColor = colors[cur_color % colors.length];
}, 2000);

.my-class {
    background-color: pink;
    top: 50px;
    left: 50px;
    height: 50px;
    width: 50px;
    margin: 10px;
}

<body>
    <div class="my-class"></div>
    <div class="my-class"></div>
    <div class="my-class"></div>
<body>

Answer 2

您需要setInterval功能。

此外，您需要style选择器（类选择器），而不是.style。如果您使用的是jquery，则可以使用$(".style")代替document.querySelector(...)：

window.onload = function() {
  setInterval(function() {
    document.querySelector('.style').style.backgroundColor = colors[rand(colors.length)];
    //$('.style').css("backgroundColor", colors[rand(colors.length)]);
  }, 2000);
}

var colors = [
  'red',
  'green',
  'blue',
  'yellow',
  'magenta',
  'pink'
];


var rand = function(max) {
  return Math.floor(Math.random() * max);
};

.style {
  background-color: pink;
  top: 50px;
  left: 50px;
  height: 50px;
  width: 50px;
}

<body>
  <div class="style"></div>
</body>

Answer 3

请参阅此jsFiddle中的代码，以及我对this SO-question

的回答

您无法在循环中执行setTimeout。创建一个函数，并在下一个setTimeout：

中调用它

function changeColor() {
            document.querySelector('.style')
             .style.backgroundColor = colors[rand(colors.length)];
            setTimeout(changeColor,1000);
}

Here's你的jsFiddle，重写了

如何在JavaScript中使延迟无限循环？

3 个答案:

单个元素

多个元素

工作示例