How much time has passed from one event to another?
There are lots of times when you want to know how much time has passed. One is in some kinds of animation, another is for programs that directly measure the elapsed time, like a stopwatch.
Javascript is able to measure time to within milliseconds (thousandths of a second). The usual process to measure a change in time is to:
-
Find a method to measure the current time.
The usual method is to trigger
new Date.getTime().
This returns the number of milliseconds since 12:00am 1. January 1970. - Start the timer by reading and storing the current time
- Stop the timer by reading and storing the current time
- Calculate the difference by substracting the start time from the stop time.
Start and stop a timer using object-oriented Javascript.
Number of milliseconds elapsed:
Source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Start and stop timers in object oriented code</title>
<script>
// clock
// clock properties:
// clock.startTime
// clock.endTime
// clock.elapsedTime
// clock.interval
//
// clock methods:
// clock.start()
// clock.stop()
// clock.getCurrentTime()
// clock.calculateElapsedTime()
// clock.display()
//
var clock = {
// startTime and endTime are measured in milliseconds since 1 Jan 1970
startTime: null, // time when timer started
endTime: null, // time when timer stopped
elapsedTime: null, // difference between start and stop
interval: null, // variable to hold interval timer
// MAIN: clock.start() starts the clock ticking...
start: function () {
// get the start time
this.startTime = this.getCurrentTime();
// set up a repeating interval that updates the time and displays it regularly
// copy the 'this' object so that the interval will work properly
var self = this;
// this.interval is a variable that contains the interval so that later on we can turn it off when clock.stop() is called
this.interval = window.setInterval(function () {
self.endTime = self.getCurrentTime();
self.calculateElapsedTime();
self.display();
}, 100);
},
// MAIN: clock.stop() cancels the ticker and displays the current time
stop: function () {
window.clearInterval( this.interval );
this.endTime = this.getCurrentTime();
this.calculateElapsedTime();
this.display();
},
// INPUT: gets the current time
getCurrentTime: function () {
// get the current number of milliseconds since 1 Jan 1970 and return it
return new Date().getTime();
},
// PROCESS: clock.update() calculates the time since the button was pressed
calculateElapsedTime: function () {
// the elasped time is the different between the end and start times
this.elapsedTime = this.endTime - this.startTime;
},
// OUTPUT: clock.display() displays the time elapsed since the clock was started
display: function () {
document.getElementById("outputID").innerHTML = this.elapsedTime;
}
}
</script>
<style>
</style>
</head>
<body>
<h2>
Start and stop a timer using object-oriented Javascript.
</h2>
<p>
<button onclick="clock.start();">
Press to trigger <code>clock.start()</code>
</button><br />
<button onclick="clock.stop();">
Press to trigger <code>clock.stop()</code>
</button><br />
<br />
Number of milliseconds elapsed:
<span id="outputID"></span>
</p>
</body>
</html>