Frequently Asked Questions
Frequently Asked Questions
Samples of Countdown Timers > FAQ > Frequently Asked Questions

Search knowledgebase:  

How can I place multiple countdown timers on one page?

Solution

There are two options for displaying multiple timers on a single page, with each timer counting down to a different time.  The first, and simplest, is to use iframes (See Option 1 below.).  If iframes are not an option, then there are several changes that need to be made to the timer script (See Option 2 below).

Option 1: use iframes

  1. Make a separate page for each countdown timer and name each page something unique, such as timer1.html, timer2.html, etc.
  2. On your main page (the page you want to display the timers on) add an iframe for each of the countdown timers (position them by changing the CSS top and left properties noted in blue):
<iframe id="timer1" src="timer1.html" width="412" height="76" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true" style="position: absolute; top: 10px; left: 100px; overflow: hidden;" ></iframe>

<iframe id="timer2" src="timer2.html" width="412" height="76" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true" style="position: absolute; top: 350px; left: 100px; overflow: hidden;" ></iframe>

Option 2: use multiple versions of the script

The sample below uses 4 timers; the first three timers are in style 1A, the fourth timer is in style 1D.

  1. Place each timer in your page by placing it within a <div> in which you can specify its position. (See sample below, in purple.) 
  2. Change each "id" within the timers to a unique name, since there can be no two id's with the same name; e.g., "dday" can be changed to "dday1," "dday2," etc. for each timer. (See sample below in blue.) 
  3. If using more than one timer style; you should also rename the classes so that the styling is appropriate for each timer style. (See sample below in red; the classes for style 1D timer were renamed to avoid using the same class names used in the style 1A timer. In this case, the only class names that must be changed are "numbers" and "title," but I changed the names of all of style 1D's classes.) 
  4. Insert the javascript code for the countdown timers in the <body> section of the page, AFTER the HTML code for the timers. 
  5. Make the "current," "year," "month," "day," "hour," "minute" and "tz" variable names unique for each timer. In the sample below, I added a number, corresponding to which timer, as a suffix to each variable; e.g., "year1" and "month1" for timer #1; "year2" and "month2" for timer #2, etc. (See sample below in blue.) 
  6. Add the function countdown(yr,m,d,hr,min){…} for each timer, but give each function a unique name for each timer; again, in my example, I add a number to correspond to the timer to which it refers; i.e., "countdown1," "countdown2," etc. (See sample below in blue.) 
  7. Delete the line "theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min" from each function. (See sample below in brown with striked-out text.) 
  8. Within the function script, change the id names to the id names corresponding to that function's particular timer. (See sample below in blue, also note that the variables "tz" and "current" are also changed within the function to their new names for that timer.) 
  9. Specify the "setTimeout(…)" method in each of the countdown functions as per the sample below, using the date variables for that specific timer; i.e., for timer #1 in function countdown1(…), it would be:
     setTimeout("countdown1(year1,month1,day1,hour1,minute1)",1000);
    for timer #2, in function countdown2(…), it would be:
     setTimeout("countdown2(year2,month2,day2,hour2,minute2)",1000);
    and so on. (See sample below, also in blue.) 
  10. Finally, to call each function and make the timers run, add
     countdown1(year1,month1,day1,hour1,minute1);
     countdown2(year2,month2,day2,hour2,minute2);
    and so on for each timer at the end of the script. (See sample below, also in blue.)

Other color coding in the sample below is comments are in orange and the variable definitions for the target date/time which you must specify for each timer are in green.


<head>
<style type="text/css">
.numbers {
    width: 55px;
    text-align: center; 
    font-family: Arial; 
    font-size: 28px; 
    font-weight: bold;   /* options are normal, bold, bolder, lighter */
    font-style: normal;  /* options are normal or italic */
    color: #000000;      /* change color using the hexadecimal color codes for HTML */
}
.title {    /* the styles below will affect the title under the numbers, i.e., "Days",
"Hours", etc. */
    width: 55px;
    text-align: center; 
    font-family: Arial; 
    font-size: 10px; 
    font-weight: bold;   /* options are normal, bold, bolder, lighter */
    color: #666666;      /* change color using the hexadecimal color codes for HTML */
}
#table1, #table2, #table3 {
    width: 400px;
    height: 68px;
    border: none;
    background-color: transparent;
}
 
/* BELOW IS THE STYLING FOR TIMER STYLE 1D */
.background1d {
    border-style: none;
    width: 62px;
    height: 58px;
}
.numbers1d {
    border-style: none;
    background-color: transparent;
    padding: 0px;
    width: 62px;
    height: 42px;
    text-align: center; 
    font-family: Arial; 
    font-size: 34px;
    font-weight: normal;    /* options are normal, bold, bolder, lighter */
    color: #FFFFFF;     /* change color using the hexadecimal color codes for HTML */
}
.title1d {    /* the styles below will affect the title under the numbers, i.e., “Days”,
“Hours”, etc. */
    border: none;    
    padding: 0px;
    margin: 0px 3px;
    width: 62px;
    text-align: center; 
    font-family: Arial; 
    font-size: 10px; 
    font-weight: normal;    /* options are normal, bold, bolder, lighter */
    color: #999999;    /* change color using the hexadecimal color codes for HTML */
    background-color: #000000;  
}
#form1d { /* the styles below will affect the outer border of the countdown timer */
    width: 400px;
    height: 80px;
    border-style: ridge;    /* options are none, dotted, dashed, solid, double, groove,
ridge, inset, outset */
    border-width: 2px;
    border-color: #666666;  /* change color using the hexadecimal color codes for HTML */ 
    background-color: #000000;
    padding: 5px;
}
.line1d {
    width: 62px; 
    height: 2px;
    z-index: 15;
}
</style>
</head>
 
<body>
<!-- FIRST TIMER -->
<div style="position: absolute; top: 100px; left: 20px;">
<table id="table1" border="0">
    <tr>
        <td align="center" colspan="6"><div class="numbers" id="count1" style="padding:
5px 0 0 0; "></div></td>
    </tr>
    <tr id="spacer1-1">
        <td align="center" ><div class="numbers" ></div></td>
        <td align="center" ><div class="numbers" id="dday1"></div></td>
        <td align="center" ><div class="numbers" id="dhour1"></div></td>
        <td align="center" ><div class="numbers" id="dmin1"></div></td>
        <td align="center" ><div class="numbers" id="dsec1"></div></td>
        <td align="center" ><div class="numbers" ></div></td>
    </tr>
    <tr id="spacer2-1">
        <td align="center" ><div class="title" ></div></td>
        <td align="center" ><div class="title" id="days1">Days</div></td>
        <td align="center" ><div class="title" id="hours1">Hours</div></td>
        <td align="center" ><div class="title" id="minutes1">Minutes</div></td>
        <td align="center" ><div class="title" id="seconds1">Seconds</div></td>
        <td align="center" ><div class="title" ></div></td>
    </tr>
</table>
</div>
 
<!-- SECOND TIMER -->
<div style="position: absolute; top: 200px; left: 70px;">
<table id="table2" border="0">
    <tr>
        <td align="center" colspan="6"><div class="numbers" id="count2" style="padding:
5px 0 0 0; "></div></td>
    </tr>
    <tr id="spacer1-2">
        <td align="center" ><div class="numbers" ></div></td>
        <td align="center" ><div class="numbers" id="dday2"></div></td>
        <td align="center" ><div class="numbers" id="dhour2"></div></td>
        <td align="center" ><div class="numbers" id="dmin2"></div></td>
        <td align="center" ><div class="numbers" id="dsec2"></div></td>
        <td align="center" ><div class="numbers" ></div></td>
    </tr>
    <tr id="spacer2-2">
        <td align="center" ><div class="title" ></div></td>
        <td align="center" ><div class="title" id="days2">Days</div></td>
        <td align="center" ><div class="title" id="hours2">Hours</div></td>
        <td align="center" ><div class="title" id="minutes2">Minutes</div></td>
        <td align="center" ><div class="title" id="seconds2">Seconds</div></td>
        <td align="center" ><div class="title" ></div></td>
    </tr>
</table>
</div>
 
<!-- THIRD TIMER -->
<div style="position: absolute; top: 300px; left: 120px;">
<table id="table3" border="0">
    <tr>
        <td align="center" colspan="6"><div class="numbers" id="count3" style="padding:
5px 0 0 0; "></div></td>
    </tr>
    <tr id="spacer1-3">
        <td align="center" ><div class="numbers" ></div></td>
        <td align="center" ><div class="numbers" id="dday3"></div></td>
        <td align="center" ><div class="numbers" id="dhour3"></div></td>
        <td align="center" ><div class="numbers" id="dmin3"></div></td>
        <td align="center" ><div class="numbers" id="dsec3"></div></td>
        <td align="center" ><div class="numbers" ></div></td>
    </tr>
    <tr id="spacer2-3">
        <td align="center" ><div class="title" ></div></td>
        <td align="center" ><div class="title" id="days3">Days</div></td>
        <td align="center" ><div class="title" id="hours3">Hours</div></td>
        <td align="center" ><div class="title" id="minutes3">Minutes</div></td>
        <td align="center" ><div class="title" id="seconds3">Seconds</div></td>
        <td align="center" ><div class="title" ></div></td>
    </tr>
</table>
</div>
 
<!-- FOURTH TIMER -->
<div id="form1d" style="position: absolute; top: 185px; left: 500px;">
    <div class="numbers1d" id="count4" style="position: absolute; top: 10px; height:
60px; padding: 15px 0 0 10px; background-color: #000000; z-index: 20;"></div>
 
    <img src="images/bkgdimage.gif" class="background1d" style="position: absolute;
left: 69px; top: 12px;"/>
    <img src="images/line.jpg" class="line1d" style="position: absolute; left: 69px;
top: 40px;"/> 
    <div class="numbers1d" id="dday4" style="position: absolute; left: 69px; top:
21px;" ></div>
 
    <img src="images/bkgdimage.gif" class="background1d" style="position: absolute;
left: 141px; top: 12px;"/>
    <img src="images/line.jpg" class="line1d" style="position: absolute; left: 141px;
top: 40px;"/>
    <div class="numbers1d" id="dhour4" style="position: absolute; left: 141px; top:
21px;" ></div>
 
    <img src="images/bkgdimage.gif" class="background1d" style="position: absolute;
left: 213px; top: 12px;"/>
    <img src="images/line.jpg" class="line1d" style="position: absolute; left: 213px;
top: 40px;"/>
    <div class="numbers1d" id="dmin4" style="position: absolute; left: 213px; top:
21px;" ></div>
 
    <img src="images/bkgdimage.gif" class="background1d" style="position: absolute;
left: 285px; top: 12px;"/>
    <img src="images/line.jpg" class="line1d" style="position: absolute; left: 285px;
top: 40px;"/>
    <div class="numbers1d" id="dsec4" style="position: absolute; left: 285px; top:
21px;" ></div>
 
    <div class="title1d" id="days4" style="position: absolute; left: 66px; top: 73px;"
>Days</div>
    <div class="title1d" id="hours4" style="position: absolute; left: 138px; top: 73px;"
>Hours</div>
    <div class="title1d" id="minutes4" style="position: absolute; left: 210px; top:
73px;" >Minutes</div>
    <div class="title1d" id="seconds4" style="position: absolute; left: 282px; top:
73px;" >Seconds</div>
</div>
 
 
<script type="text/javascript">
 
/*
Count down until any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
Modified by Robert M. Kuhnhenn, D.O. 
on 5/30/2006 to count down to a specific date AND time,
and on 1/10/2010 to include time zone offset.
*/
 
/*  Change the items below to create your countdown target date and announcement once
the target date and time are reached.  */
//FIRST TIMER
var current1="End of Timer 1!";        /*—>enter what you want the script to display
when the target date and time are reached, limit to 20 characters */

var year1=2012;        //—>Enter the count down target date YEAR
var month1=12;         //—>Enter the count down target date MONTH
var day1=21;           //—>Enter the count down target date DAY
var hour1=18;          //—>Enter the count down target date HOUR (24 hour clock)
var minute1=38;        //—>Enter the count down target date MINUTE
var tz1=-5;            /*—>Offset for your timezone in hours from UTC (see
http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location) */
 
//SECOND TIMER
var current2="End of Timer 2!";        /*—>enter what you want the script to display
when the target date and time are reached, limit to 20 characters */
var year2=2012;       //—>Enter the count down target date YEAR
var month2=12;        //—>Enter the count down target date MONTH
var day2=16;          //—>Enter the count down target date DAY
var hour2=14;         //—>Enter the count down target date HOUR (24 hour clock)
var minute2=0;        //—>Enter the count down target date MINUTE
var tz2=-5;           /*—>Offset for your timezone in hours from UTC (see
http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)*/
 
//THIRD TIMER
var current3="End of Timer 3!";        /*—>enter what you want the script to display
when the target date and time are reached, limit to 20 characters */
var year3=2012;        //—>Enter the count down target date YEAR
var month3=12;         //—>Enter the count down target date MONTH
var day3=12;           //—>Enter the count down target date DAY
var hour3=16;          //—>Enter the count down target date HOUR (24 hour clock)
var minute3=10;        //—>Enter the count down target date MINUTE
var tz3=-5;            /*—>Offset for your timezone in hours from UTC (see
http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location) */
 
//FOURTH TIMER
var current4="End of Timer 4!";        /*—>enter what you want the script to display
when the target date and time are reached, limit to 20 characters */
var year4=2012;        //—>Enter the count down target date YEAR
var month4=12;         //—>Enter the count down target date MONTH
var day4=27;           //—>Enter the count down target date DAY
var hour4=8;           //—>Enter the count down target date HOUR (24 hour clock)
var minute4=0;         //—>Enter the count down target date MINUTE
var tz4=-5;            /*—>Offset for your timezone in hours from UTC (see
http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location) */
 
//—>    DO NOT CHANGE THE CODE BELOW!    <—
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct",
"Nov","Dec");
 
function countdown1(yr,m,d,hr,min){
    theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min
    var today=new Date();
    var todayy=today.getYear();
    if (todayy < 1000) { todayy+=1900; }
    var todaym=today.getMonth();
    var todayd=today.getDate();
    var todayh=today.getHours();
    var todaymin=today.getMinutes();
    var todaysec=today.getSeconds();
    var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+
":"+todaysec;
    var todaystring=Date.parse(todaystring1)+(tz1*1000*60*60);
    var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
    var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
    var dd=futurestring-todaystring;
    var dday=Math.floor(dd/(60*60*1000*24)*1);
    var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
        document.getElementById('count1').innerHTML=current1;
        document.getElementById('count1').style.display="inline";
        document.getElementById('count1').style.width="390px";
        document.getElementById('dday1').style.display="none";
        document.getElementById('dhour1').style.display="none";
        document.getElementById('dmin1').style.display="none";
        document.getElementById('dsec1').style.display="none";
        document.getElementById('days1').style.display="none";
        document.getElementById('hours1').style.display="none";
        document.getElementById('minutes1').style.display="none";
        document.getElementById('seconds1').style.display="none";
        document.getElementById('spacer1-1').style.display="none";
        document.getElementById('spacer2-1').style.display="none";
        return;
    }
    else {
        document.getElementById('count1').style.display="none";
        document.getElementById('dday1').innerHTML=dday;
        document.getElementById('dhour1').innerHTML=dhour;
        document.getElementById('dmin1').innerHTML=dmin;
        document.getElementById('dsec1').innerHTML=dsec;
        setTimeout("countdown1(year1,month1,day1,hour1,minute1)",1000);
    }
}
 
function countdown2(yr,m,d,hr,min){
    theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min
    var today=new Date();
    var todayy=today.getYear();
    if (todayy < 1000) { todayy+=1900; }
    var todaym=today.getMonth();
    var todayd=today.getDate();
    var todayh=today.getHours();
    var todaymin=today.getMinutes();
    var todaysec=today.getSeconds();
    var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+
":"+todaysec;
    var todaystring=Date.parse(todaystring1)+(tz2*1000*60*60);
    var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
    var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
    var dd=futurestring-todaystring;
    var dday=Math.floor(dd/(60*60*1000*24)*1);
    var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
        document.getElementById('count2').innerHTML=current2;
        document.getElementById('count2').style.display="inline";
        document.getElementById('count2').style.width="390px";
        document.getElementById('dday2').style.display="none";
        document.getElementById('dhour2').style.display="none";
        document.getElementById('dmin2').style.display="none";
        document.getElementById('dsec2').style.display="none";
        document.getElementById('days2').style.display="none";
        document.getElementById('hours2').style.display="none";
        document.getElementById('minutes2').style.display="none";
        document.getElementById('seconds2').style.display="none";
        document.getElementById('spacer1-2').style.display="none";
        document.getElementById('spacer2-2').style.display="none";
        return;
    }
    else {
        document.getElementById('count2').style.display="none";
        document.getElementById('dday2').innerHTML=dday;
        document.getElementById('dhour2').innerHTML=dhour;
        document.getElementById('dmin2').innerHTML=dmin;
        document.getElementById('dsec2').innerHTML=dsec;
        setTimeout("countdown2(year2,month2,day2,hour2,minute2)",1000);
    }
}
 
function countdown3(yr,m,d,hr,min){
    theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min
    var today=new Date();
    var todayy=today.getYear();
    if (todayy < 1000) { todayy+=1900; }
    var todaym=today.getMonth();
    var todayd=today.getDate();
    var todayh=today.getHours();
    var todaymin=today.getMinutes();
    var todaysec=today.getSeconds();
    var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+
":"+todaysec;
    var todaystring=Date.parse(todaystring1)+(tz3*1000*60*60);
    var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
    var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
    var dd=futurestring-todaystring;
    var dday=Math.floor(dd/(60*60*1000*24)*1);
    var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
        document.getElementById('count3').innerHTML=current3;
        document.getElementById('count3').style.display="inline";
        document.getElementById('count3').style.width="390px";
        document.getElementById('dday3').style.display="none";
        document.getElementById('dhour3').style.display="none";
        document.getElementById('dmin3').style.display="none";
        document.getElementById('dsec3').style.display="none";
        document.getElementById('days3').style.display="none";
        document.getElementById('hours3').style.display="none";
        document.getElementById('minutes3').style.display="none";
        document.getElementById('seconds3').style.display="none";
        document.getElementById('spacer1-3').style.display="none";
        document.getElementById('spacer2-3').style.display="none";
        return;
    }
    else {
        document.getElementById('count3').style.display="none";
        document.getElementById('dday3').innerHTML=dday;
        document.getElementById('dhour3').innerHTML=dhour;
        document.getElementById('dmin3').innerHTML=dmin;
        document.getElementById('dsec3').innerHTML=dsec;
        setTimeout("countdown3(year3,month3,day3,hour3,minute3)",1000);
    }
}
 
function countdown4(yr,m,d,hr,min){
    theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min
    var today=new Date();
    var todayy=today.getYear();
    if (todayy < 1000) {todayy+=1900;}
    var todaym=today.getMonth();
    var todayd=today.getDate();
    var todayh=today.getHours();
    var todaymin=today.getMinutes();
    var todaysec=today.getSeconds();
    var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+
":"+todaysec;
    var todaystring=Date.parse(todaystring1)+(tz4*1000*60*60);
    var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
    var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
    var dd=futurestring-todaystring;
    var dday=Math.floor(dd/(60*60*1000*24)*1);
    var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
        document.getElementById('count4').innerHTML=current4;
        document.getElementById('count4').style.display="inline";
        document.getElementById('count4').style.width="390px";
        document.getElementById('dday4').style.display="none";
        document.getElementById('dhour4').style.display="none";
        document.getElementById('dmin4').style.display="none";
        document.getElementById('dsec4').style.display="none";
        document.getElementById('days4').style.display="none";
        document.getElementById('hours4').style.display="none";
        document.getElementById('minutes4').style.display="none";
        document.getElementById('seconds4').style.display="none";
        return;
    }
    else {
        document.getElementById('count4').style.display="none";
        document.getElementById('dday4').innerHTML=dday;
        document.getElementById('dhour4').innerHTML=dhour;
        document.getElementById('dmin4').innerHTML=dmin;
        document.getElementById('dsec4').innerHTML=dsec;
        setTimeout("countdown4(year4,month4,day4,hour4,minute4);",1000);
    }
}
 
countdown1(year1,month1,day1,hour1,minute1);
countdown2(year2,month2,day2,hour2,minute2);
countdown3(year3,month3,day3,hour3,minute3);
countdown4(year4,month4,day4,hour4,minute4);
 
</script>
</body>

 

 
Was this article helpful? yes / no
Article details
Article ID: 14
Category: General
Views: 4965
Rating (Votes): Article rated 3.5/5.0 (39)

 
« Go back

• • • Powered by Help Desk Software HESK • • •
Licensed to www.rmkwebdesign.com
JavaScript tutorials
Dragon NaturallySpeaking 11 Premium by Nuance