Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How can create a countdown timer using javascript?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 126
    Comment on it

    To create a countdown timer please check the below example :-

    Example -

    In this example let's suppose a user fill a form and at that time we want to limit the form filling time to 5 minutes and at the same time we want to show that user how many minutes/seconds are still left there. if the set time limit will exceed then user will informed with a time out alert message.

    So let's start code . create a file name timer.js and put below code over there.

    var timer = {
        minutes :0,
        seconds : 0,
        elm :null,
        samay : null,
        sep : ':',
        init : function(m,s,elm)
        {
            m = parseInt(m,10);
            s = parseInt(s,10);
            if(m < 0 || s <0 || isNaN(m) || isNaN(s)) { alert('Invalid Values'); return; }
            this.minutes = m;
            this.seconds = s;
            this.elm = document.getElementById(elm);
            timer.start();
        },
        start : function()
        {
            this.samay = setInterval((this.doCountDown),1000);
        },
        doCountDown : function()
        {
            if(timer.seconds == 0)
            {
                if(timer.minutes == 0)
                {
                    clearInterval(timer.samay);
                    timerComplete();
                    return;
                }
                else
                {
                    timer.seconds=60;
                    timer.minutes--;
                }
            }
            timer.seconds--;
            timer.updateTimer(timer.minutes,timer.seconds);
        },
        updateTimer :  function(min,secs)
        {
            min = (min < 10 ? '0'+min : min);
            secs = (secs < 10 ? '0'+secs : secs);
            (this.elm).innerHTML = min+(this.sep)+secs;
        }
    }
    function timerComplete()
    {
        alert('time out buddy!!!');
    }
    

    For starting the timer write below lines just after where you included the timer.js

    window.onload = init;
    function init()
    {
        timer.init(0,55,'container');
    }
    

    On the html side please create an element having id named as container.

    In the above code init function have 3 parameters : minutes, seconds and the id of element where the countdown will be show.

    Above created timer will start a countdown for 55 seconds. and after 55 seconds, timerComplete() function will executed and alert a message "time out buddy!!!".

 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: