CS553 Extra Credit - Build a Hexadecimal Sequence Counter Using DHTML

In this exercise, you will create a page that continuously displays the numbers zero through fifteen (in order)
The images will be seven-segment displays used to display HEXADECIMAL values (0₁₆) through (F₁₆)

The page will have three buttons:

• Begin Sequence

• Stop Sequence

• Reset Counter

The buttons will part of a FORM element

The buttons act in the following ways:

• The Begin Sequence button starts the counter

• The Stop Sequence button stops the counter

• The Reset Counter button resets the image to zero, but the counter keeps counting

• The counter will use these FUNCTIONS:

• setInterval(): sets the rate that animation will take place

• clearInterval(): stops the animation

• loadImages(): A user-created function containing a for-loop that will pre-load (cache) the images into an array named sequence

• runSequence(): A user-created function that starts the animation

• set2zero(): A user-created function that reacts to an onClick() event when the reset button is clicked, resetting the counter to zero, while not stopping the counter

• NOTE: The LoadImages() function IS NOT ASSOCIATED WITH AN ONCLICK EVENT...this will be an onLoad event

• NOTE: The setInterval() function IS ASSOCIATED with an onClick event on the click of the Start Sequence button. The function calls runSequence() as an argument to start the animation and also sets the rate of animation with a numeric argument

• NOTE: The clearInterval() function IS ASSOCIATED with an onClick event on a click of the Stop Sequence button

Final Thoughts

• For those of you that have forgotten, hexadecimal is a numbering system constantly encountered in computer science and computer engineering

• The hexadecimal numbering system uses sixteen values, zero through the letter F

• For your pleasure, the seven-segment images can be found here and are in a winzip file called sevenseg.zip

• Since the counter will run continuously (until the STOP button is pressed), set a timer so that the images change every SECOND

• Unless you plan to use your own images, MAKE SURE that the background of your page is WHITE, as the background of the images is white

• Also, as a design consideration, CENTER ALL ELEMENTS that appear on the page

Here's a screen dump of the starting state of the counter