首先在数据库中要有张表，字段为id，name（即投票的选项），count（各选项所投票的数量累计）。
具体思路：当选项被选中时，count+1，count的值作为div的长度显示在html页面中，可以嵌套两个div，外div长度固定，内div的长度设置为百分比，这样就可以显示百分比了。
具体代码如下：
HTML页面（包括js）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>投票</title>
//引用jquery
<script type="text/javascript" src="../../jquery-3.2.1.min.js"></script>
//为当做统计条的div设置一下样式
<style>
.wai{
width: 100px;
height: 15px;
border: 1px solid red;
}
.nei{
width: 1%;
height: 15px;
background: red;
}
</style>
</head>
<body>
<h1>投票</h1>
<div id="show1"></div>
<div id="show2">
<table></table>
</div>
<button onClick="tijiao()">提交</button>
</body>
</html>
<script>
var attr=[];
var sum=0;
ajax获取数据
$.ajax({
async:true,
url:‘untitled.php‘,
data:{type:‘select‘},
type:‘post‘,
dataType:‘text‘,
success:function(data){
//把php返回的字符串转成二维数组
strToArr(data);
}
});
//方法：字符串转数组
function strToArr(str){
var arr=str.split(‘^‘),
brr=[],
sum=0;
for(var i in arr){
brr.push(arr[i].split(‘,‘));
sum+=+brr[i][2];
}
attr=brr;
initHtml(sum);
}
//方法：将数据打印至HTML页面中（包括选项）
function initHtml(sum){
var str=‘‘;
for(var i in attr){
str+=‘<input type="checkbox" data-id="‘+attr[i][0]+‘">‘+attr[i][1]+‘<br>‘;
}
$(‘#show1‘).html(str);
str=‘‘;
for(var i in attr){
str+=`<tr>
<td>`+attr[i][1]+`</td>
<td>
<div class="wai">
<div class="nei" style="width:`+((attr[i][2]/sum)*100).toFixed(2)+`%;"></div>
</div>
</td>
<td>`+attr[i][2]+`(`+((attr[i][2]/sum)*100).toFixed(2)+`%)</td>
</tr>`;
}
$(‘#show2 table‘).html(str);
}
//提交按钮的方法
function tijiao(){
var str=‘‘;
$(‘input:checkbox:checked‘).each(function(){
str+=$(this).attr(‘data-id‘)+‘,‘;
})
str=str.substring(0,str.length-1);
$.ajax({
async:true,
url:‘index.php‘,
data:{type:‘insert‘,ids:str},
type:‘post‘,
dataType:‘text‘,
success:function(data){
//把php返回的字符串转成二维数组
strToArr(data);
}
});
}
</script>
php页面：
<?php
$db= new MySQLi(‘localhost‘,‘root‘,‘root‘,‘database‘);
!mysqli_connect_error() or die(‘连接失败‘);
$db->query(‘set names utf8‘);
$type=$_REQUEST[‘type‘];
switch($type){
case ‘insert‘:
$ids=$_POST[‘ids‘];
$sql="update table set count= count+1 where id in ($ids) ";
$db->query($sql);
break;
case ‘select‘:
break;
}
$sql="select * from table";
$res=$db->query($sql);
$attr=$res->fetch_all();
// 数组转字符串
$brr=array();
foreach($attr as $v){
$brr[]=implode(",",$v);
}
echo implode(‘^‘,$brr);