Question

我制作了一个javascript函数，每隔几秒就将背景颜色更改为随机颜色，但它不起作用。它会改变点击的颜色，但不会每隔几秒就改变一次。我希望背景每隔几秒就会改变一次。我用一个onclick事件在一个div上测试它。我也不想使用jQuery。谢谢你的帮助！

的index.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">

  </head>
  <body>
    <div id="div" onclick="timeChange()"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script src="myScript.js">
    </script>
  </body>
</html>

myScript.js

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function changeDivColor() {
    var div = document.getElementById("div");
    var color = getRandomColor();
    div.style.backgroundColor = color;
}

function timeChange() {
    window.setInterval(changeDivColor(), 2000);
}

的main.css

div {
float: left;
width: 200px;
height: 200px;
background-color: black;
margin-bottom: 20px;
margin-right: 20px;

}

Answer 1

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function changeDivColor() {
    var div = document.getElementById("div");
    var color = getRandomColor();
    div.style.backgroundColor = color;
}

function timeChange() {
    window.setInterval(changeDivColor, 2000);
}

div {
    float: left;
    width: 200px;
    height: 200px;
    background-color: black;
    margin-bottom: 20px;
    margin-right: 20px;
}

<div id="div" onclick="timeChange()"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

setInterval需要一个功能：

window.setInterval(changeDivColor, 2000); vs window.setInterval(changeDivColor(), 2000);

Answer 2

在window.onload上创建间隔。我已将interval更改为variable，您可以稍后使用它来清除时间间隔。

window.onload = function() {
    var intervalChange = setInterval(changeDivColor, 2000);
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function changeDivColor() {
    var div = document.getElementById('div');
    var color = getRandomColor();
    div.style.backgroundColor = color;
}

Answer 3

<强> Working fiddle

代码中没有div_id：

var div = document.getElementById('div_id');

应该是：

var div = document.getElementById('div');

或者您可以更改标记<div id="div" onclick="timeChange()"></div>上的标记。

希望这会有所帮助。

Div背景颜色不变

3 个答案: