Los requisitos son los siguientes:
1. Muestre los nombres de todas las personas en la clase en la página web.
2. Haga clic en el botón Inicio y el color de la persona comienza a cambiar. Cuando se detenga, habrá una posición con diferentes colores, y esta posición es el estudiante al que se hace clic.
La interfaz gráfica rugosa es la siguiente:
El siguiente es un análisis específico del análisis de requisitos anteriores de la siguiente manera:
1. Inicialice dicha página y establezca un color unificado -Green.
a. El nombre del estudiante se almacena en una matriz
b. Mostrarlo en el bloque Div en la página
2. Seleccione aleatoriamente una posición para cambiar su color a -RED
a. Use el estilo CSS para controlar los cambios de color
b. Se generan posiciones aleatorias utilizando funciones aleatorias
3. Para que sea un efecto animado, establezca el tiempo de intervalo para mover la posición de su cambio de color hacia atrás. Y restaurar el color de la posición anterior al verde.
a. Debe diseñar un método para cambiar el color del div. Al mismo tiempo, debe llamar a un método llamado intervalo. Luego está SetTimeout y el método SetInterval para elegir en JS.
4. El efecto de animación debe detenerse dentro del tiempo especificado, y la posición de parada aún está roja.
a. El efecto de animación se detiene dentro del tiempo especificado, que en realidad está deteniendo el método anterior. Utilice diferentes métodos en JS, con diferentes formularios de implementación
5. Cuando se detiene en una posición determinada, aparece un cuadro de diálogo que muestra quién es el estudiante seleccionado.
a. Aparece el resultado final de la función de alerta está bien
En la siguiente sección, esta pequeña aplicación se implementará en el código JavaScript.