Style 1D

Show Terms of Use
You may freely use any script found on this site on both personal & commercial webpages. However, you may not sell the scripts or redistribute the scripts by, for example, putting them on another script archive or CD ROM.
If you use any of the scripts, the following credits included in the code must remain intact:
/*
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 10/20/2007 to a new format, and 1/10/2010 to include
time zone offset.
*/

 

This one is a little more complicated because it uses two images that you will need to copy and upload to your site's server.  One is a background image for the numbers, the other is a black line that goes through the numbers. 


Step 1:  insert the following into the head element

Select the code by clicking on the "Select entire code" button, then copy it and insert it within the head element of your page (between <head> and </head>) to get the countdown timer shown above.  The code is repeated below with color coding to show what you can change.

<html>

<head>

<style type="text/css">

.background {

    border-style: none;

    width: 62px;

    height: 58px;

}

.numbers {

    border-style: none;

    background-color: transparent;

    padding: 0px;

    margin: 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 */

}

.title {    /* 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; 

}

#form {    /* 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;

    margin: 0px auto;

    position: relative;   /* leave as "relative" to keep timer centered on your page, or change to "absolute" then change the values of the "top" and "left" properties to position the timer */

    top: 0px;             /* change to position the timer */

    left: 0px;            /* change to position the timer; delete this property and it's value to keep timer centered on page */

}

.line {

    border-style: none;

    width: 62px;

    height: 2px;

    z-index: 15;

}

</style>


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

var current="Winter is here!";     //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters

var year=2010;        //—>Enter the count down target date YEAR

var month=12;          //—>Enter the count down target date MONTH

var day=21;           //—>Enter the count down target date DAY

var hour=18;          //—>Enter the count down target date HOUR (24 hour clock)

var minute=38;        //—>Enter the count down target date MINUTE

var tz=-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 countdown(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)+(tz*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=current;

        document.getElementById('count2').style.display="inline";

        document.getElementById('count2').style.width="390px";

        document.getElementById('dday').style.display="none";

        document.getElementById('dhour').style.display="none";

        document.getElementById('dmin').style.display="none";

        document.getElementById('dsec').style.display="none";

        document.getElementById('days').style.display="none";

        document.getElementById('hours').style.display="none";

        document.getElementById('minutes').style.display="none";

        document.getElementById('seconds').style.display="none";

        return;

    }

    else {

        document.getElementById('count2').style.display="none";

        document.getElementById('dday').innerHTML=dday;

        document.getElementById('dhour').innerHTML=dhour;

        document.getElementById('dmin').innerHTML=dmin;

        document.getElementById('dsec').innerHTML=dsec;

        setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);

    }

}

</script>


</head>


<body onload="countdown(year,month,day,hour,minute)">

<div id="form">

    <div class="numbers" id="count2" 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="background" style="position: absolute; left: 69px; top: 12px;"/>

    <img src="images/line.jpg" class="line" style="position: absolute; left: 69px; top: 40px;"/>

    <div class="numbers" id="dday" style="position: absolute; left: 69px; top: 21px;" ></div>


    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 141px; top: 12px;"/>

    <img src="images/line.jpg" class="line" style="position: absolute; left: 141px; top: 40px;"/>

    <div class="numbers" id="dhour" style="position: absolute; left: 141px; top: 21px;" ></div>


    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 213px; top: 12px;"/>

    <img src="images/line.jpg" class="line" style="position: absolute; left: 213px; top: 40px;"/>

    <div class="numbers" id="dmin" style="position: absolute; left: 213px; top: 21px;" ></div>


    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 285px; top: 12px;"/>

    <img src="images/line.jpg" class="line" style="position: absolute; left: 285px; top: 40px;"/>

    <div class="numbers" id="dsec" style="position: absolute; left: 285px; top: 21px;" ></div>


    <div class="title" id="days" style="position: absolute; left: 66px; top: 73px;" >Days</div>

    <div class="title" id="hours" style="position: absolute; left: 138px; top: 73px;" >Hours</div>

    <div class="title" id="minutes" style="position: absolute; left: 210px; top: 73px;" >Minutes</div>

    <div class="title" id="seconds" style="position: absolute; left: 282px; top: 73px;" >Seconds</div>

</div>


</body>

</html>

Step 4:  download the images

Now download these two images and place them into a new folder:

        bkgdimage.gif

        line.jpg

Save the images to your desktop by control-clicking (or right-clicking) on each image name then select "Download Linked File" from the pop-up menu and put them in a folder (e.g., "images") that you will then upload to your site's server.  Make sure their names are maintained (bkgdimage.gif and line.jpg).

Step 2:  insert the following into the body element

Select the code by clicking on the "Select entire code" button, then copy it and insert it within the body element of your page (between <body> and </body>).

Step 3:  add an onload event to the body tag

Insert "countdown(year,month,day,hour,minute)"  into the body's onload event.

Step 5:  format the countdown timer

You can change some of the formating by changing the items marked below in yellow.  You must change the items in light blue to reflect what you want the script to display when the target date and time are reached and to set the target date and time.  You must also change the code to let it know where the number's background image and the black line are located.  To do that, change the eight areas of the code marked in light green to the name of YOUR folder where you have saved the files (make sure you upload that folder to your site's server).  Comments are noted in magenta.  To adjust the position of the counter in the page, change the "position," "top," and "left" values under "#form" in the CSS formating as noted in the comments below.