How to create Timer Using JavaScript?

With JavaScript it is possible to execute some code not immediately after a function is called,  but after a specified time interval. This i...

With JavaScript it is possible to execute some code not immediately after a function is called,  but after a specified time interval. This is called timing events. With timing events you can create timer like stopwatch, clock, quiz timer and many more.

For timing events in JavaScript, there are four methods that are used are

setTimeout(): This method of the window object schedules a function to run after a specified number of milliseconds elapses. setTimeout() returns a value that can be passed to clearTimeout() to cancel the execution of the scheduled function.

syntax: var t=setTimeout("javascript statement", milliseconds)

setInterval(): setInterval is like setTimeout() except that the specified function is invoked repeatedly at intervals of the specified number of milliseconds.

syntax: var t=setInterval("javascript statement", milliseconds)

clearTimeout() and clearInterval(): Like setTimeout() and setInterval() returns a value that can be passed to clearTimeout() or clearInterval() to cancel any future invocation of the scheduled function.

syntax: clearTimeout(setTimeout_variable)

syntax: clearInterval(setInterval_variable)

Execution of Function with Timer

Here is a function which will be executed after 5 seconds on button click. Here the first parameter of setTimeout() is a string that contains a

JavaScript statement and the second parameter indicates how many milliseconds from now you want to execute the first parameter.

<script>
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')", 5000)
}
</script>

<form>
<input type="button" value="Dispaly timed alertbox!" onClick="timedMsg()">
</form>

Preview of Timer

How to Create Stopwatch using JavaScript Timer

With using JavaScript timing event, you can create a stopwatch which counts the time when clicked on start button and stops counting when clicked on stop button.

Here is a JavaScript and HTML code for creating stopwatch.

<script>
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()", 1000)
}
function stopCount()
{
clearTimeout(t)
}
function clearTimer()
{
document.getElementById('txt').value=0
c=0
}
</script>

<form>
<input type="button" value="Start Count" onClick="timedCount()">
<input type="button" value="0" id="txt">
<input type="button" value="Stop Count" onClick="stopCount()">
<input type="button" value="Clear Timer" onClick="clearTimer()">
</form>

Preview of Stopwatch

How to Create Timer for Online Quiz

With using JavaScript timing event, you can create timer for online quiz, which count down from the given time and finishes quiz after given time finished. 

Here is a JavaScript and HTML code for creating timer for online quiz.

<script>
var s=59
var m=5
var q
function quizCount()
{
document.getElementById('timer').value=m+":"+s+" remaining"
s=s-1
q=setTimeout("quizCount()", 1000)
if (s<1)
{ m=m-1; s=59;}

if (m<0)
{
quizStop();
}
}
function quizStop()
{
clearTimeout(q)
document.getElementById('timer').value="Your Time Was Finished"
}
</script>

<form>
<input type="button" value="Start Count" onClick="quizCount()">
<input type="button" value="Quiz Timer" id="timer">
<input type="button" value="Stop Count" onClick="quizStop()">
</form>

Here the timer was set for 5 minutes, it countdowns from 5 to 0 and when time finishes it gives alert for time finished. You can add function to calculate and display quiz results on quizStop().

Preview of Online Quiz Timer

Related Search Terms

•  Timer Using JavaScript

• Stopwatch Using JavaScript

• JavaScript Online Quiz Timer

Related Posts:

• How to use Round, Random, Min and Max in JavaSript

• How to Concatenate, Join and Sort Array in JavaScript?

• How to Loop Through JavaScript Array?

• How to Loop using JavaScript?

• How to Show Pop Up Boxes Using JavaScript?

• How to Write Conditional Statements in JavaScript?

• How to Write JavaScript With HTML?

• How to create Changeable Date and Time Using JavaScript?

• How to Validate a HTML Form Using JavaScript?

• How to create a simple form using HTML?

• How to Create JavaScript Image Slideshow with LInks

• How to Display Date Format in JavaScript?

• How to Validate a HTML Form Using JavaScript?

• What are the Different Ways to Redirect Page in JavaScript?

• How to Detect Visitor's Browser Using JavaScript?

• How to make rounded corners border using CSS

• How to Create Custom CSS Template for Printing

• How to create a simple form using HTML?