1
2
微信搜索“合家评选”进入微信小程序免费创建投票，包括图文投票，视频投票，群投票，智能防刷，一对一客服全程陪伴。
HTML投票制作教程 随着互联网的发展，人们对于信息的获取和传播越来越依赖于网络。在这个大数据时代，通过网络进行投票已经成为一种时尚和必需。不管是学校、公司还是政府部门，都需要通过网络进行投票来获取大众的反馈和意见。HTML投票便成为了web开发人员最常用的一种投票形式，并且它的制作也非常简单易学。下面，本文将介绍一个HTML投票的实例以及如何制作。 投票示例 在这个示例中，我们将要制作一份包含两个选项的投票。这个投票不仅能够显示每个选项的得票数，还能够显示总票数和百分比。投票的设计主要分为两个部分：投票表单和显示结果。 投票表单 我们需要首先创建一个投票表单，并且向用户展示两个选项。表单中需要包含两个单选框，并且每个单选框需要设置不同的值。下面是实现代码。 ```HTML
``` 当用户选择一个选项并提交表单之后，我们需要用JavaScript获取结果并且通过AJAX请求将结果发送到服务器。下面是发送AJAX请求的代码。 ```JavaScript $('form').on('submit', function(e) { e.preventDefault(); var movie = $('input[name="movie"]:checked').val(); $.ajax({ url: 'submit_vote.php', type: 'POST', data: {movie: movie}, success: function(data) {}, error: function(jqXHR, textStatus, errorThrown) {} }); }); ``` 这段代码中，我们首先定义了一个表单对象，并且在表单提交时进行了一个事件监听。然后，我们使用jQuery获取了用户选择的选项的值，并且使用AJAX请求将投票结果提交到服务器。在这个示例中，我们将提交的数据以POST方式发送到submit_vote.php。 显示投票结果 在投票结果部分，我们需要使用PHP脚本从数据库中获取投票结果。以下是一个相应的PHP代码。 ```PHP <?php $dsn = 'mysql:host=localhost;dbname=mydatabase'; $username = 'username'; $password = 'password'; try { $pdo = new PDO($dsn, $username, $password); } catch (PDOException $e) { echo 'Connection failed: ' . $e->getMessage(); } $stmt = $pdo->prepare('SELECT COUNT(*) as total, SUM(IF(movie = ?, 1, 0)) as movie_count, SUM(IF(movie = ?, 1, 0)) as comedy_count FROM votes'); $stmt->execute(array('action', 'comedy')); $row = $stmt->fetch(PDO::FETCH_ASSOC); $total = $row['total']; $movie_count = $row['movie_count']; $comedy_count = $row['comedy_count']; $movie_percent = round($movie_count / $total * 100, 2); $comedy_percent = round($comedy_count / $total * 100, 2); ?> ``` 这段代码中，我们首先创建了一个与数据库的连接，然后使用预处理语句从votes表中查询数据。我们使用三个IF语句分别获取总票数和每个选项的得票数。最后，我们计算了每个选项的百分比。 在显示结果的HTML代码中，我们需要使用PHP语句将结果显示出来。以下是一个相应的HTML代码。 ```HTML结果
票数：<?php echo $total; ?>
动作片得票数：<?php echo $movie_count; ?> (<?php echo $movie_percent; ?> %)
喜剧片得票数：<?php echo $comedy_count; ?> (<?php echo $comedy_percent; ?> %)
``` 这段代码中，我们首先创建了一个div元素，用于显示投票结果。然后，我们使用PHP语句显示了总票数和每个选项的得票数和百分比。 总结 通过上面的例子，我们可以看到，HTML投票的制作非常简单易学。我们只需要使用HTML和JavaScript创建一个表单，并且使用AJAX请求将投票结果提交到服务器。在服务器上，我们使用PHP程序计算投票结果并将结果显示在网页上。相信读者们已经掌握了HTML投票的制作技巧，可以尝试自己创建一个投票网页了。