Application de tirage au sort simple

Introduction

Dans ce projet, vous allez apprendre à créer une simple application de tirage au sort en utilisant JavaScript et jQuery. L'application simulera un tirage au sort en faisant tourner une liste de prix et en affichant le prix gagnant lorsque la rotation s'arrête.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer les fichiers et les dossiers du projet
• Comment implémenter la fonction rolling pour gérer la rotation des prix et afficher le prix gagnant
• Comment tester le projet pour vous assurer qu'il fonctionne comme prévu

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser JavaScript et jQuery pour créer des applications web interactives
• Implémenter une simple boucle d'animation en utilisant requestAnimationFrame
• Gérer les interactions de l'utilisateur et mettre à jour l'interface utilisateur en conséquence

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

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

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour la voir.

Implémenter la fonction de rotation

Dans cette étape, vous allez implémenter la fonction rolling dans index.js à l'aide de jQuery ou de JavaScript. Suivez les étapes ci-dessous pour terminer cette étape :

1. Trouvez la fonction rolling dans index.js.
2. Ajustez la fonction rolling pour répondre aux exigences suivantes :
   • Lorsque vous cliquez sur le bouton de démarrage, l'élément class de li1 est le point de départ, et le fond jaune (classe .active) est tourné dans le sens des aiguilles d'une montre sur le prix.
   • Lorsque la rotation s'arrête, l'indication du prix est affichée dans l'id de l'élément award de la page. L'indication du prix doit contenir le nom du prix, qui doit être exactement le même que celui dans le titre.
   • Les conditions d'intervalle de rotation et d'arrêt de rotation sont données.

Définissez une variable num au même niveau que la fonction rolling et définissez sa valeur par défaut sur -1. Configurez num et le code spécifique à l'intérieur de la fonction rolling comme suit :

//...

// TODO: Veuillez compléter cette fonction
let num = -1; // Index de l'élément où il se trouve après la rotation

function rolling() {
  time++; // Nombre de tours augmenté de 1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // Effectuer une animation récursive
  }, speed);
  num++; // Index augmenté de 1
  if (num > 8) {
    // Si l'index est supérieur à 7, remettre à 0, car il y a 8 prix
    num = 1;
  }
  // Ajoutez la classe active à la li gagnante
  $(".li" + num)
    .addClass("active")
    .siblings()
    .removeClass("active");
  // Si le nombre de rotations est supérieur au nombre total de rotations, la rotation s'arrête et le minuteur est effacé
  if (time > times) {
    clearInterval(rollTime);
    console.log(num, "index");
    console.log($(".li" + num).text());
    // Affichez les informations de gain
    $("#award").text(
      `Félicitations pour votre gain de ${$(".li" + num).text()}!!!`
    );
    time = 0;
    num = -1;
    return;
  }
}

Tester le projet

Dans cette étape, vous allez tester le projet pour vous assurer qu'il fonctionne comme prévu. Suivez les étapes ci-dessous pour terminer cette étape :

1. Enregistrez les modifications dans le fichier js/index.js.
2. Raffraîchissez la page dans votre navigateur.
3. Cliquez sur le bouton "Démarrer" pour démarrer le tirage au sort.
4. Observez la rotation des prix et l'affichage de l'indication du prix lorsque la rotation s'arrête.
5. Répétez les étapes 3-4 quelques fois pour vous assurer que le projet fonctionne correctement.

Le résultat final est le suivant :

Félicitations ! Vous avez terminé le projet de tirage au sort. Si vous avez des questions ou rencontrez des problèmes, n'hésitez pas à demander.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.