sniperman
06-30-2009, 10:03 AM
Hi everyone.
I have begun work on a small script that will make the background and text colors flicker within a DIV container, like a soccer scoreboard.
I want the flicker effect to pass 10 times and stop - with the use of setInterval() and clearInterval()
So far I have been able to have DOM change the style once, but I am unable to pass back to the original colors or create an effective flicker effect. Does anyone have any suggestions?
Thanks in advance.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CHAOS SOCCER MANAGER v1.0</title>
<style type="text/css">
#scoreboard {
width:600px;background-color:blue;color:white;margin:0 auto;text-align:center;
font-size:300%;vertical-align:baseline;padding:50px 0;
}
</style>
<script type="text/javascript">
function flicker(timer) {
if (timer="true")
{
countdown=10;
document.getElementById("scoreboard").setAttribute('style','background-color:blue;color:white;'); // sets flicker colors
var flick = setInterval(styles(),.100); // begins the flicker and sends to styles function
}
}
function styles() {
document.getElementById("scoreboard").setAttribute('style','background-color:white;color:blue;');
countdown--;
var flick2 = setInterval(flicker(),.100); // alternative flicker color and invoke function loop
}
</script>
</head><body>
<div id="scoreboard" onmouseover="flicker('true')">
<p>GOAL</p>
</div>
</body></html>
I have begun work on a small script that will make the background and text colors flicker within a DIV container, like a soccer scoreboard.
I want the flicker effect to pass 10 times and stop - with the use of setInterval() and clearInterval()
So far I have been able to have DOM change the style once, but I am unable to pass back to the original colors or create an effective flicker effect. Does anyone have any suggestions?
Thanks in advance.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CHAOS SOCCER MANAGER v1.0</title>
<style type="text/css">
#scoreboard {
width:600px;background-color:blue;color:white;margin:0 auto;text-align:center;
font-size:300%;vertical-align:baseline;padding:50px 0;
}
</style>
<script type="text/javascript">
function flicker(timer) {
if (timer="true")
{
countdown=10;
document.getElementById("scoreboard").setAttribute('style','background-color:blue;color:white;'); // sets flicker colors
var flick = setInterval(styles(),.100); // begins the flicker and sends to styles function
}
}
function styles() {
document.getElementById("scoreboard").setAttribute('style','background-color:white;color:blue;');
countdown--;
var flick2 = setInterval(flicker(),.100); // alternative flicker color and invoke function loop
}
</script>
</head><body>
<div id="scoreboard" onmouseover="flicker('true')">
<p>GOAL</p>
</div>
</body></html>