Heim > Artikel > Web-Frontend > Entwicklung einer Web-Abstimmungsanwendung mit JavaScript
Entwicklung einer Web-Abstimmungsanwendung mit JavaScript
- WBOYOriginal
- 2023-08-10 09:33:101069Durchsuche
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>- 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;
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;
}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++;
}
}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);
}- 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>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!