本文是一篇綜合知識應用類文章，需要您具備PHP、jQuery、MySQL以及html和css方面的基本知識。本文在《PHP+MySql+jQuery實現的“頂”和“踩”投票功能》一文基礎上做了適當改進，共用了數據表，您可以先點擊了解這篇文章。

HTML

我們需要在頁面中展示紅藍雙方的觀點，以及對應的投票數和比例，以及用于投票交互的手型圖片，本例以#red和#blue分別表示紅藍雙 方。.redhand和.bluehand用來做手型投票按鈕，.redbar和.bluebar展示紅藍雙方比例調，#red_num 和#blue_num展示雙方投票數。

Html代碼 ?

CSS

使用CSS將頁面美化，加載背景圖片，確定相對位置等等，你可以直接復制以下代碼，在自己的項目中稍作修改即可。

Html代碼 ?

.vote{width:288px;?height:220px;?margin:60px?auto?20px?auto;position:relative}

.votetitle{width:100%;height:62px;?background:url(icon.png)?no-repeat?0?30px;?font-size:15px}

.red{position:absolute;?left:0;?top:90px;?height:80px;}

.blue{position:absolute;?right:0;?top:90px;?height:80px;}

.votetxt{line-height:24px}

.votetxt?span{float:right}

.redhand{position:absolute;?left:0;width:36px;?height:36px;?background:url(icon.png)?no-repeat?-1px?-38px;cursor:pointer}

.bluehand{position:absolute;?right:0;width:36px;?height:36px;?background:url(icon.png)?no-repeat?-41px?-38px;cursor:pointer}

.grayhand{width:34px;?height:34px;?background:url(icon.png)?no-repeat?-83px?-38px;cursor:pointer}

.redbar{position:absolute;?left:42px;?margin-top:8px;}

.bluebar{position:absolute;?right:42px;?margin-top:8px;?}

.redbar?span{display:block;?height:6px;?background:red;?width:100%;border-radius:4px;}

.bluebar?span{display:block;?height:6px;?background:#09f;?width:100%;border-radius:4px;?position:absolute;?right:0}

.redbar?p{line-height:20px;?color:red;}

.bluebar?p{line-height:20px;?color:#09f;?text-align:right;?margin-top:6px}

jQuery

當點擊手型按鈕時，利用jQuery的$.getJSON()向后臺php發送Ajax請求，如果請求成功，將會得到后臺返回的json數 據，jQuery再將json數據進行處理。以下函數：getdata(url,sid)，傳遞了兩個參數，url是請求的后臺php地址，sid表示當 前投票主題ID，我們在該函數中，返回的json數據有紅藍雙方的投票數，以及雙方比例，根據比例計算比例條的寬度，異步交互展示投票效果。

Js代碼 ?

function?getdata(url,sid){

$.getJSON(url,{id:sid},function(data){

if(data.success==1){

var?w?=?208;?//定義比例條的總寬度

//紅方投票數

$("#red_num").html(data.red);

$("#red").css("width",data.red_percent*100+"%");

var?red_bar_w?=?w*data.red_percent-10;

//紅方比例條寬度

$("#red_bar").css("width",red_bar_w);

//藍方投票數

$("#blue_num").html(data.blue);

$("#blue").css("width",data.blue_percent*100+"%");

var?blue_bar_w?=?w*data.blue_percent;

//藍方比例條寬度

$("#blue_bar").css("width",blue_bar_w);

}else{

alert(data.msg);

}

});

}

當頁面初次加載時，即調用getdata()，然后點擊給紅方投票或給藍方投票同樣調用getdata()，只是傳遞的參數不一樣。注意本例中的參數sid我們設置為1，是根據數據表中的id設定的，開發者可以根據實際項目讀取準確的id。

Js代碼 ?

$(function(){

//獲取初始數據

getdata("vote.php",1);

//紅方投票

$(".redhand").click(function(){

getdata("vote.php?action=red",1);

});

//藍方投票

$(".bluehand").click(function(){

getdata("vote.php?action=blue",1);

});

});

PHP

前端請求了后臺的vote.php，vote.php將根據接收的參數，連接數據庫，調用相關函數。

Php代碼 ?

include_once("connect.php");

$action?=?$_GET['action'];

$id?=?intval($_GET['id']);

$ip?=?get_client_ip();//獲取ip

if($action=='red'){//紅方投票

vote(1,$id,$ip);

}elseif($action=='blue'){//藍方投票

vote(0,$id,$ip);

}else{//默認返回初始數據

echo?jsons($id);

}

函數vote($type,$id,$ip)用來做出投票動作，$type表示投票方，$id表示投票主題的id，$ip表示用戶當前ip。首先根 據用戶當前IP，查詢投票記錄表votes_ip中是否已經存在當前ip記錄，如果存在，則說明用戶已投票，否則更新紅方或藍方的投票數，并將當前用戶投 票記錄寫入到votes_ip表中以防重復投票。

Php代碼 ?

function?vote($type,$id,$ip){

$ip_sql=mysql_query("select?ip?from?votes_ip?where?vid='$id'?and?ip='$ip'");

$count=mysql_num_rows($ip_sql);

if($count==0){//還沒有投票

if($type==1){//紅方

$sql?=?"update?votes?set?likes=likes+1?where?id=".$id;

}else{//藍方

$sql?=?"update?votes?set?unlikes=unlikes+1?where?id=".$id;

}

mysql_query($sql);

$sql_in?=?"insert?into?votes_ip?(vid,ip)?values?('$id','$ip')";

mysql_query($sql_in);

if(mysql_insert_id()>0){

echo?jsons($id);

}else{

$arr['success']?=?0;

$arr['msg']?=?'操作失敗，請重試';

echo?json_encode($arr);

}

}else{

$arr['success']?=?0;

$arr['msg']?=?'已經投票過了';

echo?json_encode($arr);

}

}

函數jsons($id)通過查詢當前id的投票數，計算比例并返回json數據格式供前端調用。

Php代碼 ?

function?jsons($id){

$query?=?mysql_query("select?*?from?votes?where?id=".$id);

$row?=?mysql_fetch_array($query);

$red?=?$row['likes'];

$blue?=?$row['unlikes'];

$arr['success']=1;

$arr['red']?=?$red;

$arr['blue']?=?$blue;

$red_percent?=?round($red/($red+$blue),3);

$arr['red_percent']?=?$red_percent;

$arr['blue_percent']?=?1-$red_percent;

return?json_encode($arr);

}

MySQL

最后，貼上Mysql數據表，votes表用來記錄紅藍雙方的投票總數，votes_ip表則用來存放用戶的投票IP記錄。

Sql代碼 ?

CREATE?TABLE?IF?NOT?EXISTS?`votes`?(

`id`?int(10)?NOT?NULL?AUTO_INCREMENT,

`likes`?int(10)?NOT?NULL?DEFAULT?'0',

`unlikes`?int(10)?NOT?NULL?DEFAULT?'0',

PRIMARY?KEY?(`id`)

)?ENGINE=MyISAM??DEFAULT?CHARSET=utf8;

INSERT?INTO?`votes`?(`id`,?`likes`,?`unlikes`)?VALUES

(1,?30,?10);

CREATE?TABLE?IF?NOT?EXISTS?`votes_ip`?(

`id`?int(10)?NOT?NULL,

`vid`?int(10)?NOT?NULL,

`ip`?varchar(40)?NOT?NULL

)?ENGINE=MyISAM?DEFAULT?CHARSET=utf8;

再次提醒，下載的demo如果運行不了，請先檢查數據庫連接配置是否正確。好了，少說兩句，快來投票吧：查看演示。