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

Search knowledgebase:  

How do I add milliseconds to the timer?

Solution

The CSS styling for the above timer is as follows (place in the head section; between <head> and </head>):

<style type="text/css">
.numbers {
    width: 50px;
    text-align: center;
    font-family: Arial;
    font-size: 24px;
    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: 50px;
    text-align: center;
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;  // options are normal, bold, bolder, lighter
    color: #777777;     // change color using the hexadecimal color codes for HTML
}
#table {
    width: 394px;
    height: 68px;
    background-color: transparent;
}
</style>

Add the code for the timer in the body section (between <body> and </body>; new code for adding milliseconds is noted in red below):

<table id="table" border="0">
    <tr>
        <td align="center" colspan="7"><div class="numbers" id="count2"
style="padding: 5px 0 0 0; "></div></td>
    </tr>
    <tr id="spacer1">
        <td align="center" ><div class="numbers" ></div></td>
        <td align="center" ><div class="numbers" id="dday"></div></td>
        <td align="center" ><div class="numbers" id="dhour"></div></td>
        <td align="center" ><div class="numbers" id="dmin"></div></td>
        <td align="center" ><div class="numbers" id="dsec"></div></td>
        <td align="center" ><div class="numbers" id="dmilli"></div></td>
        <td align="center" ><div class="numbers" ></div></td>
    </tr>
    <tr id="spacer2">
        <td align="center" ><div class="title" ></div></td>
        <td align="center" ><div class="title" id="days">Days</div></td>
        <td align="center" ><div class="title" id="hours">Hours</div></td>
        <td align="center" ><div class="title" id="minutes">Minutes</div></td>
        <td align="center" ><div class="title" id="seconds">Seconds</div></td>
        <td align="center" ><div class="title" id="millisecs">Millisec</div></td>
        <td align="center" ><div class="title" ></div></td>
    </tr>
</table>

Then replace the script for the timer—which can be placed within the body section of your page, AFTER
the table containing the timer—with this new script (new changes are noted in red below):

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


var current="Time is up!";    /*—>enter what you want the script to
                                display when the target date and time
                                are reached, limit to 20 characters */
var year=2013;    //—>Enter the count down target date YEAR
var month=7;      //—>Enter the count down target date MONTH
var day=24;       //—>Enter the count down target date DAY
var hour=2;       //—>Enter the count down target date HOUR (24 hour clock)
var minute=30;    //—>Enter the count down target date MINUTE
var tz=-4;        /*—>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");

//This function adds a zero to numbers < 10
function leadingZero(i) {
    if (i<10) i="0" + i;
    return i;
}

//This function adds a zero to milliseconds < 100
function leadingZeroMilli(i) {
    if (i<100) i="0" + i;
    return i;
}

function countdown(yr,m,d,hr,min){
    theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
    var today=new Date();
    var todaymilli=today.getTime()+(tz*1000*60*60);
    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 todaymillisec=today.getMilliseconds();
    var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+
":"+todaymin+":"+todaysec;
    var todaystring=Date.parse(today)+(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-todaymilli;
    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);
    var dmilli=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))%1000);
    // dday = leadingZero(dday); /*Remove the two slash marks (//) at the front
                                of this line if you want a leading "0" infront of
                                days less than 10 */

    // dhour = leadingZero(dhour); /*Remove the two slash marks (//) at the front
                                of this line if you want a leading "0" infront of
                                hours less than 10 */

    dmin = leadingZero(dmin);
    dsec = leadingZero(dsec);
    dmilli = leadingZeroMilli(dmilli);
    dmilli = leadingZero(dmilli);
    if(dday<="00"&&dhour<="00"&&dmin<="00"&&dsec<="00") {
        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('dmilli').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";
        document.getElementById('millisecs').style.display="none";
        document.getElementById('spacer1').style.display="none";
        document.getElementById('spacer2').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;
        document.getElementById('dmilli').innerHTML=dmilli;
        setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1);
    }
}
countdown(year,month,day,hour,minute)
</script>
 
Was this article helpful? yes / no
Article details
Article ID: 12
Category: Customize Timer
Views: 723
Rating (Votes): Article rated 3.7/5.0 (31)

 
« Go back

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