Read everything before doing anything.
Using this page as your starting point, add JavaScript code to make the time of day appear on the screen in 24-hour notation, as shown in the screenshot below.
The digits are not large text; they are images.
You may get all the image files that you need
from this .ZIP file, which
expands into a directory called numbers,
which contains images with names n0.png (the picture of
the zero), n1.png (the picture of the one), etc.
The image colon.png shows the colon in the time, and
blank_digit.png is a blank area (for the initial HTML file).
Here’s where timers come in: every second, the colon in the middle of the time
should be replaced with the gray_colon.png image. This will make the
colon appear to "pulse" every second. Here’s what it looks like:
Of course, you must also change the clock to reflect the new time whenever a new minute begins.
Do not grab the time once when the page loads, and then keep adding the seconds and updating the hours and minutes yourself! Let’s say you enter the page at 10:15 and 58 seconds. A naïve approach would be to display 10:15 and start a counter at zero. This would be wrong, because in two seconds it will be 10:16, and your counter will think that only two seconds of the first minute have elapsed, and you will continue to (incorrectly) display 10:15.
A slightly more sophisticated approach is to keep track of the seconds yourself, and handle the roll-over for the seconds to minutes and minutes to hours. This involves a lot of computation that you really don’t want to do. (Do you honestly want to handle the problem of someone entering at 23:59 and 48 seconds and rolling over to the next day?)
Instead, you should create a new Date( ) object every time you
display the clock and grab the current hours and minutes from it, and let the system
do most of the work for you. By the way, this is also more accurate than keeping
track yourself. If another task were to take up a lot of processing time, and
“stall” the system for five or six seconds, your count would be off;
the system clock would not.
Should 9:35 in the morning be displayed as 9:35 or 09:35? I don’t care. Do whichever one pleases you most.
If you really don’t like 24-hour notation and would rather display 9:35 in the
morning as 9:35 am, we have included am.png, pm.png, and blank_ampm.png in
the numbers directory. Each of these images is 40 pixels tall and 80 pixels
wide. You will have to make some changes to the HTML to use them, of course.
Name your file in the form lastname_firstname_timer.html and send it to the instructor.