Counting down with JavaScript

You require 5 images named countdown1.jpg, countdown2.jpg ..so on till countdown5.jpg each with repective digits on them, in the same directory as the script. When you load this page, after a delay of 2 seconds the images are displayed in the reverse order (from 5 down to 1) each after a delay of 1 second. This gives it a kewl effect of a countdown from 5 to 1 and then when it finishes a new blank window opens. The opening of a blank window was the simplest thing to use here. You can replace that with any other command.

I had used a slightly modified version of this countdown script during a press release of one of the websites I had developed. After the countdown the website opened in the new window. Of course it was accompanied with claps and wows from the crowd present there :-) The effects looked wonderful since I had used 5 animated gifs, with each of them showing a sort of transformation (morphing) from one digit to another.

<SCRIPT LANGUAGE = "JavaScript">
<!--

x=5;
var pics= new Array();

for(i=1;i<=x;i++){  
 pics[i]=new Image();
pics[i].src="countdown"+i+".jpg";  
}

function img(){
 document.images[0].src=pics[x].src;
x--;
if(x>0) setTimeout('img()',1000);
if(x==0) setTimeout("msg=open('','DisplayWindow')",1000);  
}
-->
</script>

<BODY onLoad="setTimeout('img()',2000)">
<B>The countdown from 5 to 1 will begin in 2 seconds</B>
</BODY>

You might also like...

Comments

Kiran Pai

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“XML is like violence - if it's not working for you, you're not using enough of it.”