Specific analysis of the needs of a small application that implements random roll call in classes using JavaScript_javascript skills

The requirements are as follows:

1. Display the names of all members of the class on the web page.

2. Click the start button, and the color of the person starts to change. When it stops, there will be a position with a different color, then this position is the student who was clicked.

The approximate graphical interface is as follows:



The following is a specific analysis of the above requirements analysis as follows:

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

a. Store the names of classmates in an array

b. Use div blocks to display on the page

2. Randomly select a position and change its color to -red

a. Use css styles to control color changes

b. Use random functions to generate random positions

3. In order to give it an animation effect, set the interval time to The position of its color change moves backward. And restore the color of the previous position to green.

a. You need to design a method to change the color of the div, and at the same time, when moving backward, you should call a method called at an interval. Then there are settimeout and setinterval methods in js to choose from

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

a. The animation effect stops within the specified time, which actually means stopping the above method. Use different methods in js and have different implementation forms

5. After stopping at a certain position, a dialog box will pop up to show who is the selected student.

a.Alert function will pop up the final result and it will be ok

In the next section, this small application will be implemented with javascript code.