logo标签列表

Div背景颜色未改变

javascripthtmlcss
3
我写了一个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;

}
2
getElementByID() 通过元素的 ID 选择元素，而不是通过标签。 - PA.
  1. 在函数changeDivColor()中，您没有一个id为'div_id'的div。
  2. 您的示例中所有其他一组div都是做什么用的？
 - Anubhab
谢谢，我编辑了帖子，但它仍然不能在时间事件上工作。只有在点击后才会改变颜色，而不是在2秒后。其他div没有任何反应，我只在一个div上进行测试。 - Jason
3个回答
1
在 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;
}
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); 与 window.setInterval(changeDivColor(), 2000); 的区别：

谢谢！这个有效了，是我自己的语法错误。 - Jason
0

工作的fiddle。

你的代码中没有div_id：

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

应该是：

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

或者你可以改变is on标签<div id="div" onclick="timeChange()"></div>。
希望这有所帮助。
谢谢，已经修复了那个错误，但是行为仍然相同。只有在点击后才会有变化，而不是之后。 - Jason
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接