Die Anforderungen sind wie folgt:
1. Zeigen Sie die Namen aller Personen in der Klasse auf der Webseite an.
2. Klicken Sie auf die Schaltfläche Start und die Farbe der Person beginnt sich zu ändern. Wenn es stoppt, gibt es eine Position mit unterschiedlichen Farben, und diese Position ist der Schüler, der angeklickt wird.
Die grobe grafische Schnittstelle lautet wie folgt:
Das Folgende ist eine spezifische Analyse der oben genannten Anforderungen wie folgt:
1. Initialisieren Sie eine solche Seite und legen Sie ein einheitliches Farbgrün ein.
A. Der Name des Schülers wird in einem Array gespeichert
B. Zeigen Sie es im Div -Block auf der Seite an
2. Wählen Sie zufällig eine Position aus, um ihre Farbe auf -red zu ändern
A. Verwenden Sie den CSS -Stil, um die Farbänderungen zu steuern
B. Zufällige Positionen werden mit zufälligen Funktionen generiert
3. Um es animierter Effekt zu erzielen, setzen Sie die Intervallzeit, um die Position seiner Farbänderung rückwärts zu verschieben. Und stellen Sie die Farbe der vorherigen Position auf Grün wieder her.
A. Sie müssen eine Methode entwerfen, um die Farbe der Div zu ändern. Gleichzeitig sollten Sie eine Methode namens Intervallzeit aufrufen. Dann gibt es SetTimeOut und die SetInterval -Methode zur Auswahl in JS.
4. Der Animationseffekt sollte innerhalb der angegebenen Zeit stoppen, und die Stoppposition ist immer noch rot.
A. Der Animationseffekt stoppt innerhalb der angegebenen Zeit, die tatsächlich die obige Methode stoppt. Verwenden Sie verschiedene Methoden in JS mit unterschiedlichen Implementierungsformen
5. Wenn es an einer bestimmten Position stehen bleibt, wird ein Dialogfeld angezeigt, das zeigt, wer der ausgewählte Schüler ist.
A. Das Endergebnis der Warnfunktion ist in Ordnung
Im nächsten Abschnitt wird diese kleine Anwendung im JavaScript -Code implementiert.