Trying to make tiles on a webpage light in a sequence [duplicate]
This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Making tiles on a web page light up different colours in a sequence
I am currently trying to light up specific tiles on a page within a 4x4 grid.
I have the grid on the page but the tiles specified to light up do not. Please can someone help me to achieve this.
HTML code:
<!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 LANGUAGE="JavaScript" SRC="script.js">
</SCRIPT>
</head>
<body>
<div class="container">
<div class="box spacing"></div>
<div class="box spacing"></div>
<div class="box spacing"></div>
<div id="square1id" 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 class="box spacing"></div>
<div class="box spacing"></div>
<div c开发者_开发技巧lass="box spacing"></div>
<div class="box"></div>
<div class="box spacing"></div>
<div class="box spacing"></div>
<div 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;
}
JavaScript:
$(document).ready(function(){
var colourinfo = {
square1id: [
'#000000'
],
square2id: [
'#ffffff'
],
};
var count = 0;
var changecol = function(){
$.each(colourinfo, function(tileid, colarray){
$('#'+tileid).css('background-color', colarray[count%colarray.length]);
});
count++;
};
setInterval(changecol, 1000);
});
Thanks
You've only defined one color for each id, so this is completely pointless. You're going to call a method every second that does nothing but set the background-color to the color it already has. Only the first call will actually do anything. If it is supposed to cycle back and forth between different colors then you need more values in your color arrays.
加载中,请稍侯......
精彩评论