jQuery基于ajax实现带动画效果无刷新柱状图投票代码

使用jQuery基于ajax实现带动画效果无刷新柱状图投票，需要以下步骤：

步骤1：编写HTML代码

首先，需要在HTML中创建一个div，将其作为投票结果的容器。然后，在该div中再创建若干个div，每个div表示投票选项，同时添加一个input元素，用于存储选项对应的投票数。

以下是一个示例HTML代码：

<div id="vote_result">
  <div class="option">
    <input type="hidden" name="option1" value="10">
    Option 1
  </div>
  <div class="option">
    <input type="hidden" name="option2" value="20">
    Option 2
  </div>
</div>

步骤2：编写jQuery代码

接下来，需要引入jQuery库和相关的CSS样式文件。然后，利用jQuery的ajax方法，实现无刷新更新投票结果的效果。

$(function() {
  $('.option').click(function() {
    var option = $(this).find('input');
    var voteCount = parseInt(option.val());
    option.val(voteCount + 1);
    updateResult($(this));
  });
});

function updateResult(option) {
  var optionName = option.find('input').attr('name');
  var optionValue = option.find('input').val();
  var maxBarWidth = $('#vote_result').width();
  var voteTotal = 0;
  $('.option input').each(function() {
    voteTotal += parseInt($(this).val());
  });
  $('.option').each(function() {
    var option = $(this).find('input');
    var voteCount = parseInt(option.val());
    var votePercent = voteCount / voteTotal;
    var barWidth = maxBarWidth * votePercent;
    $(this).find('.bar').animate({width: barWidth}, 'slow');
    $(this).find('.percent').text((votePercent * 100).toFixed(0) + '%');
  });

  $.ajax({
    url: 'vote.php',
    type: 'POST',
    data: {option_name: optionName, option_value: optionValue},
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.error(xhr);
      console.error(status);
      console.error(error);
    }
  });
}

以上代码的解释如下：

第1行：使用jQuery的$(function(){...})方法，在DOM完全加载后执行相关代码；
第2行：为每个选项绑定click事件，当用户点击某个选项时，会自动更新投票数并更新“投票结果”；
第11~12行：提取当前选项的名称和投票数；
第13行：计算当前投票百分比应该产生的图表宽度；
第14行：获取当前所有选项的投票总数；
第15~30行：根据当前的投票数和总数，计算每个选项应该占用的图表宽度和文字百分比，并利用jQuery的animate方法实现图表动画效果；
第32~39行：发送一个ajax请求到后端，提交当前用户的投票结果，并在控制台打印出返回结果。

示例1：基本动画效果

为了演示该投票效果，可以创建一个简单的PHP后端程序，将用户的投票结果写入到一个votes.txt文件中。

vote.php：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $option_name = $_POST['option_name'];
  $option_value = $_POST['option_value'];

  file_put_contents('votes.txt', "$option_name=$option_value\n", FILE_APPEND);
  echo "投票成功！";
}

使用上面的HTML和jQuery代码配合该PHP文件，就可以实现一个具有基本投票动画效果的页面。

示例2：自定义CSS样式

要想让该投票页面更加美观，可以自定义一些CSS样式，并在HTML中引入相应的CSS文件。

以下是一个示例的CSS代码，可以创建一个style.css文件并写入以下内容：

#vote_result {
  width: 70%;
  margin: auto;
  font-size: 18px;
  color: #333;
}

.option {
  padding: 10px;
  margin-bottom: 5px;
  background-color: #EEE;
}

.bar {
  height: 20px;
  background-color: #2484C4;
}

.percent {
  float: right;
  margin-left: 10px;
  color: #AAA;
}

该CSS文件定义了投票结果容器、投票选项、柱状图和文字百分比的样式。可以在HTML代码中引入该CSS文件，以进一步美化投票页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery基于ajax实现带动画效果无刷新柱状图投票代码</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="vote_result">
    <div class="option">
      <input type="hidden" name="option1" value="10">
      Option 1
      <div class="bar"></div>
      <div class="percent">0%</div>
    </div>
    <div class="option">
      <input type="hidden" name="option2" value="20">
      Option 2
      <div class="bar"></div>
      <div class="percent">0%</div>
    </div>
  </div>
  <script src="vote.js"></script>
</body>
</html>

以上是一个完整的jQuery基于ajax实现带动画效果无刷新柱状图投票的攻略。通过自定义HTML、jQuery和CSS代码的不同组合，可以实现各种各样的投票效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery基于ajax实现带动画效果无刷新柱状图投票代码 - Python技术站

jQuery基于ajax实现带动画效果无刷新柱状图投票代码

步骤1：编写HTML代码

步骤2：编写jQuery代码

示例1：基本动画效果

示例2：自定义CSS样式

相关文章