Original "Duke Waving" | Original "Duke Waving II" | Original "Duke Waves at Random Position" | My variations
The original "Duke" codes, what they do and how they do it:
Using javascript, this page displays an animated loop of Duke waving.
This page calls the javascript function loopDuke when the page is loaded. The function specifies the source for the image displayed on the page and displays five different images in a loop to create an animation.
The function does this with three variables:
The function first increments the current value in the variable thisDuke, then checks to see if thisDuke equals the imgCount. If it does, then thisDuke is reset to 0. This creates the looping effect through the array.
The value in thisDuke is passed to the array variable dukeImages to determine the image name string. This string is then defined as the source for the current image displayed on the page.
As specified by the setTimeout object, the function will loop 300 times.
This page uses javascript to step through an array of items in sequence.
The "Previous" and "Next" links on this page each call a javascript function when the link is selected. The "Previous" link calls the function previousDuke and the "Next" link calls the function nextDuke. Each function specifies the source for the image displayed on the page. The functions share two variables, which are:
When previousDuke is called, the function makes sure that the current image is not already the first in the array (and therefore has no "previous" to go to) with the check thisDuke > 0. If thisDuke is greater than 0, then thisDuke is reduced by one. The new thisDuke value is passed to the dukeImages array and the corresponding image name string is defined as the source for the image to display on the page.
The nextDuke function operates in the same manner except that the initial check determines that the current image is not already the last in the array with thisDuke < 5. If thisDuke is less than 5, then it is increased by one and passed to the array to determine the image name string.
If the current image is the first in the array then nothing happens when the "Previous" link is selected and if it's the last in the array, nothing happens when the "Next" link is selected.
This page uses javascript to randomly display a single item from an array of 9 items.
When the page loads, it calls the javascript function waveDuke. The function first generates a random number between 0 and 1 with Math.random and multiplies the number by 10. This number is given to Math.floor which rounds it down to the nearest integer. The modulus operator (%) sets an upper limit of 8 on the integer, and 1 is added to it. We now have a randomly generated integer from 1 to 9.
This integer rndNbr is passed to the array dukeImages to determine the corresponding name string to define as the source of the image to display in the document.
My variations:
Original "Duke Waving" | Original "Duke Waving II" | Original "Duke Waves at Random Position" | My variations