Developer

Stupid Web Tricks: Add the current date and time to your Web site

Give your site the appearance of timeliness by adding the current date and time. Learn how.

Click here for our complete list of Stupid Web Tricks.

One of the great powers of the Web is the ability it gives each of us to share information with the entire world. And what information could be more useful than the current date and time? This is the kind of information that, once available online, promises to change the way we work and think. Or, at the very least, it may give the appearance of timeliness to your site's content. Best of all, it's easy to add this information to your site.

Step One
Paste the following JavaScript code into the <HEAD> of your Web page:

<SCRIPT language="javascript">

<!— hide javascript

function StartClock12() {
   Time12 = new Date();
   Cur12Hour = Time12.getHours();
   Cur12Mins = Time12.getMinutes();
   Cur12Secs = Time12.getSeconds();
   The12Time = (Cur12Hour > 12) ? Cur12Hour - 12 : Cur12Hour;
   The12Time += ((Cur12Mins < 10) ? ':0' : ':') + Cur12Mins;
   The12Time += ((Cur12Secs < 10) ? ':0' : ':') + Cur12Secs;
   The12Time += (Cur12Hour > 12) ? ' PM': ' AM';
   document.CForm.Clock12.value = The12Time;
   window.status = The12Time;
   setTimeout('StartClock12()',1000);
   }

function StartDate() {
   TDay = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
   TMonth = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
   TDate = new Date();
   CurYear = TDate.getYear();
   CurMonth = TDate.getMonth();
   CurDayOw = TDate.getDay();
   CurDay= TDate.getDate();
   TheDate = TDay[CurDayOw] + ', ';
   TheDate += TMonth[CurMonth] + ' ';
   TheDate += CurDay + ', ';
   TheDate += ((CurYear%1900)+1900);
   document.CForm.CDate.value = TheDate;
   }

// done hiding —>

</SCRIPT>

Step Two
Add the onLoad event handler to the page's <BODY> tag:

<BODY onLoad="StartClock12();StartDate()";>

Step Three
Then paste the code below into the <BODY> section (add layout and decoration as you see fit):

<FORM name="CForm">
<INPUT type="text" name="Clock12" size="12">
<INPUT type="text" name="CDate" size="29">
</FORM>

That's it. You've built a virtual Big Ben.

Note: This script was adapted from a script at The JavaScript Source.

Editor's Picks