Saturday, July 18, 2009

CountDown Timer

Hi , here is cool triks of CountDown timer, mostly its useful in website while validating time like online exam, date time , game countdown , and so many

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:


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


2. have such javascript in the section:



<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.

here is CountDown.js file -------------------------------

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+"";
}

2 comments:

  1. good one, short and sweet , i am looking for this kind of example. thanx kiran

    ReplyDelete