个人中心
gpt4 book ai didi

javascript - 如何在 JavaScript 中制作带有延迟的无限循环？

转载 作者：行者123 更新时间：2023-11-28 11:09:35 25 4
gpt4 key购买 nike

我正在尝试制作可以改变其颜色的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/

25 4 0
文章推荐： ios - CKQuery存在时CKQueryOperation存在的原因
文章推荐： javascript - 如果已达到最大高度，则渲染多个内联元素
文章推荐： css - 传真打印结果与计算机打印结果不同。
文章推荐： html - 标题部分的视差效果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com