使用JavaScript開發網頁投票系統
摘要:
隨著網路的快速發展,網路上投票成為了一種方便且快速的方式,用於收集公眾的意見和做出決策。本文將介紹使用JavaScript開發一個簡單的網頁投票系統,實作了使用者可以選擇選項並提交投票的功能。
介紹:
網頁投票系統是一個在網頁上顯示多個選項並允許使用者選擇的程式。它可以用於許多場景,例如選舉投票、產品調查、意見收集等。本文使用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; }
解釋:
總結:
透過本文提供的程式碼範例,我們可以使用JavaScript開發一個簡單的網頁投票系統。用戶可以選擇選項並提交投票,系統會即時更新投票結果。這樣的系統可以在各種場景中使用,方便且有效率地進行意見收集和決策。透過進一步擴展和改進,我們也可以實現更複雜的投票功能。
以上是使用JavaScript開發網頁投票系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!