Rumah > Artikel > hujung hadapan web > Membangunkan sistem pengundian web menggunakan JavaScript
Membangunkan sistem pengundian web menggunakan JavaScript
- PHPzasal
- 2023-08-09 13:30:371294semak imbas
Menggunakan JavaScript untuk membangunkan sistem pengundian web
Abstrak:
Dengan perkembangan pesat Internet, pengundian dalam talian telah menjadi cara yang mudah dan pantas untuk mengumpul pendapat umum dan membuat keputusan. Artikel ini akan memperkenalkan penggunaan JavaScript untuk membangunkan sistem pengundian web yang mudah, yang membolehkan pengguna memilih pilihan dan menyerahkan undian.
Pengenalan:
Sistem pengundian halaman web ialah program yang memaparkan berbilang pilihan pada halaman web dan membolehkan pengguna memilih. Ia boleh digunakan dalam banyak senario, seperti pengundian pilihan raya, tinjauan produk, pengumpulan pendapat, dsb. Artikel ini menggunakan JavaScript untuk membangunkan sistem sedemikian dan menyediakan contoh kod.
Idea reka bentuk:
- Buat halaman HTML yang mengandungi paparan pilihan dan butang undi.
- Gunakan JavaScript untuk menulis kod logik untuk melaksanakan fungsi pemilihan dan pengundian pengguna.
- Buat fungsi untuk setiap pilihan yang bertindak balas kepada acara klik dan mengemas kini keputusan undian selepas pengguna memilihnya.
- Tunjukkan keputusan undian pada halaman.
Contoh kod:
Bahagian 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> Bahagian 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;
}Penjelasan:
- Bahagian HTML mencipta div yang mengandungi setiap input pilihan dan radio untuk setiap pilihan. Fungsi
- vote() ialah peristiwa yang dicetuskan apabila butang undian diklik. Ia mula-mula mendapatkan nilai pilihan yang dipilih oleh pengguna dan mencari elemen kiraan yang sepadan.
- Kemudian, tukar nilai kiraan daripada rentetan kepada integer melalui parseInt() dan tambah 1 pada nilai kiraan.
- Akhir sekali, nilai kiraan yang dikemas kini dipaparkan pada halaman.
Ringkasan:
Dengan contoh kod yang disediakan dalam artikel ini, kami boleh membangunkan sistem pengundian web mudah menggunakan JavaScript. Pengguna boleh memilih pilihan dan menyerahkan undian, dan sistem akan mengemas kini keputusan pengundian dalam masa nyata. Sistem sedemikian boleh digunakan dalam pelbagai senario untuk pengumpulan pendapat dan membuat keputusan yang mudah dan cekap. Dengan sambungan dan penambahbaikan selanjutnya, kami juga boleh melaksanakan fungsi pengundian yang lebih kompleks.
Atas ialah kandungan terperinci Membangunkan sistem pengundian web menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!