Hii,

In this blog, I am going to share few lines of javascript code  to create a countdown timer.

Countdown timer is used in many places like

• In online shopping sites showing sale ends , starts in time, delivery time, shipping time etc.
• In online examination countdown timer is used to show students time left for the test to be over.
• While watching any T.v show you must have noticed  countdown timer used in some advertisement to show how much time is left for the show to start.
• Playing online games , you have seen countdown timer shows time left for the player.

Now go through the example below to learn how to create a simple Countdown Timer using Pure JavaScript without any external plugins or library.

In this example i have created a countdown timer for 2 hours, you can set the time of countdown timer as per the requirement.

CSS: CSS properties are used just to give a little attractive look ,You can use CSS properties as per the requirement.

body{background-color:#000}
#countdown{border:4px solid #fff;background-color:rgba(0,0,0,0.5);width:500px;margin:50px auto 0;padding:15px;border-radius:8px;color:#fff;font-size:60px;text-align:center;font-family:Orbitron;font-weight:bold;}

If you want to use the same font family i had used please include this link

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>

HTML:

<div id="countdown"></div>

JAVASCRIPT:

function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "countdown's over!";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}


countdown( "countdown", 120, 0 );