Développement d'une application de vote Web en utilisant JavaScript-js tutoriel-php.cn

Développement d'une application de vote Web en utilisant JavaScript

WBOY

Libérer： 2023-08-10 09:33:10

original

1124 Les gens l'ont consulté

Développement dune application de vote Web en utilisant JavaScript

Utiliser JavaScript pour développer des applications de vote en ligne

Avec le développement d'Internet, le vote en ligne est devenu un moyen courant de recueillir les opinions et les commentaires des utilisateurs. Afin de faciliter la participation des utilisateurs aux activités de vote, il est indispensable de développer une application de vote en ligne simple. Cet article expliquera comment utiliser JavaScript pour développer une application de vote en ligne et joindra des exemples de code correspondants.

Préparation

Tout d'abord, nous devons ajouter une zone de vote et quelques boutons d'option à la page Web, où les utilisateurs peuvent choisir leurs options préférées pour voter. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
  <title>网页投票应用</title>
</head>
<body>
  <h1>请选择你喜欢的颜色：</h1>
  <div>
    <input type="radio" name="vote" value="红色">红色<br>
    <input type="radio" name="vote" value="蓝色">蓝色<br>
    <input type="radio" name="vote" value="绿色">绿色<br>
    <input type="button" value="投票" onclick="vote()">
  </div>
</body>
</html>

Copier après la connexion

JavaScript implémente la fonction de vote

Ensuite, nous utilisons JavaScript pour écrire du code pour implémenter la fonction de vote. Tout d’abord, nous devons définir une variable globale pour stocker le nombre de votes pour chaque option. Le code est le suivant :

// 初始化得票数为0
var redVotes = 0;
var blueVotes = 0;
var greenVotes = 0;

Copier après la connexion

Ensuite, nous devons écrire une fonction pour gérer le comportement de vote de l'utilisateur. Cette fonction sera appelée lorsque l'utilisateur cliquera sur le bouton de vote. Tout d’abord, nous devons obtenir les options sélectionnées par l’utilisateur. Le code est le suivant :

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;
}

Copier après la connexion

Ensuite, nous devons augmenter le nombre de votes pour l'option correspondante en fonction du choix de l'utilisateur. Le code est le suivant :

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;

  if (selectedOption === "红色") {
    redVotes++;
  } else if (selectedOption === "蓝色") {
    blueVotes++;
  } else if (selectedOption === "绿色") {
    greenVotes++;
  }
}

Copier après la connexion

Enfin, nous pouvons afficher le nombre de votes pour chaque option sur la console pour référence. Le code est le suivant :

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;

  if (selectedOption === "红色") {
    redVotes++;
  } else if (selectedOption === "蓝色") {
    blueVotes++;
  } else if (selectedOption === "绿色") {
    greenVotes++;
  }

  console.log("红色得票数：" + redVotes);
  console.log("蓝色得票数：" + blueVotes);
  console.log("绿色得票数：" + greenVotes);
}

Copier après la connexion

Application complète de vote web

Enfin, nous intégrons les codes ci-dessus ensemble pour former une application complète de vote web. Les utilisateurs peuvent cliquer sur le bouton de vote pour sélectionner leur couleur préférée et afficher le nombre de votes pour chaque option sur la console. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
  <title>网页投票应用</title>
</head>
<body>
  <h1>请选择你喜欢的颜色：</h1>
  <div>
    <input type="radio" name="vote" value="红色">红色<br>
    <input type="radio" name="vote" value="蓝色">蓝色<br>
    <input type="radio" name="vote" value="绿色">绿色<br>
    <input type="button" value="投票" onclick="vote()">
  </div>

  <script>
    // 初始化得票数为0
    var redVotes = 0;
    var blueVotes = 0;
    var greenVotes = 0;

    function vote() {
      var selectedOption = document.querySelector('input[name="vote"]:checked').value;

      if (selectedOption === "红色") {
        redVotes++;
      } else if (selectedOption === "蓝色") {
        blueVotes++;
      } else if (selectedOption === "绿色") {
        greenVotes++;
      }

      console.log("红色得票数：" + redVotes);
      console.log("蓝色得票数：" + blueVotes);
      console.log("绿色得票数：" + greenVotes);
    }
  </script>
</body>
</html>

Copier après la connexion

Ce qui précède est la méthode et un exemple de code pour développer une application de vote Web à l'aide de JavaScript. En étudiant cet article, vous serez en mesure de comprendre comment ajouter des options de vote aux pages Web et utiliser JavaScript pour écrire la logique correspondante afin de gérer le comportement de vote des utilisateurs. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!