我很难使我制作的网格上的灯一个接一个地出现。目前,所有的灯光都立即点亮,但我不确定如何使这些盒子彼此点亮。

我粘贴了以下代码:

的HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script language="JavaScript" src="script.js">
</script>
</head>
<body>

<div class="container">
    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square1id" class="box spacing"></div>
    <div class="box"></div>

    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square2id" class="box spacing"></div>
    <div class="box"></div>

    <div id="square3id" class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square4id" class="box spacing"></div>
    <div class="box"></div>

    <div  id="square5id" class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square6id" class="box spacing"></div>
    <div class="box"></div>
</div>

</body>
</html>


CSS:

 body{
    background-color:#000000;
    margin:0;
    padding:0;
}

h1{
  color:#ffffff;
  text-align:center;
}

.container{
    overflow:hidden;
    width:860px;
    margin-left:250px;
    margin-top:20px;
}
.box{
    width:210px;
    height:120px;
    float:left;
    background-color:#4D4D4D;
    margin-bottom:3px;
}

.spacing{
    margin-right:3px;
}


脚本:

  $(document).ready(function(){

    var colourinfo = {
        square1id: [
                    '#000000'
                    ],

        square2id: [
                    '#ffffff'
                    ],
        square3id: [
                    '#FFE600'
                    ],
        square4id: [
                    '#FFE600'
                    ],
        square5id: [
                    '#FFE600'
                    ],
square6id: [
                    '#FFE600'
                    ]

    };

    var count = 0;

    var changecol = function(){
        $.each(colourinfo, function(tileid, colarray){
           $('#'+tileid).css('background-color', colarray[count%colarray.length]);
        });
        count++;
    };

    setInterval(changecol, 1000);
});


我将非常感谢您对此提出的任何建议。谢谢

最佳答案

潜在的问题是,第一次调用changecol时,它将循环遍历colourinfo数据结构,并在第一次执行时应用所有颜色。

我做了this jsfiddle来做我想你现在想做的事情,也许是你下一步打算做的事情。它每100ms一次将每个节点循环显示一系列颜色。

关于javascript - 网格中的灯光序列的Javascript问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6721246/

10-13 03:50