php部分--题目：投票 重点：两个div套用，显示百分比；

1.建立两个表格：要显示百分比的话，就要在选项表中加上一列标记number

2.链接数据库，并对题目和选项进行显示

<?php
$db=new MySQLi("localhost","root","123","test1");
mysqli_connect_error()?"连接失败":"";
$sql1="select * from timu ";
$result1=$db->query($sql1);
$attr1=$result1->fetch_row();

$sql2="select * from xuanxiang";
$result2=$db->query($sql2);
$attr2=$result2->fetch_all();
?>
<div id="timu" style="display:block;">
<form action="toupiao.php" method="post">
<?php
echo $attr1[1];//题目显示
$v=array();
foreach($attr2 as $v)
{
    echo "<div><input type='checkbox' value='{$v[0]}' name='xx[]'>{$v[1]}</div>";  //选项显示
    }

?>
<input type="submit" value="投票"><input type="button" value="查看详情" onclick="xianshi(0)">
</form>

</div>

<div id='baifenbi' style="display:none;">
<?php

3.给选中项的number列加1处理

/*--------------------------选中的数量加1--------计算number列的总数量----------------------------------------*/
if(!empty($_POST['xx']))
{
$attr3=$_POST['xx'];
$str=implode("','",$attr3);
$sql3="update xuanxiang set number=number+1 where ids in ('{$str}')";   //给number列+1，
$result3=$db->query($sql3);
if($result3)
{
$sql4="select sum(number) from xuanxiang";    
$result4=$db->query($sql4);
$num=$result4->fetch_row();                                             //把number列的数值取总和

4.显示选项的百分比

/*------------------------------百分比显示---------------------------------------------------------*/
echo "<div>";

foreach($attr2 as $vv)
{
    $baifenbi=($vv[2]/$num[0])*100;
    
echo "{$vv[1]}&nbsp;&nbsp;&nbsp;{$baifenbi}%<div style='width:200px;height:6px; border:1px solid black;'><div style='width:{$baifenbi}%;height:6px;background-color:red;'></div></div>";                //显示百分比，是用两个div，外层的固定宽度，内层的通过百分比给宽度赋值，并设背景色

}
echo "<input type='button' value='返回' onclick='xianshi(1)'>";
echo "</div>";    
}
}


?>

5.js实现投票和百分比显示的交替（投票和百分比界面分别写在两个div中）

<script>
function xianshi(a)
{
    if(a==0)
    {
    document.getElementById("baifenbi").style.display="block";
    document.getElementById("timu").style.display="none";
    }
    else
    {
        document.getElementById("baifenbi").style.display="none";
    document.getElementById("timu").style.display="block";
        }
    }
    
</script>