首頁 >web前端 >js教程 >使用JavaScript開發網頁投票應用

使用JavaScript開發網頁投票應用

WBOY原創: 2023-08-10 09:33:101169瀏覽

使用JavaScript開發網頁投票應用程式

隨著網路的發展，網路投票已經成為一種常見的方式來收集使用者的意見和回饋。為了方便使用者參與投票活動，開發一個簡單的網頁投票應用程式是非常必要的。本文將介紹如何使用JavaScript開發一個網頁投票應用，並附上對應的程式碼範例。

準備工作

首先，我們需要在網頁中新增一個投票區域和一些選項按鈕，使用者可以在這裡選擇自己喜歡的選項進行投票。程式碼如下：

<!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實作投票功能

接下來，我們使用JavaScript編寫程式碼來實作投票功能。首先，我們需要定義一個全域變數來儲存每個選項的得票數。程式碼如下：

// 初始化得票数为0
var redVotes = 0;
var blueVotes = 0;
var greenVotes = 0;

然後，我們需要寫一個函數來處理使用者的投票行為。當使用者點擊投票按鈕時，該函數將被呼叫。首先，我們需要取得使用者選擇的選項。代碼如下：

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;
}

接下來，我們需要根據使用者的選擇來增加對應選項的得票數。程式碼如下：

function vote() {
  var selectedOption = document.querySelector('input[name="vote"]:checked').value;

  if (selectedOption === "红色") {
    redVotes++;
  } else if (selectedOption === "蓝色") {
    blueVotes++;
  } else if (selectedOption === "绿色") {
    greenVotes++;
  }
}

最後，我們可以在控制台輸出每個選項的得票數，以供參考。程式碼如下：

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);
}

完整的網頁投票應用程式

最後，我們將上述程式碼整合在一起，形成一個完整的網頁投票應用程式。使用者可以點擊投票按鈕選擇自己喜歡的顏色，並在控制台查看每個選項的得票數。程式碼如下：

<!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>

以上就是使用JavaScript開發網頁投票應用的方法和範例程式碼。透過學習本文，您將能夠了解如何在網頁中新增投票選項，並使用JavaScript編寫相應的邏輯來處理使用者的投票行為。希望本文對您有幫助！

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

JavaScript 全局变量

陳述：

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

上一篇：使用JavaScript開發網頁遊戲排行榜下一篇：使用JavaScript開發網頁遊戲排行榜

看更多