首頁 > 文章 > web前端 > 使用JavaScript開發網頁投票系統

使用JavaScript開發網頁投票系統

PHPz原創: 2023-08-09 13:30:371292瀏覽

摘要：
隨著網路的快速發展，網路上投票成為了一種方便且快速的方式，用於收集公眾的意見和做出決策。本文將介紹使用JavaScript開發一個簡單的網頁投票系統，實作了使用者可以選擇選項並提交投票的功能。

介紹:
網頁投票系統是一個在網頁上顯示多個選項並允許使用者選擇的程式。它可以用於許多場景，例如選舉投票、產品調查、意見收集等。本文使用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，並為每個選項都建立了一個radio input。
vote()函數是點擊投票按鈕時觸發的事件。它首先獲取使用者選擇的選項值，並找到對應的計數元素。
然後，透過parseInt()將計數值從字串轉換為整數，並將計數值加1。
最後，將更新後的計數值顯示在頁面中。

總結：
透過本文提供的程式碼範例，我們可以使用JavaScript開發一個簡單的網頁投票系統。用戶可以選擇選項並提交投票，系統會即時更新投票結果。這樣的系統可以在各種場景中使用，方便且有效率地進行意見收集和決策。透過進一步擴展和改進，我們也可以實現更複雜的投票功能。

以上是使用JavaScript開發網頁投票系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用JavaScript建立線上電子簽名工具下一篇：使用JavaScript建立線上電子簽名工具

看更多