Mar 27, 2011

Count Down Timer Using JavaScript.


Sometimes we have seen on some site that they are showing countdown timer for some particular event. Main purpose of countdown timer is to calculate reaming time for that event in reverse direction.

It will mostly display in Days-Hours-Minutes and Seconds
We can change this format and also look and feel for countdown timer.

I have created one small countdown timer using JavaScript language just go through and let me know if you need more clarification on it.

 Screen shot of Timer

After 40 seconds it will show like below figure.


Here is the code and it's explanation
           


<html>
<head></head>
<style type="text/css">
.head{font-weight:bold;font-size:25px;color:#00f;}
.text{font-weight:normal;font-size:20px;color:#222222;}
</style>
<body>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
// Assign future date here in format of
dateFuture = new Date(2011,4,4,12,0,0);//Year-Month-Day-Hour-Minute-Seconds. Month starts from zero, 0 for jan and 11 for dec
function GetCount(){
        dateNow = new Date();//grab current date
                        amount = dateFuture.getTime() - dateNow.getTime();//calc milliseconds between dates
                        delete dateNow;
        // time is already past
        if(amount < 0){
                document.getElementById('countbox').innerHTML="Now!";
        }
        // date is still good
        else{
                days=0;hours=0;mins=0;secs=0;out="";
                amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
                days=Math.floor(amount/86400);//days
                amount=amount%86400;
                hours=Math.floor(amount/3600);//hours
                amount=amount%3600;
                mins=Math.floor(amount/60);//minutes
                amount=amount%60;
                secs=Math.floor(amount);//seconds
                if (days != 0)
                {
                    out += "<span class='head'>"+days + "</span> <span class='text'>day" + ((days != 1) ? "s" : "") + ",</span> ";
                }
                if (days != 0 || hours != 0)
                {
                    out += "<span  class='head'>"+hours + "</span> <span class='text'>hour" + ((hours != 1) ? "s" : "") + ", </span>";
                }
                if (days != 0 || hours != 0 || mins != 0)
                {
                    out += "<span  class='head'>"+mins + "</span> <span class='text'>minute" + ((mins != 1) ? "s" : "") + ", </span>";
                }
                out += "<span  class='head'>"+secs +"</span> <span class='text'>seconds</span>";
                document.getElementById('countbox').innerHTML=out;
                //This function will call every one second, it's second param is milisecond
                                                setTimeout("GetCount()", 1000);
        }
}
window.onload=function(){GetCount();}//call when everything has loaded
//-->
</script>
<div id="countbox"></div>
</body>
</html>


This is the output of above code






0 comments:

Post a Comment

Author Profile

Total Pageviews

Categories

Followers

 

Sponsors