Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Updating countdown every second using javascript

Here is a code example how to update countdown on your website every second. You only need to setup start time.

<p>
<span id='years'></span><span id='y'> years </span>
<span id='months'></span><span id='m'> months </span>
<span id='days'></span><span id='d'> days </span>
<span id='hours'></span><span id='h'> hours </span>
<span id='mins'></span><span id='min'> minutes </span>
<span id='secs'></span> <span id='sec'>seconds</span>
</p>
<script type='text/javascript'>
// <![CDATA[
//setting time left
var years = 2,
    months = 3,
    days = 4,
    hours = 5,
    mins = 6,
    secs = 7;

function update_countdown()
{
    if (!years && !months && !days && !hours && !mins && !secs)
        return;
        
    secs--;
    if (secs == -1)
    {
        mins--;
        secs = 59;
    }
    if (mins == -1)
    {
        hours--;
        mins = 59;
    }
    if (hours == -1)
    {
        days--;
        hours = 23;
    }
    if(days == -1)
    {
        months--;
        var d = new Date();
        var cmonth = d.getMonth();
        if(cmonth == 1 || cmonth == 3 || cmonth == 5 || 
            cmonth == 7 || cmonth == 8 || cmonth == 10 || cmonth == 12)
        {
            days = 30;
        }
        else if(cmonth == 4 || cmonth == 6 || cmonth == 9 || cmonth == 11)
        {
            days = 29;
        }
        else
        {
            var cyear = d.getFullYear();
            if(new Date(cyear,1,29).getDate() == 29)
            {
                days = 28;
            }
            else 
            {
                days = 27;
            }
        }
    }
    if (months == -1)
    {
        years--;
        months = 12;
    }
    
    document.getElementById("years").innerHTML = years;
    document.getElementById("months").innerHTML = months;
    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("mins").innerHTML = mins;
    document.getElementById("secs").innerHTML = secs;
    
    if(years == 0)
    {
        document.getElementById('years').innerHTML = "";
        document.getElementById('y').innerHTML = "";
        if(months == 0)
        {
            document.getElementById('months').innerHTML = "";
            document.getElementById('m').innerHTML = "";
            if(days == 0)
            {
                document.getElementById('days').innerHTML = "";
                document.getElementById('d').innerHTML = "";
                if(hours == 0)
                {
                    document.getElementById('hours').innerHTML = "";
                    document.getElementById('h').innerHTML = "";
                    if(mins == 0)
                    {
                        document.getElementById('mins').innerHTML = "";
                        document.getElementById('min').innerHTML = "";
                    }
                }
            }
        }
    }
    else if(years < 0)
    {
        document.getElementById('years').innerHTML = "";
        document.getElementById('y').innerHTML = "";
        document.getElementById('months').innerHTML = "";
        document.getElementById('m').innerHTML = "";
        document.getElementById('days').innerHTML = "";
        document.getElementById('d').innerHTML = "";
        document.getElementById('hours').innerHTML = "";
        document.getElementById('h').innerHTML = "";
        document.getElementById('mins').innerHTML = "";
        document.getElementById('min').innerHTML = "";
        document.getElementById("secs").innerHTML = "";
        document.getElementById("sec").innerHTML = "";
    }
    
    setTimeout("update_countdown();", 1000);
}

setTimeout("update_countdown();", 1000);
// ]]>
</script>

And here is an example result:

years months days hours minutes seconds


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus