我正在尝试制作可以改变其颜色的div。这是我的代码:
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);
};.style{
background-color: pink;
top: 50px;
left: 50px;
height: 50px;
width: 50px;
}<body>
<div class="style"></div>
</body>但我不知道为什么它不起作用。
编辑:该脚本还会使浏览器崩溃
最佳答案
单个元素
假设您的标记是这样的:
<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>关于javascript - 如何在 JavaScript 中制作带有延迟的无限循环？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26451401/