Javascript Countdown Timer

ASP Free Forums Sponsor:

November 29th, 2005, 12:02 PM

Shadow Wizard

Moderator From Beyond

ASP Free God 48th Plane (28500 - 28999 posts)

Join Date: Sep 2004

Location: Israel

Posts: 28,838

Folding Points: 549372 Folding Title: Super Ultimate Folder - Level 2

Time spent in forums: 3 Months 2 Weeks 1 Day 14 h 30 m 10 sec
Reputation Power: 2389

Javascript Countdown Timer

Below is the code needed to display count down in HTML page
using javascript.

You define container for the count down (either <span> or
<div> tag) and the initial value, and the code updates the
time automaticlly in the format HH:MM:SS

You can also control the style of the container using standard
CSS, as demonstrated in the below and attached code.

To activate the count down in one of your existing pages you
have to follow two steps:
1. include the attached CountDown.js file with:

Code:

<script type="text/javascript" src="CountDown.js"></script>

2. have such javascript in the <head> section:

Code:

<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
	ActivateCountDown("CountDownPanel", 100);
}
</script>

where "CountDownPanel" is the ID of the container
(i.e. you should have <span> or <div> with this ID) and
100 is the time in seconds to be counted.

full source code:

javascript Code:

Original - javascript Code

--CountDown.js
var _countDowncontainer=0;
var _currentSeconds=0;
 
function ActivateCountDown(strContainerID, initialValue) {
    _countDowncontainer = document.getElementById(strContainerID);
    
    if (!_countDowncontainer) {
        alert("count down error: container does not exist: "+strContainerID+
            "\nmake sure html element with this ID exists");
        return;
    }
    
    SetCountdownText(initialValue);
    window.setTimeout("CountDownTick()", 1000);
}
 
function CountDownTick() {
    if (_currentSeconds <= 0) {
        alert("your time has expired!");
        return;
    }
    
    SetCountdownText(_currentSeconds-1);
    window.setTimeout("CountDownTick()", 1000);
}
 
function SetCountdownText(seconds) {
    //store:
    _currentSeconds = seconds;
    
    //get minutes:
    var minutes=parseInt(seconds/60);
    
    //shrink:
    seconds = (seconds%60);
    
    //get hours:
    var hours=parseInt(minutes/60);
    
    //shrink:
    minutes = (minutes%60);
    
    //build text:
    var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);
    
    //apply:
    _countDowncontainer.innerHTML = strText;
}
 
function AddZero(num) {
    return ((num >= 0)&&(num < 10))?"0"+num:num+"";
}

html4strict Code:

Original - html4strict Code

 
--Timer.html (sample html page with the timer)
<html>
<head>
<title>Timer Test</title>
<script type="text/javascript" src="CountDown.js"></script>
<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
    ActivateCountDown("CountDownPanel", 100);
}
</script>
<style type="text/css">
#CountDownPanel {color: blue; background-color: yellow; font-size: 18px;}
</style>
</head>
<body>
Hello!<br />
Time remaining: <span id="CountDownPanel"></span>
</body>
</html>

edit:
I've added AdvancedCountDown.zip file with advanced options:

supporting more than one container (no limit)
supporting stopping and continuing each count down
real time flow: alerts no longer pause the count down.

edit:
Added extra functionality in the advanced options:

supporting callbacks: once the timer has ended, callback
function is called. this means you no longer have to change
anything in the JavaScript file itself.
supporting date formats. you can add the date_format
attribute to the container with any format you like.
supported keys:
- %d - Days
- %h - Hours
- %m - Minutes
- %s - Seconds
default format is %h:%m:%s
supporting changing the time at runtime. see the .html
file for example of using it.

edit:
Added extra functionality in the advanced options:

supporting "RAW" time_format flag, when raised the timer
will show the raw value instead of the formatted time.
supporting "second_value" attribute: when set, given value
will be subtracted from the value in every second. (instead of 1)
supporting "finish_value" attribute: when set, current value
will be compared against it instead of against zero.

see the second Timer in the .html file for example of all above.

Happy Programming!

Comments on this post

RadioactiveFrog agrees: cool

Attached Files

	Timer.zip (978 Bytes, 25638 views)
	AdvancedCountDown.zip (2.5 KB, 2123 views)

__________________

Visit The Windows Scripting Guru

Last edited by Shadow Wizard : November 24th, 2008 at 05:38 AM. Reason: updated advanced countdown files

July 6th, 2006, 06:00 PM

brightspot

Registered User

Join Date: Jul 2006

Posts: 2

Time spent in forums: 21 m 34 sec
Reputation Power: 0

my onmouseover doesn't work now

Hi Shadow Wizard,

I would like to use your code. It's cool. I have a question, though. I have a complicated multipage classic ASP, VB Script, SQL Server and Javascript web site. When I included your code - which works well! Thank you. - my mouse over stopped working. Here is the code I'm using for the mouseover:

Code:

 %>
              <INPUT TYPE=BUTTON STYLE='font-size:10px;width:140px' 
                onClick="add_commodity(<% =RS("CommodityID") %>,'<% =Trim(RS("Commodity")) %>')" 
                VALUE='<% =Trim(RS("Commodity")) %>'
                onMouseOver="writetxt('<% =Replace(msgtxt,"'","") %>')" 
                onMouseOut="writetxt(0)">&nbsp;
              <%

I inherited this code and its a real mix of stuff with VB Script writing html. Do you know if there is something natively incompatible with your code (maybe the onload?) and onmouseover? I'm really at a loss as to where to start looking.

Thanks,
Chris

July 10th, 2006, 05:33 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 28,838

Time spent in forums: 3 Months 2 Weeks 1 Day 14 h 30 m 10 sec
Reputation Power: 2389

yes those lines are overwriting the window load:

Code:

window.onload=WindowLoad;
function WindowLoad(event) {
    ActivateCountDown("CountDownPanel", 100);
}

if you already have onload code, you have to add this to my function.
attach the whole page source code in zip file and I'll have a look - hopefully
it will be something simple and quick.

July 10th, 2006, 06:03 PM

brightspot

Registered User

Join Date: Jul 2006

Posts: 2

Time spent in forums: 21 m 34 sec
Reputation Power: 0

zip file of our source

Hi ShadowWizard,

I am unable to attach all the source files. This web site is huge with multiple includes and intertwined code. In fact, you won't find the </BODY> in this file. It gets included down the stream someplace.

I started over inserting your code to make sure I followed your directions precisely and ended up with the attached code. The words: "Time remaining" is displayed on the page, but the countdown numbers do not appear. The onmouseover DOES work with this version of the code.

Thanks for your help,
Chris

Attached Files

shadowWizard.zip (2.4 KB, 771 views)

July 11th, 2006, 04:13 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 28,838

Time spent in forums: 3 Months 2 Weeks 1 Day 14 h 30 m 10 sec
Reputation Power: 2389

ok, in header.asp change those lines:

Code:

<script type="text/javascript">window.onload=WindowLoad;function WindowLoad(event)
 {    ActivateCountDown("CountDownPanel", 100);}</script>

to be this:

Code:

<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
   loadCookies();
   ActivateCountDown("CountDownPanel", 100);
}
</script>

and this:

Code:

<body onload="loadCookies();" MARGINHEIGHT="0" MARGINWIDTH="0" LEFTMARGIN="0" TOPMARGIN="0" BOTTOMMARGIN="0" RIGHTMARGIN="0">

to this: (remove the function from the body tag)

Code:

<body MARGINHEIGHT="0" MARGINWIDTH="0" LEFTMARGIN="0" TOPMARGIN="0" BOTTOMMARGIN="0" RIGHTMARGIN="0">

October 27th, 2006, 01:31 PM

ashishtekwani89

Registered User

Join Date: Oct 2006

Posts: 1

Time spent in forums: 4 m 59 sec
Reputation Power: 0

Timer

Hi!!

I found your timer useful for my project. Thanks a lot. i have 1 question. After the message your time has expired i want it to go to a different page. please send me the codings for this to
E-MAIL

Thanks a lot

Quote:

Originally Posted by Shadow Wizard

Code:

<script type="text/javascript" src="CountDown.js"></script>

2. have such javascript in the <head> section:

Code:

<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
	ActivateCountDown("CountDownPanel", 100);
}
</script>

where "CountDownPanel" is the ID of the container
(i.e. you should have <span> or <div> with this ID) and
100 is the time in seconds to be counted.

full source code:

javascript Code:

Original - javascript Code

--CountDown.js
var _countDowncontainer=0;
var _currentSeconds=0;
 
function ActivateCountDown(strContainerID, initialValue) {
    _countDowncontainer = document.getElementById(strContainerID);
    
    if (!_countDowncontainer) {
        alert("count down error: container does not exist: "+strContainerID+
            "\nmake sure html element with this ID exists");
        return;
    }
    
    SetCountdownText(initialValue);
    window.setTimeout("CountDownTick()", 1000);
}
 
function CountDownTick() {
    if (_currentSeconds <= 0) {
        alert("your time has expired!");
        return;
    }
    
    SetCountdownText(_currentSeconds-1);
    window.setTimeout("CountDownTick()", 1000);
}
 
function SetCountdownText(seconds) {
    //store:
    _currentSeconds = seconds;
    
    //get minutes:
    var minutes=parseInt(seconds/60);
    
    //shrink:
    seconds = (seconds%60);
    
    //get hours:
    var hours=parseInt(minutes/60);
    
    //shrink:
    minutes = (minutes%60);
    
    //build text:
    var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);
    
    //apply:
    _countDowncontainer.innerHTML = strText;
}
 
function AddZero(num) {
    return ((num >= 0)&&(num < 10))?"0"+num:num+"";
}

html4strict Code:

Original - html4strict Code

 
--Timer.html (sample html page with the timer)
<html>
<head>
<title>Timer Test</title>
<script type="text/javascript" src="CountDown.js"></script>
<script type="text/javascript">
window.onload=WindowLoad;
function WindowLoad(event) {
    ActivateCountDown("CountDownPanel", 100);
}
</script>
<style type="text/css">
#CountDownPanel {color: blue; background-color: yellow; font-size: 18px;}
</style>
</head>
<body>
Hello!<br />
Time remaining: <span id="CountDownPanel"></span>
</body>
</html>

Happy Programming!

October 29th, 2006, 03:20 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 28,838

Time spent in forums: 3 Months 2 Weeks 1 Day 14 h 30 m 10 sec
Reputation Power: 2389

Quote:

Originally Posted by ashishtekwani89

hello and welcome to aspfree,

to do this add this line to the code:

Code:

if (_currentSeconds <= 0) {
        alert("your time has expired!");
        document.location = "otherpage.html";
        return;
}

add the line in bold to the code in CountDownTick function.

April 11th, 2007, 02:36 PM

enggars

Registered User

Join Date: Apr 2007

Posts: 1

Time spent in forums: 11 m 51 sec
Reputation Power: 0

Your script is helpful, but i need some help using them

Hello...
I have a quiz application based on ASP.
I use paging, which is showing only one question per page.
I want to set a time limitation on the application.
The problem is i cant use the window.onload since the time will started again if we move to another question.

What i want to do is i want the time limitation only loaded once at the beginning. though we move to the prev or next page, the time will keep on counting without being started again.
Can you help me with this?

Many thanks for the helps....

April 12th, 2007, 06:06 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 28,838

Time spent in forums: 3 Months 2 Weeks 1 Day 14 h 30 m 10 sec
Reputation Power: 2389

for this, ASP or some other server side language is needed.
assuming you work with ASP, assign session variable with the
current date and time when the user begin the quiz:

Code:

Session("TimeQuizBegin") = Now

now, change this line:

Code:

ActivateCountDown("CountDownPanel", 100);

to this:

Code:

ActivateCountDown("CountDownPanel", <%=(600-Abs(DateDiff("s", Now, Session("TimeQuizBegin"))))%>);

replace 600 with the amount of seconds the user has to complete the
quiz, in the above code it's 10 minutes.
good luck and let me know if you bump into any further problem.

#10

April 19th, 2007, 03:34 AM

shubha_vasisht

Registered User

Join Date: Apr 2007

Location: Mysore

Posts: 1

Time spent in forums: 27 m 13 sec
Reputation Power: 0

timer gets refreshed on click of back and refresh

hi all...

in my application count down timer is working fine..
but the problem is onclick of back button / refresh button timer will be refreshed that is it starts its count from the starting.

actually this shouldnt happen in my application. when the user clicks back button or refresh button, i want to call button click event by which user will be to taken to the next question in the online quiz.

but am not getting how to achieve this. so if anybody could help me in this..

tks in advance

regards,
Shubha

#11

April 19th, 2007, 03:50 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 28,838

Time spent in forums: 3 Months 2 Weeks 1 Day 14 h 30 m 10 sec
Reputation Power: 2389

read my previous reply - what you need is to store
the time on the server, client side scripting lack
what you need.

#12

July 24th, 2007, 03:38 AM

danr1660

Registered User

Join Date: Jul 2007

Posts: 1

Time spent in forums: 17 m 58 sec
Reputation Power: 0

Awesome script

Hi,
I just found this script and have added it to my website and it's working great. I have a couple of questions.

1. I have added the script to my master page so it shows on every page which is what I want. The question is how to make it so the countdown does not start over everytime I go to a new page?

2. Is there anyway to loop this so that when the countdown expires and the window pops up and the user clicks ok it will reset and start the countdown again?

Thanks in advance for your help

Dan

#13

July 24th, 2007, 04:08 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 28,838

Time spent in forums: 3 Months 2 Weeks 1 Day 14 h 30 m 10 sec
Reputation Power: 2389

hi Dan,
answer to your first question: read my previous reply in this thread
and the one before. this question has been asked already.

answer to your second question:
change this block of code:

Code:

if (_currentSeconds <= 0) {
	alert("your time has expired!");
	return;
}

to this:

Code:

if (_currentSeconds <= 0) {
	alert("your time has expired!");
	_currentSeconds = 120; //two minutes
}

of course, change the number to whatever amount
of seconds you wish.

#14

September 8th, 2007, 09:59 AM

ScriptNewbie

Registered User

Join Date: Sep 2007

Posts: 4

Time spent in forums: 41 m 12 sec
Reputation Power: 0

submit the form after timeout

Hi....

Thanks for ur code.. I was able to run the timer code successfully....

I am a newbie to java script... And i want to know how should i submit(post method) my html form after timeout.

Thanks for ur help...

#15

September 9th, 2007, 03:39 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 28,838

Time spent in forums: 3 Months 2 Weeks 1 Day 14 h 30 m 10 sec
Reputation Power: 2389

change this line:

Code:

alert("your time has expired!");

to this:

Code:

document.forms[0].submit();

I assume you have only one form in your page.
you can also have both the alert and the submit.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: