Wednesday, September 28, 2005

Countdown timer for memorable dates (javascript)

Countdown for Bandi Chhor Divas (1st Nov 2005)
Test


This is quite easy to do.

Here is how it is done.

[1] Place the following code in your template after the <head > tag near the top of the template.



<!-- START Javascript function for countdown -->

<script type="text/javascript">


var HOURS_IN_DAY = 24;

var MINS_IN_HOUR = 60;

var SECS_IN_MIN = 60;



var DAY_FROM_MSEC = 1000/60/60/24;

var HOUR_FROM_MSEC = 1000/60/60;

var MIN_FROM_MSEC = 1000/60;

var SEC_FROM_MSEC = 1000;


function countdown(yr, mn, dy, id)

{

if(document.getElementById(id))

{

// refer to the id

var div = document.getElementById(id);



var dtNow = new Date();

var dtFuture = new Date(yr, mn, dy);



var dtDiff = new Date();



dtDiff.setTime(dtFuture.getTime() - dtNow.getTime() );



var tmDay = Math.ceil(dtDiff/ 1000/60/60/24);



var tmHour = Math.ceil(dtDiff/ 1000/60/60);

tmHour1 = (HOURS_IN_DAY - 1) + (tmHour - tmDay * HOURS_IN_DAY);



var tmMin = Math.ceil(dtDiff/ 1000/60);

tmMin1 = (MINS_IN_HOUR - 1) + (tmMin - tmHour * MINS_IN_HOUR);



var tmSec = Math.ceil(dtDiff/ 1000);

tmSec1 = (SECS_IN_MIN - 1) + (tmSec - tmMin * SECS_IN_MIN);



div.innerHTML = tmDay + " day(s) " + tmHour1 + " hour(s) "
+ tmMin1 + " min(s) " + tmSec1 + " sec(s) ";

}

}

// Add the date that you want to countdown

// Remember months start at zero i.e. 8 = September NOT August
// Example = 30th September 2006
// 'coundown' refers to the name we give to the <div> tag that will contain the coundown
// You can add multiple countdowns by adding copies of the below line and changing 'countdown1' for another name i.e. 'countdown2'

setInterval("countdown('2006', '8', '30', 'countdown1');", SEC_FROM_MSEC);


</script>

<!-- END Javascript function for countdown -->


[2] In HTML view add the following text anywhere between the <body> and </body> tag



<div name="countdown1" id="countdown1">Test</div >

NOTE: you can add multiple countdowns by adding the above line again and then changing 'countdown1' to another name i.e. 'countdown2'.

Please try it

I hope this makes sense!!

No comments: