A Javascript clock
I needed to get a real time clock (like this:
) onto a page I was working on recently. More, I needed two, to display local time and time elsewhere in the world. I could have taken a simplistic view, and simply coded the clocks independently, but I couldn't then port the solution to another site quickly and easily. Instead, I coded the clock as a Javascript object, and applied it twice. Encapsulating the clock code as an object allows it to be installed as many times as needed without having to worry about the complexity of multiple interval timers. Further, clock-specific properties, such as offset from UTC could be stored within the object allowing simpler code.
Here's my solution. Firstly, the Javascript.
// A simple Javascript clock object
// Copyright (c) littlevale.com, 2010
// You may use this code as is, or modify it to your needs
// provided this credit remains intact. If this is useful
// to you please let me know.
//create the clock.
function simpleclock(uid) {
this.uid=uid;
document.write("<span id=\""+uid+"\"></span>");
}
// Careful! This call to 'showclock()' needs special handling for 'this'
simpleclock.prototype.start = function() {
var tickInstance = this;
function stclock() {
tickInstance.show();
}
setInterval(stclock,1000);
};
// update the clock time.
simpleclock.prototype.show = function() {
var nowtime= new Date();
document.getElementById(this.uid).innerHTML = nowtime.toTimeString().substr(0,8);
};
Now a sample installation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript Clock Object @ Littlevale.com</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"></meta>
<script src="/simpleclock.js" type="text/javascript">
</head>
<body style="margin:0px; text-align:center;">
<script type="text/javascript"> wlg=new simpleclock("WLG");wlg.start(); </script >
</body>
How it works
The object is coded as a Javascript function, simpleclock(), with one parameter (uid) used to identify the element for ease of updating later. One method is provided to start the clock (simpleclock.start()) The object is created within the page by inserting a short piece of Javascript into the body of the document
<script>wlg=new simpleclock("wlg");wlg.start();</script>
The first statement creates the clock object, which in turn writes the <span> element into the document with the requested id. The new object is stored in the arbitrary variable wlg. Once created, the clock is started by a call to the start() method, which initialises the interval timer to call the internal show() method once a second. show() in turn updates the innerHTML of the clock element with the time portion of the current date and time.
this and setInterval
To ensure the right clock is updated, the object stores the passed parameter in a variable. In order to distinguish this object's variable from another clock it uses the Javascript self-referencing variable this. This is all well and good, but setInterval doesn't run within the object scope, so this doesn't point to the object. This may seem odd, and indeed, I'd say the behaviour is broken. It is by design, however: the ECMAScript standard on which Javascript is based specifically requires this behaviour. Fortunately, we can code around the problem.
The structure of the start() function is quite specific.
simpleclock.prototype.start = function() {
var tickInstance = this;
function stclock() {
tickInstance.show();
}
setInterval(stclock,1000);
};
setInterval is initialised to call stclock(), a function defined entirely within the show() method. The variable tickInstance is also defined entirely within the show() method, and is therefore within the correct scope. By referencing tickInstance we can use the correct scope, and therefore the correct value of this to update our clock.
Extensions to the clock
I have pared this clock implementation to the bare bones to illustrate the technique. Adding a parameter to calculate an offset time would be straightforward. The clock could be styled with appropriate CSS statements within the HTML, or the CSS could be coded separately, and reference by another parameter. Some of these things could be added by addition of appropriate methods allowing changes 'on the fly'.
Here's my solution. Firstly, the Javascript.
// A simple Javascript clock object
// Copyright (c) littlevale.com, 2010
// You may use this code as is, or modify it to your needs
// provided this credit remains intact. If this is useful
// to you please let me know.
//create the clock.
function simpleclock(uid) {
this.uid=uid;
document.write("<span id=\""+uid+"\"></span>");
}
// Careful! This call to 'showclock()' needs special handling for 'this'
simpleclock.prototype.start = function() {
var tickInstance = this;
function stclock() {
tickInstance.show();
}
setInterval(stclock,1000);
};
// update the clock time.
simpleclock.prototype.show = function() {
var nowtime= new Date();
document.getElementById(this.uid).innerHTML = nowtime.toTimeString().substr(0,8);
};
Now a sample installation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript Clock Object @ Littlevale.com</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"></meta>
<script src="/simpleclock.js" type="text/javascript">
</head>
<body style="margin:0px; text-align:center;">
<script type="text/javascript"> wlg=new simpleclock("WLG");wlg.start(); </script >
</body>
How it works
The object is coded as a Javascript function, simpleclock(), with one parameter (uid) used to identify the element for ease of updating later. One method is provided to start the clock (simpleclock.start()) The object is created within the page by inserting a short piece of Javascript into the body of the document
<script>wlg=new simpleclock("wlg");wlg.start();</script>
The first statement creates the clock object, which in turn writes the <span> element into the document with the requested id. The new object is stored in the arbitrary variable wlg. Once created, the clock is started by a call to the start() method, which initialises the interval timer to call the internal show() method once a second. show() in turn updates the innerHTML of the clock element with the time portion of the current date and time.
this and setInterval
To ensure the right clock is updated, the object stores the passed parameter in a variable. In order to distinguish this object's variable from another clock it uses the Javascript self-referencing variable this. This is all well and good, but setInterval doesn't run within the object scope, so this doesn't point to the object. This may seem odd, and indeed, I'd say the behaviour is broken. It is by design, however: the ECMAScript standard on which Javascript is based specifically requires this behaviour. Fortunately, we can code around the problem.
The structure of the start() function is quite specific.
simpleclock.prototype.start = function() {
var tickInstance = this;
function stclock() {
tickInstance.show();
}
setInterval(stclock,1000);
};
setInterval is initialised to call stclock(), a function defined entirely within the show() method. The variable tickInstance is also defined entirely within the show() method, and is therefore within the correct scope. By referencing tickInstance we can use the correct scope, and therefore the correct value of this to update our clock.
Extensions to the clock
I have pared this clock implementation to the bare bones to illustrate the technique. Adding a parameter to calculate an offset time would be straightforward. The clock could be styled with appropriate CSS statements within the HTML, or the CSS could be coded separately, and reference by another parameter. Some of these things could be added by addition of appropriate methods allowing changes 'on the fly'.
A better clock
Get the javascript code and sample HTML.
littlevale.com
6 john witton drive
crofton downs
wellington 6035
new zealand
t: +64 (0)4 974 8589
f: +64 (0)28 2550 4690
e:design@littlevale.com