The JavaScript Source: Time & Date : Countdown Timer 2

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

This countdown script prints directly to the page, displaying the time left in minutes and seconds. The time duration can be set in the script. The timer will automatically stop when the time reaches 00 minutes and 00 seconds.

Notes

Created by: Sandeep Gangadharan
Web Site: http://www.sivamdesign.com/
Posted: November 22, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: countdownTimer

var sec = 30;   // set the seconds
var min = 02;   // set the minutes

function countDown() {
  sec--;
  if (sec == -01) {
    sec = 59;
    min = min - 1;
  } else {
   min = min;
  }
if (sec<=9) { sec = "0" + sec; }
  time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
if (document.getElementById) { theTime.innerHTML = time; }
  SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  countDown();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.timeClass {
  font-family:arial,verdana,helvetica,sans-serif;
  font-weight:normal;
  font-size:10pt;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="countdownTimer"></script>

Body

Paste this code into the BODY section of your HTML document


<table width="100%">
 <tr><td width="100%" align="center"><span id="theTime" class="timeClass"></span></td></tr>
</table>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

6. From: jon
04/15/2007 01:16:17

7. From: Lee (Admin)
05/25/2007 11:31:39

5. From: Travis
02/23/2007 12:50:47

4. From: Fahmiadini
02/13/2007 23:44:13

3. From: Marvin
12/05/2006 17:54:32

2. From: Brian Nowell
12/02/2006 01:06:57

1. From: Donna Murray
11/27/2006 10:56:00

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

6. From: jon04/15/2007 01:16:17

7. From: Lee (Admin)05/25/2007 11:31:39

5. From: Travis02/23/2007 12:50:47

4. From: Fahmiadini02/13/2007 23:44:13

3. From: Marvin12/05/2006 17:54:32

2. From: Brian Nowell12/02/2006 01:06:57

1. From: Donna Murray11/27/2006 10:56:00

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

6. From: jon
04/15/2007 01:16:17

7. From: Lee (Admin)
05/25/2007 11:31:39

5. From: Travis
02/23/2007 12:50:47

4. From: Fahmiadini
02/13/2007 23:44:13

3. From: Marvin
12/05/2006 17:54:32

2. From: Brian Nowell
12/02/2006 01:06:57

1. From: Donna Murray
11/27/2006 10:56:00