JavaScript Clocks and Calendars, Part I, Basic JavaScript Clock
Here is the first of a series of articles to be released intermittently.
This article provides a JavaScript function to custom format a string of characters with the time embedded. It also shows you how to use the function for displaying a button clock on your web page.
Other articles will provide additional types of clocks, such as timers and timezones and alarms, and alternate display methods. Formatted date strings and calendars are also planned.
If you want to bypass the tutorial aspects of this article, you can download the source code immediately from the demonstration page at /a/14/pl.pl?jscc1
The Basic Code
There is one function in JavaScript that can be used to obtain the current date and time from the site visitor's operating system. And that is the function Date(). This is how it's used:
var mydatetime = new Date();
The above line creates a date object variable named "mydatetime" containing all the elements of the current date and time one could want. You can even print the content of the variable, a bit cryptic but readable:
document.write(mydatetime);
Pop these four lines into the BODY area of a web page to see it work:
<script type="text/javascript" language="JavaScript"><!--
var mydatetime = new Date();
document.write(mydatetime);
//--></script>
A Handy Time Display Formatting Function
Too large to embed in this article, the time display formatting function developed for this series of articles can be used for many different types of displays. It extracts the hour, minute, and second, and can handle both 12- and 24-hour time display formats. A copy of the function is in the source code linked from the demo page: /a/14/pl.pl?jscc1
The function is called FormatDateTimeString() and you can tell it exactly how you want your time display formatted. This is done by specifying a template for it to use. Here is an example time format template, the one used in the demonstration source code:
TimeFormat = "The current time is: H12:0M:0S AMPM";
FormatDateTimeString() formats your time display by making substitutions to the template. Anywhere it finds a placeholder, the placeholder is replaced with live information. All other characters in the template are left alone. Here are the placeholders it looks for:
Placeholder Is replaced with
=========== ================
H12 The hour (12-hour clock)
0H12 The hour, 12-hour clock, with a zero leading
single digits
H24 The hour (24-hour clock)
0H24 The hour, 24-hour clock, with a zero leading
single digits
M The minute.
0M The minute, with a zero leading single digits.
S The second.
0S The second, with a zero leading single digits.
AMPM "AM" if before noon, "PM" otherwise.
The "0" characters in the placeholders are zeros, not Ohs. Also, placeholders are case sensitive.
Although function FormatDateTimeString() is designed to format past and future times as well as the current time, only the current time is used in the demonstration. This is done with function GetAndRelayCurrentDateTime(), which gets the current time and sends it to FormatDateTimeString() for formatting.
With the FormatDateTimeString() and GetAndRelayCurrentDateTime() functions in place, there is very little else to write for the basic JavaScript clock this article demonstrates. (These two functions will also be used in other clocks created for this series of articles.)
Basic JavaScript Clock
This clock displays the time in a button. The time updates every second.
A special form is used, created entirely with JavaScript so non-JavaScript enabled browsers don't see an empty button. Custom function UpdateDateTime() consults the functions named above and updates the button.
You can see how it works on the demonstration page at /a/14/pl.pl?jscc1
Will Bontrager
©2002 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
