|
|
Home » Javascript » Article
Displaying a Countdown using Javascript
|
| Article by: | (6/25/2002) |
|
| Summary: | Using graphics and javascript to countdown from 5 to 1 |
|
| Viewed: 22496 times |
Rating (11 votes): |
|
3.5 out of 5 |
|
|
|
by Kiran Pai (Kiran Pai's Web Site)
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. Ofcourse 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>
|
|
|
|
View highlighted Comments
 User Comments on 'Displaying a Countdown using Javascript'
|
|
|
|
|
Posted by :
 Archive Import (Chris) at 16:32 on Friday, August 01, 2003
|
This script does not work. I created 5 jpg files, each with the respective number, and placed them in the same directory as the index.html file (which I placed this script into). I saved it all, and it does not work. Go to http://www.bartlett-family.net to see what I mean. Any thoughts, anyone?
Thanks,
Chris
PS. I'm fairly new at all this, so I'm sure it's something I'm doing wrong.
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
Javascript - Enable and Disable form elements
by Jeff Anderson
This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form. |
 |
Check IsNumeric Function
by Jeff Anderson
A javascript validation function to check whether the details entered by a user are numeric. |
|
Javascript Onload Event
by Jeff Anderson
Sometimes you need to perform an action immediatley after the page has loaded. That's when the onLoad Event Handler comes in handy |
|
Form Validation Function
by Jeff Anderson
A javascript validation function that you can use to validate all types of forms. |
|
JavaScript Field Is Empty Form Validation
by Jeff Anderson
This javascript function allows you to check whether a form field has been completed or not. |
|
Javascript Get Selected Text
by Jeff Anderson
A cross-browser script to get text selected by the user |
|
Check Email Validation Function
by Jeff Anderson
A javascript validation function to check whether the user has entered a valid email address in a form. |
|
Multiple submit buttons on a single form
by Kiran Pai
This script shows you how to submit the contents of a form to different programs depending on which Submit button you press. Additionally it also shows how to call two different functions when you press the Submit button. |
|
Validate Form and Disable Submit Button
by Marylou Marks
I have a form that validates info, but I also want to disable the submit button. The disable part worked before adding the form validating. |
|
Javascript onUnload Event Handler
by Jeff Anderson
The onUnload Event Handler allows you to perform an action as the user leaves the page. |
|
| |
