废话少说，作为一个前端猿，首先上前端的代码。
1.上html代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>投票</title> <script type='text/javascript' src='jquery-1.12.4.min.js'></script> </head> <body> <h3>2016年度你最喜欢的港台男歌手是谁?</h3> <form method="post"> <input name="gs" type="radio" value="0">古巨基<br/> <input name="gs" type="radio" value="1">周杰伦<br/> <input name="gs" type="radio" value="2">张杰<br/> <input name="gs" type="radio" value="3">林俊杰<br/> <input name="gs" type="radio" value="4">陈奕迅<br/> <input type='button' id='qd' value="确定"> <button id="qx">取消</button> </form> <div class="biao"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
2.上样式表代码
input[type="radio"],button{margin-top:10px;} button,input[type="button"]{ border:none; outline:medium; background-image:none; width:80px; height:26px; background:yellowgreen; color:#fff; } .biao{width:400px;float:left;} span{ display:block; height:26px; margin-top:4px; color:#fff; line-height:26px; font-weight:800; font-size:0.8em; } span:nth-child(1){background:#0d73cf;width:0px;} span:nth-child(2){background:#259f4a;width:0px;} span:nth-child(3){background:#bdbf2d;width:0px;} span:nth-child(4){background:#ef7716;width:0px;} span:nth-child(5){background:#dd2c41;width:0px;} form{float:left;width:200px;}
3.上jquery代码
var sft=false;//设置是否投票了 $("#qd").on("click",function(){ if(sft==false){ $.ajax({ url:"toupiao.php", type:"post", data:{val:$("input:radio:checked").val()}, success:function(data){ var jsonobj=jQuery.parseJSON(data); var sum=0; //循环求出sum的总数 $.each(jsonobj,function(i,val){ sum+=parseInt(val); }); //alert(sum);获取当前票占总数的百分比 for(var n=0;n<$("span").length;n++){ $("span").eq(n).animate({parseInt(jsonobj["g"+n])/sum*1000+"px"},1000); var zf=jsonobj["g"+n]/sum*100+""; $("span").eq(n).html(zf.substr(0,zf.indexOf(".")+4)+"%"); //alert(parseInt(jsonobj["g"+n])/sum*1000); } } }); sft=true; }else{ alert("你已经投过票了！"); $("input[type='button']").css("background","#ccc"); } });
最后当然上的是php的代码咯！
$val=$_POST["val"]; //获取前端界面传过来的值 $filename="toupiao.txt";//打开记录储存数据的txt文件 $content=file($filename); $array=explode("||",$content[0]);//explode()类似于js里面的split(); //获取文件里面的初始值并用变量存储好 $h_1=$array[0]; $h_2=$array[1]; $h_3=$array[2]; $h_4=$array[3]; $h_5=$array[4]; switch ($val){ case 0: $h_1++; break; case 1: $h_2++; break; case 2: $h_3++; break; case 3: $h_4++; break; case 4: $h_5++; break; default: echo "没有选中任何歌手!"; } //将新的数据插入到文件中 $inserttxt=$h_1."||".$h_2."||".$h_3."||".$h_4."||".$h_5; //写入文件 $fp=fopen($filename,"w"); fputs($fp,$inserttxt); fclose($fp); $str='{"g0":"'.$h_1.'","g1":"'.$h_2.'","g2":"'.$h_3.'","g3":"'.$h_4.'","g4":"'.$h_5.'"}'; echo $str;
至于样式表和操作的js文件，在html里面我就并没有引入了。请自己新建对应的文件引入到html里面。
效果图:
