JavaScript to achieve the class random call small application needs of the specific analysis
- 2020-03-30 02:54:27
- OfStack
The requirements are as follows:
1. The names of all the members of the class are displayed on the web page.
2. Click the start button, and the color of the staff will change. When it stops, there will be a different color position.
The general graphical interface is as follows:
< img SRC = "border = 0 / / img.jbzj.com/file_images/article/201405/201405121048041.gif? 2014412104852 ">
The following is the specific analysis of the above requirements analysis as follows:
1. Initialize such a page and set the uniform color -green.
A. Names of students, stored in an array
B. Display the page with a div block
2. Randomly select a location and change its color to -red
A. Color changes are controlled with CSS styles
B. Random positions are generated by random functions
3. In order to animate it, set the interval time to move the position of the color change backward. And I'm going to go back to the last position, and I'm going to go back to green.
A. It is necessary to design a method to make the color of div change, and to move backward at the same time, a method called at an interval should be called, so js has settimeout, setinterval method can be used
4. The animation effect should be stopped within the specified time. The stop position is still red.
A. The animation stops at the specified time, which in effect stops the above method. Js USES different methods and has different implementations
5. When stopped at a certain location, a dialog box pops up to show who is the selected student.
The a.lert function pops up and the final result is ok
In the next section, we'll implement the javascript code for this little application.
1. The names of all the members of the class are displayed on the web page.
2. Click the start button, and the color of the staff will change. When it stops, there will be a different color position.
The general graphical interface is as follows:
< img SRC = "border = 0 / / img.jbzj.com/file_images/article/201405/201405121048041.gif? 2014412104852 ">
The following is the specific analysis of the above requirements analysis as follows:
1. Initialize such a page and set the uniform color -green.
A. Names of students, stored in an array
B. Display the page with a div block
2. Randomly select a location and change its color to -red
A. Color changes are controlled with CSS styles
B. Random positions are generated by random functions
3. In order to animate it, set the interval time to move the position of the color change backward. And I'm going to go back to the last position, and I'm going to go back to green.
A. It is necessary to design a method to make the color of div change, and to move backward at the same time, a method called at an interval should be called, so js has settimeout, setinterval method can be used
4. The animation effect should be stopped within the specified time. The stop position is still red.
A. The animation stops at the specified time, which in effect stops the above method. Js USES different methods and has different implementations
5. When stopped at a certain location, a dialog box pops up to show who is the selected student.
The a.lert function pops up and the final result is ok
In the next section, we'll implement the javascript code for this little application.