Javascript Countdown Timer

ASP Free Forums Sponsor:

Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

November 29th, 2005, 11:02 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 26,621

Folding Points: 325693 Folding Title: Super Ultimate Folder - Level 1

Time spent in forums: 3 Months 1 Week 4 Days 13 h 47 m 29 sec
Reputation Power: 1441

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>

Happy Programming!

Comments on this post

RadioactiveFrog agrees: cool

Attached Files

Timer.zip (978 Bytes, 23018 views)

__________________

Visit The Windows Scripting Guru

July 6th, 2006, 05: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, 04:33 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 26,621

Time spent in forums: 3 Months 1 Week 4 Days 13 h 47 m 29 sec
Reputation Power: 1441

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, 05: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, 389 views)

July 11th, 2006, 03:13 AM

Shadow Wizard

Moderator From Beyond

Join Date: Sep 2004

Location: Israel

Posts: 26,621

Time spent in forums: 3 Months 1 Week 4 Days 13 h 47 m 29 sec
Reputation Power: 1441

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, 12: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);