Rumah >hujung hadapan web >tutorial js >Membangunkan aplikasi pengundian web menggunakan JavaScript

Membangunkan aplikasi pengundian web menggunakan JavaScript

WBOYasal: 2023-08-10 09:33:101168semak imbas

Menggunakan JavaScript untuk membangunkan aplikasi pengundian web

Dengan perkembangan Internet, pengundian dalam talian telah menjadi cara biasa untuk mengumpul pendapat dan maklum balas pengguna. Bagi memudahkan pengguna menyertai aktiviti mengundi, amat perlu dibangunkan aplikasi undian web yang mudah. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk membangunkan aplikasi pengundian web dan melampirkan contoh kod yang sepadan.

Persediaan

Pertama, kita perlu menambah kawasan mengundi dan beberapa butang pilihan pada halaman web, di mana pengguna boleh memilih pilihan kegemaran mereka untuk mengundi. Kod tersebut adalah seperti berikut:

<!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 melaksanakan fungsi undian

Seterusnya, kami menggunakan JavaScript untuk menulis kod untuk melaksanakan fungsi undian. Pertama, kita perlu menentukan pembolehubah global untuk menyimpan bilangan undian bagi setiap pilihan. Kodnya adalah seperti berikut:

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

Kemudian, kita perlu menulis fungsi untuk mengendalikan tingkah laku pengundian pengguna. Fungsi ini akan dipanggil apabila pengguna mengklik pada butang undian. Pertama, kita perlu mendapatkan pilihan yang dipilih oleh pengguna. Kodnya adalah seperti berikut:

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

Seterusnya, kita perlu menambah bilangan undian untuk pilihan yang sepadan berdasarkan pilihan pengguna. Kodnya adalah seperti berikut:

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

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

Akhir sekali, kami boleh mengeluarkan bilangan undian untuk setiap pilihan pada konsol untuk rujukan. Kodnya adalah seperti berikut:

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

Aplikasi undian web lengkap

Akhir sekali, kami menyepadukan kod di atas bersama-sama untuk membentuk aplikasi undian web yang lengkap. Pengguna boleh mengklik butang mengundi untuk memilih warna kegemaran mereka dan melihat bilangan undian untuk setiap pilihan pada konsol. Kodnya adalah seperti berikut:

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

Di atas adalah kaedah dan contoh kod untuk membangunkan aplikasi undian web menggunakan JavaScript. Dengan mengkaji artikel ini, anda akan dapat memahami cara menambah pilihan mengundi pada halaman web dan menggunakan JavaScript untuk menulis logik yang sepadan untuk mengendalikan tingkah laku pengundian pengguna. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Membangunkan aplikasi pengundian web menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 全局变量

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Menggunakan JavaScript untuk membangunkan kedudukan permainan webArtikel seterusnya：Menggunakan JavaScript untuk membangunkan kedudukan permainan web

Artikel berkaitan

Lihat lagi