DIGITAL

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.
(www.rmkwebdesign.com/Countdown_Timers/)
on 5/30/2006 to count down to a specific date AND time,
on 10/20/2007 to a new format, on 1/10/2010 to include
time zone offset, and on 7/12/2012 to digital 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.

Step 5:  format the countdown timer

You can change some of the formating by changing the items marked below in yellow.  You must also 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.  Comments are noted in magenta.  To adjust the position of the counter in the page, change the "position," "top," and "left" values under "#holder" in the CSS formating as noted in the comments below.

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 4:  download digital images

Decide which digital image color you want to use in your timer (you can test how they look in the timer by clicking on the radio buttons above and viewing the timer with the various colors).  Then download the images to your computer, unzip the file (will be a folder named "digital-numbers"), and place this folder at the same directory level as your page with the timer script.


Download digital images:     blue     lime     red     white     yellow

<html>

<head>

    <style type="text/css">

    #holder {

        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: 10px;            /* change to position the timer */

        left: 0px;            /* change to position the timer; must also change

                                 position to "absolute" above */

        width: 270px;

        height: 60px;

        border: none;

        margin: 0px auto;

    }


    #title, #note {

        color: lime;           /* this determines the color of the DAYS, HRS, MIN, SEC

                                  labels under the timer and the color of the note

                                  that displays after reaching the target date and

                                  time; if using the blue digital images, change to

                                  #52C6FF; for the red images, change to #FF6666; for

                                  the white images, change to #BBBBBB; for the yellow

                                  images, change to #FFFF00 */

    }


    #note {

        position: relative;

        top: 6px;

        height: 20px;

        width: 260px;

        margin: 0 auto;

        padding: 0px;

        text-align: center;

        font-family: Arial;

        font-size: 18px;

        font-weight: bold;    /* options are normal, bold, bolder, lighter */

        font-style: normal;   /* options are normal or italic */

        z-index: 1;

    }


    .title {

        border: none;

        padding: 0px;

        margin: 0px;

        width: 30px;

        text-align: center;

        font-family: Arial;

        font-size: 10px;

        font-weight: normal;    /* options are normal, bold, bolder, lighter */

        background-color: transparent;

    }


    #timer {

        position: relative;

        top: 0px;

        left: 0px;

        margin: 5px auto;

        text-align: center;

        width: 260px;

        height: 26px;

        border: none;

        padding: 10px 5px 20px 5px;

        background: #000000;    /* may change to another color, or to "transparent" */

        border-radius: 20px;

        box-shadow: 0 0 10px #000000; /* change to "none" if you don't want a shadow */

    }

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

    (www.rmkwebdesign.com/Countdown_Timers/)

    on 5/30/2006 to count down to a specific date AND time,

    on 10/20/2007 to a new format, on 1/10/2010 to include

    time zone offset, and on 7/12/2012 to digital numbers.

    */


    /* 

    Change the items noted in light blue below to create your countdown target

    date and announcement once the target date and time are reached.

    */

    var note="Winter has arrived!";    /* -->Enter what you want the script to

                                             display when the target date and time

                                             are reached, limit to 25 characters */

    var year=2012;      /* -->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=6;         /* -->Enter the count down target date HOUR (24 hour

                              clock) */

    var minute=12;      /* -->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!    <--

    d1 = new Image(); d1.src = "digital-numbers/1.png";

    d2 = new Image(); d2.src = "digital-numbers/2.png";

    d3 = new Image(); d3.src = "digital-numbers/3.png";

    d4 = new Image(); d4.src = "digital-numbers/4.png";

    d5 = new Image(); d5.src = "digital-numbers/5.png";

    d6 = new Image(); d6.src = "digital-numbers/6.png";

    d7 = new Image(); d7.src = "digital-numbers/7.png";

    d8 = new Image(); d8.src = "digital-numbers/8.png";

    d9 = new Image(); d9.src = "digital-numbers/9.png";

    d0 = new Image(); d0.src = "digital-numbers/0.png";

    bkgd = new Image(); bkgd.src = "digital-numbers/bkgd.gif";


    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('note').innerHTML=note;

            document.getElementById('note').style.display="block";

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

            clearTimeout(startTimer);

            return;

        }

        else {

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

            document.getElementById('timer').style.display="block";

            startTimer = setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",500);

        }

        convert(dday,dhour,dmin,dsec);

    }


    function convert(d,h,m,s) {

        if (!document.images) return;

        if (d <= 9) {

            document.images.day1.src = bkgd.src;

            document.images.day2.src = bkgd.src;

            document.images.day3.src = eval("d"+d+".src");

        }

        else if (d <= 99) {

            document.images.day1.src = bkgd.src;

            document.images.day2.src = eval("d"+Math.floor(d/10)+".src");

            document.images.day3.src = eval("d"+(d%10)+".src");

        }

        else {

            document.images.day1.src = eval("d"+Math.floor(d/100)+".src");

            var day = d.toString();

            day = day.substr(1,1);

            day = parseInt(day);

            document.images.day2.src = eval("d"+day+".src");

            document.images.day3.src = eval("d"+(d%10)+".src");

        }

        if (h <= 9) {

            document.images.h1.src = d0.src;

            document.images.h2.src = eval("d"+h+".src");

        }

        else {

            document.images.h1.src = eval("d"+Math.floor(h/10)+".src");

            document.images.h2.src = eval("d"+(h%10)+".src");

        }

        if (m <= 9) {

            document.images.m1.src = d0.src;

            document.images.m2.src = eval("d"+m+".src");

        }

        else {

            document.images.m1.src = eval("d"+Math.floor(m/10)+".src");

            document.images.m2.src = eval("d"+(m%10)+".src");

        }

        if (s <= 9) {

            document.images.s1.src = d0.src;

            document.images.s2.src = eval("d"+s+".src");

        }

        else {

            document.images.s1.src = eval("d"+Math.floor(s/10)+".src");

            document.images.s2.src = eval("d"+(s%10)+".src");

        }

    }

    </script>

</head>

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

    <div id="holder">

        <div id="timer">

            <div id="note"></div>

            <div id="countdown">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="day1">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="day2">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="day3">

                <img height=21 id="colon1" src="digital-numbers/colon.png" width=9 name="d1">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="h1">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="h2">

                <img height=21 id="colon2" src="digital-numbers/colon.png" width=9 name="g1">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="m1">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="m2">

                <img height=21 id="colon3" src="digital-numbers/colon.png" width=9 name="j1">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="s1">

                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="s2">

                <div id="title">

                    <div class="title" style="position: absolute; top: 36px; left: 42px">DAYS</div>

                    <div class="title" style="position: absolute; top: 36px; left: 105px">HRS</div>

                    <div class="title" style="position: absolute; top: 36px; left: 156px">MIN</div>

                    <div class="title" style="position: absolute; top: 36px; left: 211px">SEC</div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>