Entwicklung einer Web-Abstimmungsanwendung mit JavaScript-js-Tutorial-php.cn

Entwicklung einer Web-Abstimmungsanwendung mit JavaScript

WBOY

Freigeben： 2023-08-10 09:33:10

Original

1146 Leute haben es durchsucht

Entwicklung einer Web-Abstimmungsanwendung mit JavaScript

Verwendung von JavaScript zur Entwicklung von Web-Abstimmungsanwendungen

Mit der Entwicklung des Internets ist Online-Abstimmung zu einer gängigen Methode geworden, um Benutzermeinungen und Feedback zu sammeln. Um Benutzern die Teilnahme an Abstimmungsaktivitäten zu erleichtern, ist es unbedingt erforderlich, eine einfache Web-Abstimmungsanwendung zu entwickeln. In diesem Artikel wird die Verwendung von JavaScript zum Entwickeln einer Web-Voting-Anwendung vorgestellt und entsprechende Codebeispiele angehängt.

Vorbereitung

Zuerst müssen wir der Webseite einen Abstimmungsbereich und einige Optionsschaltflächen hinzufügen, über die Benutzer ihre bevorzugten Optionen zum Abstimmen auswählen können. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

JavaScript implementiert die Abstimmungsfunktion

Als nächstes schreiben wir mit JavaScript Code zur Implementierung der Abstimmungsfunktion. Zuerst müssen wir eine globale Variable definieren, um die Anzahl der Stimmen für jede Option zu speichern. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Dann müssen wir eine Funktion schreiben, um das Abstimmungsverhalten des Benutzers zu verarbeiten. Diese Funktion wird aufgerufen, wenn der Benutzer auf die Abstimmungsschaltfläche klickt. Zuerst müssen wir die vom Benutzer ausgewählten Optionen abrufen. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Als nächstes müssen wir die Anzahl der Stimmen für die entsprechende Option basierend auf der Wahl des Benutzers erhöhen. Der Code lautet wie folgt:

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

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

Nach dem Login kopieren

Schließlich können wir die Anzahl der Stimmen für jede Option als Referenz auf der Konsole ausgeben. Der Code lautet wie folgt:

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);
}

Nach dem Login kopieren

Komplette Web-Voting-Anwendung

Abschließend integrieren wir die oben genannten Codes zu einer vollständigen Web-Voting-Anwendung. Benutzer können auf die Schaltfläche „Abstimmung“ klicken, um ihre Lieblingsfarbe auszuwählen und die Anzahl der Stimmen für jede Option auf der Konsole anzuzeigen. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Das Obige ist die Methode und der Beispielcode für die Entwicklung einer Web-Voting-Anwendung mit JavaScript. Durch das Studium dieses Artikels werden Sie in der Lage sein, zu verstehen, wie Sie Abstimmungsoptionen zu Webseiten hinzufügen und mit JavaScript entsprechende Logik schreiben, um das Abstimmungsverhalten der Benutzer zu verwalten. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonEntwicklung einer Web-Abstimmungsanwendung mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!