Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Countdown timer in Pure JavaScript

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 816
    Comment on it

    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 endsstarts 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 );
    Countdown timer in Pure JavaScript

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: