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)