|
| | In the last two parts, Part 1 and Part 2, we've learned how to obtain the
time using the Date object and how to use setTimeout()
to repeat a function after a certain number of milliseconds. For this part, we
will be using that knowledge to display an image for each digit and have each
image change after sixty seconds(60,000 milliseconds) according to the new time.
Are you up to it? Come on. Don't back away now. It'll be fun. Really?? Yeah..
I'm sure!!^_^
Since this script is not a short one, it would be wise to place it in an
external .JS file. Open up your favorite text editor, and begin a new file.
We'll start by going back to what we know--beginning a function and getting the
time.
<!--
function TimeNow()
{
var rightnow = new Date();
var hr = rightnow.getHours();
var min = rightnow.getMinutes();
var AMPM = (hr >= 12) ? "PM" : "AM";
if (hr > 12) hr -= 12;
if (hr == 0) hr = 12;
if (min < 10) min = "0" + min;
Good..^_^. Now, let's try something new to this tutorial. We're going to work with
images. Now, now, don't start to whine, complain, or panic. Dynamically creating
Image objects and working with images in general is not difficult at all in
JavaScript. We must have a total of 14 images. The images of numbers used in
this example(0-9) will be 10 pixels by 10 pixels. The colon and blank images are
the same size as the number images, and the AM and PM images are 20 pixels wide
and 10 pixels in height. Easy?? huh??^_^
We are going to create 13 separate Image objects, and just like what we did
to create the Date object, we'll have to do with each Image object. We must set
each object variable equal to a new Image() constructor function.
var imgblank = new Image();
var img0 = new Image();
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var img6 = new Image();
var img7 = new Image();
var img8 = new Image();
var img9 = new Image();
var imgam = new Image();
var imgpm = new Image();
Notice that we don't set the colon image equal to a new Image()
constructor. This will be a static image, therefore, we need not worry about
changing it.
An array, imgChoose, will now be
created to hold each Image object at an array's index that matches their
numerical value. This means that imgChoose[0] will return img0,
imgChoose[1] will return img1, and so on.
var imgChoose = new Array(img0, img1, img2, img3,
img4, img5, img6, img7, img8, img9);
Now we are going to use the src
method of each Image object to set the source. Change the sources as needed.
imgblank.src = "images/blank.gif";
img0.src = "images/0.gif";
img1.src = "images/1.gif";
img2.src = "images/2.gif";
img3.src = "images/3.gif";
img4.src = "images/4.gif";
img5.src = "images/5.gif";
img6.src = "images/6.gif";
img7.src = "images/7.gif";
img8.src = "images/8.gif";
img9.src = "images/9.gif";
imgam.src = "images/am.gif";
imgpm.src = "images/pm.gif";
In order to separate the first digit from the second one for the hours and
minutes, we have to set new variables as String representations of hr
and min. With the String representations, we can make use of the substr
method, which returns characters at the specified location.
var strhr = hr.toString();
var strmin = min.toString();
Now we have to change the actual HTML IMG SRC's to the proper number. I have
named the two hour digit images hr1 and hr2. The two
minute digit images are named min1 and min2. The AM/PM
image is named ampm.
We can change their source by modifying document.imagename.src
. Let's start with the hour images. The first hour image is different than all
the rest, because if the hour is less than ten, a blank image must be displayed,
instead of a zero, in the tens place.
//If the hour is less than ten,
//set the first hour digit image to the blank image and
//the second hour digit image to the image representation of the number.
//If the hour is ten or greater, set the first and second hour
//digits to the image representation of each number.
if (hr < 10)
{
document.hr1.src = imgblank.src;
document.hr2.src = imgChoose[strhr].src;
}
else
{
document.hr1.src = imgChoose[strhr.substr(0,1)].src;
document.hr2.src = imgChoose[strhr.substr(1,1)].src;
}
Now the minute digit images...^_^
document.min1.src =
imgChoose[strmin.substr(0,1)].src;
document.min2.src = imgChoose[strmin.substr(1,1)].src;
Set the source of ampm to the
corresponding image.
document.ampm.src = (AMPM == "AM") ?
imgam.src : imgpm.src;
Set a Timeout to repeat the function in sixty seconds, then use the right
brace to end the function block.
setTimeout("TimeNow()", 60000);
}
Let's set some variables equal to the HTML for each time section.
//timehr is the first hour digit, the second hour
digit, and
//the colon.
var timehr = "<IMG NAME=\"hr1\" SRC=\"#\"
HEIGHT=\"10\" WIDTH=\"10\" BORDER=\"0\"><IMG
NAME=\"hr2\" SRC=\"blank.gif\" HEIGHT=\"10\"
WIDTH=\"10\" BORDER=\"0\"><IMG
NAME=\"colon1\" SRC=\"colon.gif\" HEIGHT=\"10\"
WIDTH=\"10\" BORDER=\"0\">";
//timemin is the first and second minute digits.
var timemin = "<IMG NAME=\"min1\" SRC=\"#\"
HEIGHT=\"10\" WIDTH=\"10\" BORDER=\"0\"><IMG
NAME=\"min2\" SRC=\"#\" HEIGHT=\"10\"
WIDTH=\"10\" BORDER=\"0\">";
//timeampm is the image for AM and PM.
var timeampm = "<IMG NAME=\"ampm\" SRC=\"#\"
HEIGHT=\"10\" WIDTH=\"20\" BORDER=\"0\">";
And now let's put them all together and display the final product.
document.write(timehr + timemin + timeampm);
Finally, we have to call the TimeNow();
function to start the time.
TimeNow();
//-->
Save this file with a .js extension. To add the code to an HTML document, use
the following source code, but change the source as needed.
<SCRIPT LANGUAGE="JavaScript" SRC="scripts/timeimages.js"></SCRIPT>
Did u understand?? Bout' them?? Hm... Of' coz' yes.. Really??
U don't understand?? Ask ur teacher then.. ^_^
Well, it finished!! Okay, go back !!
|
