Maison > Article > interface Web > Développer un système de vote Web en utilisant JavaScript
Développer un système de vote Web en utilisant JavaScript
- PHPzoriginal
- 2023-08-09 13:30:371294parcourir
Utiliser JavaScript pour développer un système de vote en ligne
Résumé :
Avec le développement rapide d'Internet, le vote en ligne est devenu un moyen pratique et rapide de recueillir l'opinion publique et de prendre des décisions. Cet article présentera l'utilisation de JavaScript pour développer un système de vote Web simple, qui permet aux utilisateurs de sélectionner des options et de soumettre des votes.
Introduction :
Le système de vote de page Web est un programme qui affiche plusieurs options sur une page Web et permet aux utilisateurs de choisir. Il peut être utilisé dans de nombreux scénarios, tels que le vote électoral, les enquêtes sur les produits, la collecte d'opinions, etc. Cet article utilise JavaScript pour développer un tel système et fournit des exemples de code.
Idée de design :
- Créez une page HTML contenant l'affichage des options et des boutons de vote.
- Utilisez JavaScript pour écrire du code logique afin d'implémenter les fonctions de sélection et de vote des utilisateurs.
- Créez une fonction pour chaque option qui répond à l'événement de clic et met à jour les résultats du vote une fois que l'utilisateur l'a sélectionnée.
- Afficher les résultats du vote sur la page.
Exemple de code :
Partie HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页投票系统</title>
</head>
<body>
<h1>请选择你的喜爱选项</h1>
<div id="options">
<div class="option">
<label><input type="radio" name="vote" value="option1">选项1</label>
</div>
<div class="option">
<label><input type="radio" name="vote" value="option2">选项2</label>
</div>
<div class="option">
<label><input type="radio" name="vote" value="option3">选项3</label>
</div>
<div class="option">
<label><input type="radio" name="vote" value="option4">选项4</label>
</div>
</div>
<button onclick="vote()">投票</button>
<h2>投票结果：</h2>
<div id="result">
<p>选项1: <span id="count1">0</span></p>
<p>选项2: <span id="count2">0</span></p>
<p>选项3: <span id="count3">0</span></p>
<p>选项4: <span id="count4">0</span></p>
</div>
<script src="vote.js"></script>
</body>
</html> Partie JavaScript (vote.js) :
function vote() {
var selectedOption = document.querySelector('input[name="vote"]:checked').value;
var countElement = document.getElementById("count" + selectedOption);
var count = parseInt(countElement.innerHTML);
countElement.innerHTML = count + 1;
}Explication :
- La partie HTML crée un div contenant les options et une radio pour chaque entrée d'option. La fonction
- vote() est un événement déclenché lorsque le bouton de vote est cliqué. Il obtient d'abord la valeur d'option sélectionnée par l'utilisateur et trouve l'élément de comptage correspondant.
- Ensuite, convertissez la valeur de comptage de chaîne en entier via parseInt() et ajoutez 1 à la valeur de comptage.
- Enfin, la valeur du comptage mise à jour est affichée sur la page.
Résumé :
Avec les exemples de code fournis dans cet article, nous pouvons développer un système de vote Web simple utilisant JavaScript. Les utilisateurs peuvent sélectionner des options et soumettre des votes, et le système mettra à jour les résultats du vote en temps réel. Un tel système peut être utilisé dans divers scénarios pour une collecte d’opinions et une prise de décision pratiques et efficaces. Avec d'autres extensions et améliorations, nous pouvons également implémenter des fonctions de vote plus complexes.
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!