Question

我试图在每250毫秒后更改html表格中两个单元格的颜色。

如果我取消注释setInterval代码的第二个块，即使是第一个颜色更改也会停止。

我想同时更改单元格1和单元格2中的颜色。感谢

Answer 1

您正在使用相同的标志，这可能导致某种锁定。最简单的解决方案是为第二个版本添加另一个标志 - 但是只用一个间隔函数就不会更好吗？如果我是你，我可能也想要缓存元素，而不是在每个时间间隔进行查找。

更新

从（删除）注释中，您想要将元素动态添加到相同的区间函数中吗？我为你写了一个小插件（是的，在工作中缓慢而无聊的一天）。您可以在运行时添加元素并更改CSS类名，甚至可以停止间隔。虽然只在FireFox中测试过，但它是标准的JS，应该适用于大多数浏览器...

JavaScript文件

(function (window, document, undef) {

    var CB = {};

    if (typeof window.CB !== typeof undef) {
        return;
    }

    CB = function () {

        var elements   = [],
            classes    = ['first-round', 'second-round'],
            intervalId = 0;


        var flag     = 0;
        var switcher = function () {

            for (var i = 0; i < elements.length; i++) {
                elements[i].className = classes[flag];
            }

            flag = 1 - flag;

        };


        return {

            setClasses: function (first, second) {

                classes = [first, second];

            },

            addElement: function (element) {

                elements.push(element);

            },

            init: function (element, firstClass, secondClass) {

                this.addElement(element);
                this.setClasses(firstClass, secondClass);

                return this;

            },

            start: function (interval) {

                intervalId = setInterval(switcher, interval);

            },

            stop: function () {

                clearInterval(intervalId);

            }

        }

    }();

    window.CB = CB;

})(window, document);

带有使用示例的HTML测试页

测试在运行时添加了两个额外元素（5秒超时），并且还更改了类

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <style>

            .container {
                width: 600px;
                margin: 50px auto;
            }
                .container > div {
                    width: 300px;
                    height: 50px;
                    float: left;
                }
                .container .clear {
                    clear: both;
                    float: none;
                    width: 0;
                    height: 0;
                }

            .first-class {
                background-color: red;
            }
            .second-class {
                background-color: blue;
            }

            .new-first-class {
                background-color: black;
            }
            .new-second-class {
                background-color: grey;
            }

        </style>

    </head>
    <body>

        <div class="container">
            <div id="Id1">

            </div>

            <div id="Id2">

            </div>
            <div class="clear"></div>
        </div>

        <div class="container">
            <div id="Id3">

            </div>
            <div id="Id4">

            </div>
            <div class="clear"></div>
        </div>

        <script src="CB.js"></script>
        <script>

            window.onload = function () {

                CB.init(document.getElementById('Id1'), 'first-class', 'second-class');
                CB.addElement(document.getElementById('Id2'));

                CB.start(120);

                setTimeout(function () {

                    CB.addElement(document.getElementById('Id3'));
                    CB.addElement(document.getElementById('Id4'));
                    CB.setClasses('new-first-class', 'new-second-class');

                }, 5000);

            };

        </script>

    </body>
</html>

Answer 2

从代码略有变化：http://jsfiddle.net/DYP69/6/

既然你说他们希望他们同时改变颜色，你可以只使用一个间隔：

var flag = true;

setInterval(
    function(){
        if (flag) {
            document.getElementById("Id1").style.background = "red";
            document.getElementById("Id2").style.background = "blue";
        }
        else{
            document.getElementById("Id1").style.background = "blue";
            document.getElementById("Id2").style.background = "red";
        }
    flag = !flag;
    }, 250);

编辑：整理代码。

Answer 3

试试这个。

var flag = true;

setInterval(
function changeColor () {
    if(flag==true){
        document.getElementById("Id1").style.background="red";
        document.getElementById("Id2").style.background="red";
        flag=false;
    }
    else if (flag==false){
    document.getElementById("Id1").style.background="blue";
    document.getElementById("Id2").style.background="blue";
    flag = true;
    }
}, 110);

Setinterval更改单元格的颜色

3 个答案: