We can create the JavaScript functions that can execute HTML or JavaScript codes not immediately after a function called. Some of the functions in JavaScript allows you to execute after a specified time interval, they are timing events. With the use of timing events, you can create timers using JavaScript like stopwatch, clock, quiz timer and many more.
For timing events in JavaScript, there are four methods. Here are some of the methods that are used for creating timing events on different types of timers using JavaScript functions.
setTimeout(): This method of the window object schedules a function to run after a specified number of milliseconds. 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(): Likewise setTimeout() method setInterval() will also execute the specified function. It is invoked repeatedly at intervals of the specified number of milliseconds.
syntax: var t=setInterval("javascript statement", milliseconds)clearTimeout() and clearInterval(): With the use of clearTimeout() or clearInterval() methods, we can cancel any future invocation of the scheduled function or the value returned by setTimeout() and setInterval() methods.
syntax: clearTimeout(setTimeout_variable)
syntax: clearInterval(setInterval_variable)Also Read: How to Show Pop Up Window Using JavaScript
Table of Contents
Execution of Function with Timer
Here is a function that will execute after 5 seconds, when the button was clicked. 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
When you click on the button below, it will show the alert box on your screen after 5 seconds.
Also Read: How to Click Button Using JavaScript?
How to Create Stopwatch using JavaScript Timer
Using a JavaScript timing event, you can create a stopwatch that counts the time when clicked on the start button and stops counting when clicked on the stop button.
Here is a JavaScript and HTML code for creating a 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
When you click on the “Start Count” button, it will start counting. The “Stop Count” button will stop the counting and a “Clear Timer” button clears the number.
Recommended Read: How to Create JavaScript Bookmarklet?
How to Create Timer for Online Quiz
With the use of a JavaScript timing event, you can also create a timer for an 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 a timer for an 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
When you click on the “Start Count” button, it will start the count down. It the provided time was elapsed or when you click on the “Stop Count” button, it will stop counting.
Comments are closed.