Javascript problem with sequence of lights in grid_问答_开发者

Javascript problem with sequence of lights in grid

开发者 https://www.devze.com 2023-03-20 16:26 出处：网络

I am having great difficulty in making the lights on the grid I have made appear one after the other. At the moment the lights all come on at once but I\'m not sure how to make the boxes light up one

相关专题：css javascript

I am having great difficulty in making the lights on the grid I have made appear one after the other. At the moment the lights all come on at once but I'm not sure how to make the boxes light up one after the other.

I have pasted the code below:

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;
}

Script:

  $(document).ready(function(){

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

        square2id: [
                    '#ffffff'
                    ],
        square3id: [
                    '#FFE600'
                    ],
        square4i开发者_运维技巧d: [
                    '#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);
});

I would be extremely grateful for any advice on this. Thanks

The underlying issue is that when changecol is called the first time, it loops through yourcolourinfo data structure and applies all the colors in the first execution.

I made this jsfiddle that does what I think you want to do now, and maybe what you were planning to do next. It cycles each node through a series of colors one at a time every 100ms.