PHP+MySql+jQuery实现的"顶"和"踩"投票功能
本文实例为大家分享了基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码,供大家参考,具体内容如下
数据库操作:
CREATETABLEIFNOTEXISTS`votes`( `id`int(10)NOTNULLAUTO_INCREMENT, `likes`int(10)NOTNULLDEFAULT'0', `unlikes`int(10)NOTNULLDEFAULT'0', PRIMARYKEY(`id`) )ENGINE=MyISAMDEFAULTCHARSET=utf8; INSERTINTO`votes`(`id`,`likes`,`unlikes`)VALUES (1,30,10); CREATETABLEIFNOTEXISTS`votes_ip`( `id`int(10)NOTNULL, `vid`int(10)NOTNULL, `ip`varchar(40)NOTNULL )ENGINE=MyISAMDEFAULTCHARSET=utf8;
div:
<divclass="digg"> <divid="dig_up"class="digup"> <spanid="num_up"></span> <p>很好,很强大!</p> <divid="bar_up"class="bar"><span></span><i></i></div> </div> <divid="dig_down"class="digdown"> <spanid="num_down"></span> <p>太差劲了!</p> <divid="bar_down"class="bar"><span></span><i></i></div> </div> <divid="msg"></div> </div>
css:
.digg{width:420px;height:120px;margin:80pxauto20pxauto;position:relative} #dig_up,#dig_down{width:200px;height:48px;margin:10px;position:relative; border:1pxsolid#d3d3d3;padding-left:42px;cursor:pointer} .digup{background:url(diggs.png)no-repeat4px2px;} .digup_on{background:url(diggs.png)no-repeat4px-49px;} .digdown{background:url(diggs.png)no-repeat4px-102px;} .digdown_on{background:url(diggs.png)no-repeat4px-154px;} #num_up,#num_down{position:absolute;right:6px;top:18px;font-size:20px;} #dig_upp{height:24px;line-height:24px;color:#360} #dig_downp{height:24px;line-height:24px;color:#f30} .bar{width:100px;height:12px;line-height:12px;border:1pxsolid#f0f0f0; position:relative;text-align:center} .barspan{display:block;height:12px;} .bari{position:absolute;top:0;left:104px;} #bar_upspan{background:#360} #bar_downspan{background:#f60} #msg{position:absolute;right:20px;top:40px;font-size:18px;color:#f00}
jquery:
$(function(){ //鼠标滑向和离开投票按钮时,变换背景样式 $("#dig_up").hover(function(){ $(this).addClass("digup_on"); },function(){ $(this).removeClass("digup_on"); }); $("#dig_down").hover(function(){ $(this).addClass("digdown_on"); },function(){ $(this).removeClass("digdown_on"); }); //初始化数据 getdata("do.php",1); //单击“顶”时 $("#dig_up").click(function(){ getdata("do.php?action=like",1); }); //单击“踩”时 $("#dig_down").click(function(){ getdata("do.php?action=unlike",1); }); }); --------------------------------------- functiongetdata(url,sid){ $.getJSON(url,{id:sid},function(data){ if(data.success==1){//投票成功 $("#num_up").html(data.like); //通过控制宽度来显示百分比进度条效果 $("#bar_upspan").css("width",data.like_percent); $("#bar_upi").html(data.like_percent); $("#num_down").html(data.unlike); $("#bar_downspan").css("width",data.unlike_percent); $("#bar_downi").html(data.unlike_percent); }else{//投票失败 $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) .animate({top:'-50px',opacity:0},"slow"); } }); }
php:
include_once("connect.php");//连接数据库 $action=$_GET['action']; $id=1; $ip=get_client_ip();//获取ip if($action=='like'){//顶 likes(1,$id,$ip); }elseif($action=='unlike'){//踩 likes(0,$id,$ip); }else{ echojsons($id); } ------------------------------------ functionlikes($type,$id,$ip){ $ip_sql=mysql_query("selectipfromvotes_ipwherevid='$id'andip='$ip'"); $count=mysql_num_rows($ip_sql); if($count==0){//还没有顶过 if($type==1){//顶 $sql="updatevotessetlikes=likes+1whereid=".$id; }else{//踩 $sql="updatevotessetunlikes=unlikes+1whereid=".$id; } mysql_query($sql); $sql_in="insertintovotes_ip(vid,ip)values('$id','$ip')"; mysql_query($sql_in); if(mysql_insert_id()>0){ echojsons($id); }else{ $arr['success']=0; $arr['msg']='操作失败,请重试'; echojson_encode($arr); } }else{ $msg=$type==1?'您已经顶过了':'您已经踩过了'; $arr['success']=0; $arr['msg']=$msg; echojson_encode($arr); } } -----------php------------------------- functionjsons($id){ $query=mysql_query("select*fromvoteswhereid=".$id); $row=mysql_fetch_array($query); $like=$row['likes']; $unlike=$row['unlikes']; $arr['success']=1; $arr['like']=$like; $arr['unlike']=$unlike; $like_percent=round($like/($like+$unlike),3)*100; $arr['like_percent']=$like_percent.'%'; $arr['unlike_percent']=(100-$like_percent).'%'; returnjson_encode($arr); }
以上就是本文的全部内容,希望对大家学习php程序设计有所帮助。