Die Anforderungen lauten wie folgt:
1. Zeigen Sie die Namen aller Mitglieder der Klasse auf der Webseite an.
2. Klicken Sie auf die Startschaltfläche und die Farbe der Person beginnt sich zu ändern. Wenn sie stoppt, wird eine Position mit einer anderen Farbe angezeigt. Diese Position ist dann der Schüler, auf den geklickt wurde.
Die ungefähre grafische Oberfläche lautet wie folgt: 
Das Folgende ist eine spezifische Analyse der obigen Anforderungsanalyse wie folgt:
1 . Initialisieren Sie eine solche Seite und stellen Sie die einheitliche Farbe -grün ein.
a. Speichern Sie die Namen der Klassenkameraden in einem Array
b Verwenden Sie div-Blöcke zur Anzeige auf der Seite
2. Wählen Sie zufällig eine Position aus und ändern Sie ihre Farbe in -. rot
a. Verwenden Sie CSS-Stile, um Farbänderungen zu steuern
b Verwenden Sie Zufallsfunktionen, um zufällige Positionen zu generieren
3 Intervallzeit bis Die Position seines Farbwechsels verschiebt sich nach hinten. Und stellen Sie die Farbe der vorherigen Position auf Grün wieder her.
a. Sie müssen eine Methode entwerfen, um die Farbe des Div zu ändern. Gleichzeitig sollten Sie eine Methode aufrufen, die in einem Intervall aufgerufen wird. Dann gibt es in js die Methoden settimeout und setinterval zur Auswahl
4. Der Animationseffekt sollte innerhalb der angegebenen Zeit stoppen und die Stoppposition wird weiterhin rot sein.
a. Der Animationseffekt stoppt innerhalb der angegebenen Zeit, was tatsächlich bedeutet, dass die obige Methode gestoppt wird. Verwenden Sie verschiedene Methoden in js und verwenden Sie unterschiedliche Implementierungsformen
5. Nach dem Anhalten an einer bestimmten Position wird ein Dialogfeld angezeigt, in dem angezeigt wird, wer der ausgewählte Schüler ist.
Eine Alarmfunktion zeigt das Endergebnis an und es ist in Ordnung.
Im nächsten Abschnitt wird diese kleine Anwendung mit Javascript-Code implementiert.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
