Maison > Article > interface Web > Développement d'une application de vote Web en utilisant JavaScript
Développement d'une application de vote Web en utilisant JavaScript
- WBOYoriginal
- 2023-08-10 09:33:101120parcourir
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>- 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;
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;
}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++;
}
}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);
}- 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>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!