How do I modify this script to use different colors?
I have a page that has a 4x4 grid and two squares change color one white and the other black. I need to know how to ammend the script to make the color white appear before the black one.
Please could someone help me to solve this issue, the code is pasted below:
html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen>
<SCRIPT LANGUAGE="JavaScript" SRC="script1.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 class="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: [
'#FFE600'
],
square2id: [
'#008B45'
开发者_Python百科 ]
};
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 appreciate any help on this. Thank you.
The following sets up an array where each element is an object giving the normal and highlight colour for each square. Called via setInterval() the changeColour() function changes the colour of the last square back to normal and the next square to highlight:
var colourInfo = [
{id : "square1id",
colourNormal : "#4D4D4D",
colourHighlight : "#FFE600"},
{id : "square2id",
colourNormal : "#4D4D4D",
colourHighlight : "#008B45"}
// add your other squares' info here
];
var index = 0;
var changeColour = function(){
$('#'+colourInfo[index]["id"]).css('background-color',
colourInfo[index]["colourNormal"]);
if (++index >= colourInfo.length)
index = 0;
$('#'+colourInfo[index]["id"]).css('background-color',
colourInfo[index]["colourHighlight"]);
}
setInterval(changeColour,1000);
Note: the if statement in the middle of the changeColour() function just increments the index and keeps looping around and around the array in order. If you want the squares to change colour in random order you could replace the if statement with something like
index = Math.floor(Math.random() * colourInfo.length);
EDIT: I assumed above (due to David's use of setInterval()) that the idea was to keep changing the colours indefinitely. Now that I find the idea was to flash each square once I'd suggest the following (untested) change. (Yes, I know this is getting clunky, but I couldn't be bothered starting from scratch and I figure the point is to give David some ideas on how he might do it, not to do his work for him and present a beautifully unit-tested and documented masterpiece.)
var index = -1;
var changeColour = function(){
if (index > -1) {
$('#'+colourInfo[index]["id"]).css('background-color',
colourInfo[index]["colourNormal"]);
}
if (++index < colourInfo.length) {
$('#'+colourInfo[index]["id"]).css('background-color',
colourInfo[index]["colourHighlight"]);
setTimeout(changeColour,1000);
}
}
setTimeout(changeColour,1000);
Looks like the colors are set in colourInfo. Try this:
var colourinfo = {
square1id: ['#FFFFFF'],
square2id: ['#000000']
};
加载中,请稍侯......
精彩评论