ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptを使用したWeb投票システムの開発
JavaScriptを使用したWeb投票システムの開発
- PHPzオリジナル
- 2023-08-09 13:30:371370ブラウズ
JavaScript を使用した Web 投票システムの開発
要約:
インターネットの急速な発展に伴い、オンライン投票は便利で迅速な収集方法になりました。国民の意見と意思決定。この記事では、JavaScript を使用して、ユーザーがオプションを選択して投票を送信できるシンプルな Web 投票システムを開発する方法を紹介します。
はじめに:
Web 投票システムは、Web ページ上に複数の選択肢を表示し、ユーザーが選択できるようにするプログラムです。選挙投票や商品アンケート、意見収集などさまざまなシーンでご利用いただけます。この記事では、JavaScript を使用してそのようなシステムを開発し、コード例を示します。
デザインアイデア:
- オプションと投票ボタンの表示を含む HTML ページを作成します。
- JavaScript を使用してロジック コードを記述し、ユーザー選択機能と投票機能を実装します。
- クリック イベントに応答し、ユーザーが選択した後に投票結果を更新する関数をオプションごとに作成します。
- 投票結果をページに表示します。
コード例:
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>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;
}説明:
- HTML セクションは、オプションと各オプションのラジオ入力を含む div を作成します。
- vote() 関数は、投票ボタンがクリックされたときにトリガーされるイベントです。まず、ユーザーが選択したオプション値を取得し、対応する count 要素を見つけます。
- 次に、parseInt() を使用してカウント値を文字列から整数に変換し、カウント値に 1 を加算します。
- 最後に、更新されたカウント値がページに表示されます。
概要:
この記事で提供されているコード例を通じて、JavaScript を使用して単純な Web 投票システムを開発できます。ユーザーはオプションを選択して投票を送信でき、システムは投票結果をリアルタイムで更新します。このようなシステムは、便利かつ効率的な意見収集と意思決定のために、さまざまなシナリオで使用できます。さらなる拡張と改善により、より複雑な投票機能を実装することもできます。
以上がJavaScriptを使用したWeb投票システムの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。