Analysis on the demand for random class name-based small applications using JavaScript

The requirements are as follows:

1. The name of all class personnel is displayed on the webpage.

2. Click the start button. The color of the person starts to change. When the person stops, there will be a different color position, so this position is the person who is clicked.

The graphic interface is roughly as follows:



The following is a detailed analysis of the above requirements:

1. initialize such a page and set the uniform color-green.

A. Name of the student, stored in array

B. display it with a div block on the page

2. Randomly select a location to change its color to-red.

A. Use css to control color changes

B. Random locations are generated using random functions.

3. In order to make it animated, set the interval to move the positions with different colors backward. And the color of the previous position is restored to green.

A. You need to design a method to change the color of the div, and call a method called at an interval when moving backwards. The settimeout and setinterval methods are available in js.

4. The animation effect should be stopped within the specified time, and the stop position is still red.

A. Stop the animation effect within the specified time. Actually, stop the above method. Using different methods in js has different implementation forms

5. After stopping at a certain position, a dialog box is displayed, showing who is the selected student.

A. The final result displayed by the Alert function is OK.

In the next section, we will implement javascript code for this small application.