Creating a JavaScript Timer

Contact Us or call 1-877-932-8228
Creating a JavaScript Timer

Creating a JavaScript Timer

JavaScript timers can be used to create timed quizzes or events. Timers are started and stopped with the following four methods of the windows object:

  1. setTimeout(code_to_execute,wait_time_in_milliseconds)
  2. clearTimeout(timer)
  3. setInterval(code_to_execute,interval_in_milliseconds)
  4. clearInterval(interval)

The example below uses setInterval() and clearInterval() to start and stop a timer.

Code Sample:

DynamicForms/Demos/Timer.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Timer</title>
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
	function resetTimer(seconds){
		var btnStart = document.getElementById("btnStart");
		var btnReset = document.getElementById("btnReset");
		document.getElementById("timeLeft").value = seconds;
		clearInterval(timer);
		btnStart.disabled = false;
		btnReset.disabled = true;
	}
	
	function decrementTimer(){
		var timeLeft = document.getElementById("timeLeft");
		var btnStart = document.getElementById("btnStart");
		var btnReset = document.getElementById("btnReset");
		timesUp = false;
		btnStart.disabled = true;
		btnReset.disabled = false;
		timeLeft.value--;
		if (timeLeft.value < 0) {
			resetTimer(10);
			alert("Time's up!");
		}
	}

	var timer, timesUp;
	observeEvent(window,"load",function() {
		var timeLeft = document.getElementById("timeLeft");
		var btnStart = document.getElementById("btnStart");
		var btnReset = document.getElementById("btnReset");
		observeEvent(btnStart,"click",function() {
			timer=setInterval(decrementTimer, 1000);
		});
		observeEvent(btnReset,"click",function() {
			resetTimer(10);
		});
		observeEvent(timeLeft,"focus",function() {
			timeLeft.blur();
		});
	});

</script>
</head>
<body>
<form name="Timer" onsubmit="return false;">
	<label for="timeLeft">Timer:</label>
	<input type="text" id="timeLeft" name="timeLeft" 
		size="2" value="10"><br>
	<input type="button" name="btnStart" id="btnStart" value="Start">
	<input type="button" name="btnReset" id="btnReset" value="Reset"
		disabled="disabled">
</form>
</body>
</html>

Let's look at the code above in detail.

  1. As the page loads, two global variables are created: timer - to hold the timer, and timesUp - to flag if the timer has run out.
  2. The body of the page contains a form with a text field holding the number of seconds left, a "Start" button and a "Reset" button.
  3. When the page loads, we begin observing events on the btnStart and btnReset buttons.
  4. When the user clicks on the "Start" button, the decrementTimer() function is called. This function does the following:
    • Sets timesUp to false.
    • Disables the "Start" button.
    • Enables the "Reset" button.
    • Decrements the value of the timeLeft field by one.
    • Checks to see if the value of the timeLeft field is less than zero and calls resetTimer() if it is.
  5. The resetTimer() function is called when the user clicks on the "Reset" button or the timer runs out. This function does the following:
    • Sets the value of the timeLeft field to the number passed into the function.
    • Clears the timer interval.
    • Enables the "Start" button.
    • Disables the "Reset" button.
Next