JavaScriptを使用したWeb投票アプリケーションの開発-jsチュートリアル-php.cn

JavaScriptを使用したWeb投票アプリケーションの開発

WBOY

リリース： 2023-08-10 09:33:10

オリジナル

1133 人が閲覧しました

JavaScriptを使用したWeb投票アプリケーションの開発

JavaScript を使用した Web 投票アプリケーションの開発

インターネットの発展に伴い、オンライン投票はユーザーの意見やフィードバックを収集する一般的な方法になりました。ユーザーが投票活動に参加しやすくするには、シンプルな Web 投票アプリケーションを開発することが非常に必要です。この記事では、JavaScript を使用して Web 投票アプリケーションを開発する方法を紹介し、対応するコード例を添付します。

準備

まず、Web ページに投票エリアといくつかのオプションボタンを追加する必要があります。ユーザーはそこで、お気に入りのオプションを選択して投票できます。コードは次のとおりです。

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

ログイン後にコピー

完全な Web 投票アプリケーション

最後に、上記のコードを統合して、完全な Web 投票アプリケーションを形成します。ユーザーは投票ボタンをクリックして好みの色を選択し、各オプションの投票数をコンソールに表示できます。コードは次のとおりです。

<!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 を使用して Web 投票アプリケーションを開発する方法とサンプルコードです。この記事を学ぶことで、Web ページに投票オプションを追加し、JavaScript を使用してユーザーの投票行動を処理する対応するロジックを作成する方法を理解できるようになります。この記事がお役に立てば幸いです!

以上がJavaScriptを使用したWeb投票アプリケーションの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。