WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Chapter 55. Adding a Dateline and Timestamp

A dateline is a piece of text that gives the current date, and it usually appears at the top of a page. Similarly, a timestamp is a piece of text that gives the current time, and it often appears at the bottom of a page. Both are handy for creating a sense of freshness. Nothing pleases your audience more than visiting an utterly current, up-to-the-second-fresh site. Even if you update your content on a sporadic basis, the appearance of the current date or the current time helps to make your site feel fresher.

GEEKSPEAK

A dateline is a piece of text that gives the current date. A timestamp is a piece of text that gives the current time.

Datelines and timestamps can be yours with some straightforward JavaScript functions. See the Toolkits for complete information.

[View full width]

function doDateline() {
/* First, get the current date. JavaScript's Date object does
just that. This line of code gets the current date and puts it in
a variable called now. */
var now = new Date();
/* The following lines extract the day of the week, the month,
the calendar date, and the year from the now variable. These
values are all numerical. */
var day = now.getDay();
var month = now.getMonth();
var date = now.getDate();
var year = now.getYear();
/* Internet Explorer returns the correct year, while Netscape and
Opera are off by exactly 1900 years. The following if/then block
makes sure everyone's in the right century. */
if (year < 2000) {
year += 1900;
}
/* Initialize the dateline variable. This variable will
eventually contain the text of the dateline. */
var dateline = ";
/* Now build the text of the dateline. The day of the week
currently exists in numerical form, from 0 to 6 representing
Sunday through Saturday. The following if/then blocks add the
correct name of the day to the dateline variable depending on the
numerical value in the day variable.
Notice the comma and the trailing space after the name of the day
. You need the space so that the next item, the month, doesn't
appear squished up against the comma.
If you want a simple dateline, such as 12/22/2005, omit this
block of code. */
if (day == 0) {
dateline = "Sunday, ";
}
if (day == 1) {
dateline = "Monday, ";
}
if (day == 2) {
dateline = "Tuesday, ";
}
if (day == 3) {
dateline = "Wednesday, ";
}
if (day == 4) {
dateline = "Thursday, ";
}
if (day == 5) {
dateline = "Friday, ";
}
if (day == 6) {
dateline = "Saturday, ";
}
/* The month also exists in numerical form, with 0 for January, 1
for February, 2 for March, and so on, until you get to 11 for
December. These if/then blocks append the correct month name to
the dateline variable. Notice again the trailing space for proper
formatting.
If you want to use European style for your dateline, switch the
order of this block and the next block.
If you want a simple dateline, replace this block of code with
the following line:
dateline += (month + 1) + "/";
*/
if (month == 0) {
dateline += "January ";
}
if (month == 1) {
dateline += "February ";
}
if (month == 2) {
dateline += "March ";
}
if (month == 3) {
dateline += "April ";
}
if (month == 4) {
dateline += "May ";
}
if (month == 5) {
dateline += "June ";
}
if (month == 6) {
dateline += "July ";
}
if (month == 7) {
dateline += "August ";
}
if (month == 8) {
dateline += "September ";
}
if (month == 9) {
dateline += "October ";
}
if (month == 10) {
dateline += "November ";
}
if (month == 11) {
dateline += "December ";
}
/* The next line appends the numerical date to the dateline and
adds a comma character followed by a space.
For European formatting, switch this block with the preceding one
, delete the comma and space, and add the comma after the name of
each month in the preceding block of code.
If you want a simple dateline, replace this line with the following:
dateline += date + "/";
*/
dateline += date + ", ";
/* The next line appends the numerical year to the dateline. */
dateline += year;
/* Your dateline is ready for display. This line writes the
dateline to the page. */
document.write(dateline);
}

So much for the main script. Now, in the place where you want the dateline to appear on your page, add the following code:

<script language="JavaScript">doDateline();</script>

If you prefer, you may mark up this script tag as a paragraph, header, or any other type of text element:

<p><script language="JavaScript">doDateline();</script></p>

Put the main script together with the doDateline callout, and you get something that looks like Figure 55.1. The simple version looks like Figure 55.2.

TIP

The browser renders the dateline in the visitor's local time or whatever time the internal clock of the visitor's computer shows.

[View full width]

function doTimestamp() {
/* Like before, begin by getting the current date and putting it
in a variable called now. */
var now = new Date();
/* Mine the now variable for the hour, minutes, and seconds. */
var hour = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
/* Initialize the timestamp variable, which will hold the string
of text that the browser displays. */
var timestamp = ";
/* Set the time variable to A.M., with a preceding space for
formatting reasons. If you wish to display the timestamp in
24-hour format, as 16:12:25 instead of 4:12:25 P.M., delete this
line of code. */
var time = " A.M.";
/* JavaScript hours use the 24-hour format by default. The
following block of code checks if the hour variable is greater
than 12. If so, it subtracts 12 from the value and changes the
time to P.M., again with a preceding space for the proper formatting.
If you want to display 24-hour format, replace this block of code
with the following:
if (hour < 10) {
hour = "0" + hour;
}
This if/then block adds a zero to the left of the hour where
needed, so that the sixth hour displays as 06, not 6. */
if (hour > 12) {
hour -= 12;
time = " P.M.";
}
/* Similarly, these next if/then blocks format minutes and
seconds so that they display with zeroes to the left when needed. */
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
/* Now build up the timestamp string. */
timestamp = hour + ":" + minutes + ":" + seconds + time;
/* Write the timestamp into the page. */
document.write(timestamp);
}

Add the following code in the place where you want the timestamp to appear on your page:

<script language="JavaScript">doTimestamp();</script>

You probably want to juice it up with some extra formatting:

<p>
<em>This page generated at
<script language="JavaScript">doTimestamp();</script></em>
</p>
<hr noshade

See the results for yourself in Figure 55.3.

TIP

As with the dateline, this timestamp script generates times according to the internal clock of the visitor's computer.