The requirements are as follows:
1. Display the names of all the people in the class on the web page.
2. Click the start button and the color of the person begins to change. When it stops, there will be a position with different colors, and this position is the student who is clicked.
The rough 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 a unified color -green.
a. The student's name is stored in an array
b. Display it in div block on the page
2. Randomly select a position to change its color to -red
a. Use css style to control the color changes
b. Random positions are generated using random functions
3. In order to make it animated effect, set the interval time to move the position of its color change backwards. And restore the color of the previous position to green.
a. You need to design a method to change the color of the div. At the same time, you should call a method called interval time. Then there is settimeout and the setinterval method to choose from in js.
4. The animation effect should stop within the specified time, and the stop position is still red.
a. The animation effect stops within the specified time, which is actually stopping the above method. Use different methods in js, with different implementation forms
5. When it stops at a certain position, a dialog box pops up showing who is the selected student.
a. The final result of the Alert function pops up is OK
In the next section, this small application will be implemented in javascript code.