[ FAQ ] [ Link to Me ] [ Mailing List ] [ Polariez Map ] [ About Me ] [ A-Wardz Zone ]

Clock Tutor Part 1
[ Home ] [ Upz ] [ Anime 'n Manga ] [ Anime Stuff ] [ Linkz Zone ] [ Updates ] [ Message Boardz ] [ Meteor Garden ] [ Kawaii Zone ] [ Guez' Book ] [ Neopets Zone ] [ Restricted Area ]

 

Clock Tutor Part 1
Clock Tutor Part 2
Clock Tutor Part 3

 

 

 

He u ever wanted the power of determining the current time or date to manipulate how it's displayed on your site?? Yes?? Well, today's ur lucky day. Objects of the Date() constructor do just that. Born from JavaScript 1.0, this constructor is used to create a Date object which holds many useful functions that we'll be utilizing shortly. Okay?? Ready?? Let's go!! ^_^

Part 1

First, let's open up a text editor, one of our favorite and most useful tools. We shall start by beginning the HTML page's header.

<HTML>
<HEAD>
<TITLE>Got the time?</TITLE>
</HEAD>

Now, let's create the body with da' white background 'n black text. We'll also add text to display above da' time.

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FONT FACE="Arial,Helvetica" SIZE="2">The current time:</FONT><BR>

Now for da' JavaScript. Remember, what I said 'bout creating a new Date object using the Date() constructor? That is what's taking place in this step. ^_^

<SCRIPT LANGUAGE="JavaScript">
<!-- //Comment out for older browsers.

//Set rightnow equal to a new Date object.
var rightnow = new Date();

Now that we have our Date object all ready ( hurray.. ^_^), let's make use of some of the many methods that come with it. Up to this point, you've probably been wondering why we're using the Date object when we're trying to obtain the current time, not the date. Let's list some of the methods we'll be using: getHours(), getMinutes(), and getSeconds(). Now you see why we need the Date object, eh? Not only can this wonderful object return the date, but it can also retrieve the time. Ready to move on? Good.. good.. ^_^.

To access an object's methods, we must use the dot operator(.) followed by the name of the method and any parameters necessary or desired. In this case, the methods we'll be using are, as listed above, getHours(), getMinutes(), and getSeconds() and our Date object is rightnow 

//Use the getHours() method to get the current hour.
var hr = rightnow.getHours();
//Use getMinutes() to get the minutes past the hour.
var min = rightnow.getMinutes();
//Use getSeconds() to get the seconds past the minute.
var sec = rightnow.getSeconds();

Great. We've got our variables set. We're ready to display the time, right? Oh, you wish. JavaScript works on a 24-hour clock. Now if you'd prefer a 24-hour clock, all's well and dandy, but for those who don't, we'll have to make some adjustments as well as determine AM or PM. Oh, and one other thing. For time digits less than 10, JavaScript does not add a zero to the tens place. That's something we shall fix, as well.

//If the hour is greater than or equal to 12, set
//AMPM equal to "PM." Set AMPM equal to "AM" otherwise.
var AMPM = (hr >= 12) ? "PM" : "AM";
//If the hour is greater than 12, set hr = to hr - 12
//to retrieve the current time for a 12-hour clock.
if (hr > 12) hr -= 12;
//If the hour equals zero, it's midnight, so set
//hr equal to twelve.
if (hr == 0) hr = 12;
//If the minutes or seconds are less than ten, add
//a zero in the tens place.
if (min < 10) min = "0" + min;
if (sec < 10) sec = "0" + sec;

Well, fellow scripter, r u with me so far? Hm... I guess now that we've set up our script to determine the time based on a 12-hour clock, u think we're ready to display it, eh? You're right. We are.

//Write the current time to the screen.
document.write("<FONT FACE=\"Arial,Helvetica\" COLOR=\"#0000FF\">" + hr + ":" + min + ":" + sec + " " + AMPM + "</FONT>");

That's it! Just end your script and HTML document, and you're done... for now.

//-->
</SCRIPT>
</BODY>
</HTML>

Click here to advance to part 2!!

 
Send me an e- mail to naruse_chan@hotmail.com or use feedback form (feel free to contact me) with questions or comments about my web site.
Copyright © 2001 [Stella Hermawan]. All rights reserved.
Last modified: October 14, 2001