Create Flicker Effect with setAttribute loop

**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.

Code:

<!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>

**vwphillips** · 06-30-2009, 10:20 AM

Code:

<!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">
var flick,countdown=10;

function flicker(timer)	{
 clearTimeout(flick);
 document.getElementById("scoreboard").setAttribute('style','background-color:blue;color:white;'); // sets flicker colors
 flick = setTimeout(function(){ styles(); },100); // begins the flicker and sends to styles function

						}
function styles()	{

	document.getElementById("scoreboard").setAttribute('style','background-color:white;color:blue;');
	countdown--;
	if (countdown>-1) flick = setTimeout(function(){ flicker(); },100); // alternative flicker color and invoke function loop


					}
</script>

</head><body>

<div id="scoreboard" onmouseover="flicker('true')">
<p>GOAL</p>
</div>

</body></html>

**sniperman** · 06-30-2009, 11:19 AM

Thanks, it worked perfectly.

it just goes to show how far i have to go to learn good fluid code.

humbled.

Thread: Create Flicker Effect with setAttribute loop

Thread Tools

Search Thread

Create Flicker Effect with setAttribute loop

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions