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

请选择你喜欢的颜色：

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 10, 2023 am 09:33 AM

javascript ウェブページ投票する

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

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

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

準備

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

<!DOCTYPE html>
<html>
<head>
  <title>网页投票应用</title>
</head>
<body>
  <h1 id="请选择你喜欢的颜色">请选择你喜欢的颜色：</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 id="请选择你喜欢的颜色">请选择你喜欢的颜色：</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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7559

CakePHP チュートリアル

1384

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

EdgeブラウザのショートカットとしてWebページをデスクトップに送信するにはどうすればよいですか? Mar 14, 2024 pm 05:22 PM

Edge ブラウザのショートカットとして Web ページをデスクトップに送信するにはどうすればよいですか?多くのユーザーは、アクセスページを直接開くことができるように、頻繁に使用する Web ページをデスクトップにショートカットとして表示したいと考えていますが、その方法がわかりません。この問題に応えて、この号の編集者は大多数のユーザーが解決策を考えているので、今日のソフトウェアチュートリアルで共有されているコンテンツを見てみましょう。 Edge ブラウザで Web ページをデスクトップに送信するショートカット方法: 1. ソフトウェアを開き、ページ上の「...」ボタンをクリックします。 2. ドロップダウンメニューオプションから [アプリケーション] で [このサイトをアプリケーションとしてインストールする] を選択します。 3. 最後に、ポップアップウィンドウでそれをクリックします

WeChat投票を開始する方法 Feb 23, 2024 pm 12:20 PM

WeChat 投票を開始するにはどうすればよいですか? WeChat で投票機能を開始できますが、ほとんどのユーザーは WeChat で投票機能を開始する方法を知りません。次は、エディターが提供する WeChat 投票を開始する方法に関するグラフィックチュートリアルです。興味のあるユーザーは急いでください。ぜひ見に来てください！ WeChat 使い方チュートリアル WeChat 投票の開始方法 1. まず WeChat アプリを開き、メインページの上部にある検索ボックスをクリックして [投票] と入力し、[グループ投票] をクリックします (以下に示す); 2. 次に、グループ投票を入力します。アプレットページに移動し、[+ 投票] サービスボタンをクリックします; 3. 最後に、グループ投票作成ページのコンテンツを編集して投票を開始します。

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

Web ページ上の画像を読み込めない場合はどうすればよいですか? 6つのソリューション Mar 15, 2024 am 10:30 AM

一部のネチズンは、ブラウザの Web ページを開いたときに、Web ページ上の画像が長時間読み込めないことに気づきました。何が起こったのでしょうか?ネットワークは正常であることを確認しましたが、どこに問題があるのでしょうか?以下のエディタでは、Web ページの画像が読み込めない問題に対する 6 つの解決策を紹介します。 Web ページの画像を読み込めない: 1. インターネット速度の問題 Web ページに画像が表示されません。これは、コンピュータのインターネット速度が比較的遅く、コンピュータ上で開いているソフトウェアが多いためと考えられます。また、アクセスする画像が比較的大きいため、読み込みタイムアウトが原因である可能性があります。その結果、画像が表示されません。ネットワーク速度をより多く消費するソフトウェアをオフにすることができます。タスクマネージャーに移動して確認できます。 2. 訪問者が多すぎる Web ページに写真が表示されない場合は、訪問した Web ページが同時に訪問されたことが原因である可能性があります。

ネットワーク接続は正常であるにもかかわらず、ブラウザが Web ページにアクセスできない場合の考えられる理由 Feb 19, 2024 pm 03:45 PM

ブラウザは Web ページを開けませんが、ネットワークは正常です。多くの理由が考えられます。この問題が発生した場合は、段階的に調査して具体的な原因を特定し、問題を解決する必要があります。まず、Web ページを開けないのは特定のブラウザに限定されているのか、それともすべてのブラウザで Web ページを開けないのかを判断します。 1 つのブラウザだけで Web ページを開けない場合は、テストのために Google Chrome、Firefox などの他のブラウザを使用してみることができます。他のブラウザでページを正しく開くことができる場合、問題はその特定のブラウザにある可能性があります。

Webページが開けない場合の対処法 Feb 21, 2024 am 10:24 AM

Web ページが開かない問題を解決する方法インターネットの急速な発展に伴い、人々は情報を取得し、通信し、娯楽するためにますますインターネットに依存するようになりました。しかし、時々Webページが開けないという問題に遭遇し、多くのトラブルを引き起こします。この記事では、Web ページが開かない問題を解決するための一般的な方法をいくつか紹介します。まず、Web ページを開けない理由を特定する必要があります。考えられる原因には、ネットワークの問題、サーバーの問題、ブラウザの設定の問題などが含まれます。以下にいくつかの解決策を示します: ネットワーク接続を確認します: まず、

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebページでPHPを開く方法 Mar 22, 2024 pm 03:20 PM

Web ページで PHP コードを実行するには、Web サーバーが PHP をサポートし、適切に構成されていることを確認する必要があります。 PHP は 3 つの方法で開くことができます。 * **サーバー環境:** PHP ファイルをサーバーのルートディレクトリに配置し、ブラウザを通じてアクセスします。 * **統合開発環境: **PHP ファイルを指定した Web ルートディレクトリに配置し、ブラウザを通じてアクセスします。 * **リモートサーバー:** サーバーによって提供される URL アドレスを介して、リモートサーバー上でホストされている PHP ファイルにアクセスします。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック