Usage
There is one required file: clock.js. Include it on your page with a link
like this:
<script type="text/javascript" src="clock.js"></script>
If you would like to use time zone codes, you will also need to include
timezones.js (an 11KB file) like this:
<script type="text/javascript" src="timezones.js"></script>
Before including the next script block, you should have all the HTML for your
page. You can use any HTML element that provides an innerText property,
or the HTML input (type="text") element. For each element that you want
to use as a clock, you should also make sure that it has a unique ID attribute,
like this:
<div id="PacStd">time will be shown here</div>
If you have any visual formatting that you want to apply to the clock, this
is the place to do it. For instance, to rewrite the previous line to display red
text instead, do this:
<div id="PacStd" style="color:red;">time will be shown here</div>
If you use the HTML input element, make sure that it is inside a FORM
element.
You will need another script block to create an instance of the TZClock
object, like this:
<script type="text/javascript">
var TZClockSample = new TZClock();
</script>
Next, you will need to attach HTML elements to your new TZClock
object, like this:
<script type="text/javascript">
TZClockSample.Attach("PacStd", "-08:00");
</script>
Note that you can combine SCRIPT blocks together. They are shown separately
here for clarity.
Finally, you need to start getting the clocks updated, like this:
<script type="text/javascript">
TZClockSample.Start(1);
</script>
This will begin updating the clocks as soon as the page is viewed in the
browser.
If you decide to attach the TZClock to a TD element of a table, make sure
that you don't try to Attach the TZClock to the TD element until after the
closing TABLE tag (</table>) of the TABLE element. See
Using Table Elements for more information.
|
