Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

This blog is part of 1 Tute Sets.

Javacript/jQuery Examples
Tute set by shristi.shandilya
9 Blogs
prev 1 2 next

  • Countdown timer in Pure JavaScript

    @shristi.shandilya
    Recommendations Offline Message

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.84k
    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 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.

    2. body{background-color:#000}
    3. #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;}
    4.  
    5.  

    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:

    1. <div id="countdown"></div>
    2.  

    JAVASCRIPT:

    1. function countdown( elementName, minutes, seconds )
    2. {
    3.     var element, endTime, hours, mins, msLeft, time;
    4.  
    5.     function twoDigits( n )
    6.     {
    7.         return (n <= 9 ? "0" + n : n);
    8.     }
    9.  
    10.     function updateTimer()
    11.     {
    12.         msLeft = endTime - (+new Date);
    13.         if ( msLeft < 1000 ) {
    14.             element.innerHTML = "countdown's over!";
    15.         } else {
    16.             time = new Date( msLeft );
    17.             hours = time.getUTCHours();
    18.             mins = time.getUTCMinutes();
    19.             element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
    20.             setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
    21.         }
    22.     }
    23.  
    24.     element = document.getElementById( elementName );
    25.     endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    26.     updateTimer();
    27. }
    28.  
    29.  
    30. countdown( "countdown", 120, 0 );
    Countdown timer in Pure JavaScript
    javascript timer Blog
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: