Einfache Gewinnspiel-Applikation

Einführung

In diesem Projekt lernst du, wie du eine einfache Gewinnspiel-Applikation mit JavaScript und jQuery erstellst. Die Applikation simuliert ein Gewinnspiel, indem eine Liste von Preisen gedreht wird und der Gewinnerpreis angezeigt wird, wenn die Drehung stoppt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Projekt-Dateien und -Verzeichnisse einrichtest
• Wie du die rolling-Funktion implementierst, um die Gewinnpreisrotation zu behandeln und den Gewinnerpreis anzuzeigen
• Wie du das Projekt testest, um sicherzustellen, dass es wie erwartet funktioniert

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• JavaScript und jQuery zum Erstellen interaktiver Webanwendungen zu verwenden
• Eine einfache Animationsschleife mit requestAnimationFrame zu implementieren
• Benutzerinteraktionen zu behandeln und die Benutzeroberfläche entsprechend zu aktualisieren

Skills Graph

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -Struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
├── index.html
└── js
    ├── index.js
    └── jquery.js

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Die Rolling-Funktion implementieren

In diesem Schritt wirst du die rolling-Funktion in index.js mit jQuery oder JavaScript implementieren. Folge den Schritten unten, um diesen Schritt abzuschließen:

1. Finde die rolling-Funktion in index.js.

2. Verfeinere die rolling-Funktion, um die folgenden Anforderungen zu erfüllen:

   • Wenn du auf die Startschaltfläche klickst, ist das class-Element von li1 der Ausgangspunkt, und der gelbe Hintergrund (Klasse .active) wird auf dem Gewinn im Uhrzeigersinn gedreht.
   • Wenn die Drehung stoppt, wird die Gewinnhinweisung in der id als award-Element der Seite angezeigt. Die Gewinnhinweisung muss den Namen des Gewinns enthalten, der genau der gleiche wie der Name im Titel sein muss.
   • Die Drehintervalle und die Drehstoppbedingungen werden angegeben.

Definiere eine Variable num auf der gleichen Ebene wie die rolling-Funktion und setze den Standardwert auf -1. Setze num und den spezifischen Code innerhalb der rolling-Funktion wie folgt:

//...

// TODO: Bitte vervollständigen Sie diese Funktion
let num = -1; // Elementindex, an dem es sich nach der Rotation befindet

function rolling() {
  time++; // Umdrehungen um 1 erhöhen
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // Rekursive Animation ausführen
  }, speed);
  num++; // Index um 1 erhöhen
  if (num > 8) {
    // Wenn der Index über 7 liegt, wird er auf 0 zurückgesetzt, da es 8 Preise gibt
    num = 1;
  }
  // Füge der gewinnenden li die aktive Klasse hinzu
  $(".li" + num)
    .addClass("active")
    .siblings()
    .removeClass("active");
  // Wenn die Anzahl der Umdrehungen größer als die Gesamtzahl der Umdrehungen ist, wird die Rotation gestoppt und der Timer gelöscht
  if (time > times) {
    clearInterval(rollTime);
    console.log(num, "index");
    console.log($(".li" + num).text());
    // Zeige die Gewinninformationen an
    $("#award").text(
      `Congratulations on your prize-winning ${$(".li" + num).text()}!!!`
    );
    time = 0;
    num = -1;
    return;
  }
}

Testen des Projekts

In diesem Schritt wirst du das Projekt testen, um sicherzustellen, dass es wie erwartet funktioniert. Folge den Schritten unten, um diesen Schritt abzuschließen:

1. Speichere die Änderungen in der Datei js/index.js.
2. Aktualisiere die Seite in deinem Browser.
3. Klicke auf die Schaltfläche "Start", um das Gewinnspiel zu starten.
4. Beobachte die Drehung des Gewinns und die Anzeige der Gewinnhinweisung, wenn die Drehung stoppt.
5. Wiederhole Schritte 3-4 ein paar Mal, um sicherzustellen, dass das Projekt richtig funktioniert.

Das fertige Ergebnis ist wie folgt:

Herzlichen Glückwunsch! Du hast das Gewinnspiel-Projekt abgeschlossen. Wenn du Fragen hast oder Probleme stellst, zögere nicht, zu fragen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.