Javascript problem with sequence of lights in grid
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.
加载中,请稍侯......
精彩评论