在特定时间段内使用 JavaScript 更改 HTML 元素的背景颜色？答案

【问题标题】：Change background color of HTML elements with JavaScript in a certain time period?在特定时间段内使用 JavaScript 更改 HTML 元素的背景颜色？
【发布时间】：2015-01-24 00:55:50
【问题描述】：

我有大约 26 个 html 元素，我希望在 JavaScript 中实现以下效果：

有可能做这样的事情吗？

我试图这样做：

var j = 2000;
        for (i = 1; i <= 26; i++) {
            setInterval(function() {document.getElementById('Q' + i).style.backgroundColor = '#00a300'}, j);
            setInterval(function() {document.getElementById('Q' + i).style.color = '#FFFFFF'}, j);
            j = j + j;
            setInterval(function() {document.getElementById('Q' + (i-1)).style.backgroundColor = '#e1e1e1'}, j);
            setInterval(function() {document.getElementById('Q' + (i-1)).style.color = '#666666'}, j);
        }

我是 JavaScript 新手，从未使用过计时器。

【问题讨论】：

标签： javascript html css animation timer

【解决方案1】：

css

div {
    display:block;
    background:black;
    width:200px;
    height:40px;
    margin:2px 0px 0px 0px;
}

html

<div></div><div></div><div></div>....

js

function animateStuff(domElements, baseColor, activeColor, delay) {
    var count=0;
    var animationRun=1;
    var frames=0;
    function frame() {
        frames++;

        if((frames%delay)==1){//set delay only animate on loops that the set delay has past.
            count++;
            if(count>=domElements.length){
                count=0;//back to the beginning of the loop.
            }
            // make all the divs black
            for(var x=0;x<domElements.length;x++){
                domElements[x].style.backgroundColor=baseColor;
            }
            // make one red
            domElements[count].style.backgroundColor=activeColor;
        }

        if(animationRun){
            window.requestAnimationFrame(frame);
        }
    }
    frame();
}
//get an array of elements to animate.
var elements = document.getElementsByTagName("div");
//call animation and pass in the array of elements along with a few color settings and the delay.
animateStuff(elements,"black","red",100);

RequestAnimationFrame() 平均会为您提供一致的 ~60fps。当未显示选项卡时，它还停止动画循环。显示选项卡时动画开始。 (frames%delay)==1 是为了减慢动画的速度使其可见。

使用这种方法的一个很好的例子是我在此处提供源代码的 javascript 游戏引擎。 https://github.com/Patrick-W-McMahon/Jinx-Engine

【讨论】：

我相信你的回答是有效的，但在我的情况下，它在我正在测试的 3 个浏览器（IE、Firefox、Chrome）中给出了错误，在 Firefox 中给出了错误too much recursion 和chrome 和 IE ir 都给了我Maximum call stack size exceeded 我觉得我的 dom 元素太多了...
Window.requestAnimationFrame() 传递要由系统硬件渲染的函数。这让操作系统可以处理循环并仍然为系统上的其他应用程序留出时间。只要animationRun==true，它就会运行一个循环。如果你不使用 window.requestAnimationFrame()，它只会给你一个关于执行时间的错误。
如果您想要更详细的动画示例，请查看我在示例中提供的链接上的源代码。
setTimeout() 不应再用于动画所有未来的动画应使用 window.requestAnimationFrame() 因为它将动画循环传递给系统操作系统让操作系统正确处理循环并仍然管理正常操作系统。 setTimeout() 出错，您最终会收到“递归过多”和“超出最大调用堆栈大小”错误。不要使用 setTimeout() 来做动画循环。
我已经更新了我的示例以显示它在 html 页面上使用，因此您可以看到它正在工作。您遇到的错误是由于我在输入时犯了一个小错字。您会看到这个示例效果最好并且是正确的答案。

【解决方案2】：

我使用 jQuery.animate 函数和 jQuery 颜色插件构建了一个小小提琴示例来创建背景颜色的淡入淡出动画。

请在此处找到小提琴：http://jsfiddle.net/nafm74yd/15/

请注意，在 jsfiddle 的左侧面板中使用了一个外部资源...它指向 jQuery 颜色插件到其 CDN。

脚本是这样的：

    function animate(idx) {
        $($('.block')[idx]).animate({ backgroundColor: "#ff0000" }, 200, function () {
            var idx2 = idx;
            $($('.block')[idx2]).animate({ backgroundColor: "#ffffff" }, 200, function () {});
            if (idx >= $('.block').length - 1) {
                setTimeout(animate(0), 200);
            } else setTimeout(animate(idx + 1), 200);
        });
    }

    $(document).ready(function () {
        animate(0);
    });

【讨论】：