很(hěn)多(duō)網站(zhàn)都應用了星級評分效果，讓用戶可(kě)以對正在浏覽的文章、電(diàn)影(yǐng)、資源等進行(xíng)評分，讓網站(zhàn)增添了幾分互動效果。本文将講解如何使用jQuery和(hé)PHP來(lái)實現星級評分效果。

本例實現的效果：

• 過渡動畫(huà)顯示評分操作(zuò)。
• 及時(shí)更新平均得(de)分和(hé)用戶所評的分數(shù)。
• 後台限制(zhì)用戶重複評分操作(zuò)，并在前端及時(shí)顯示。

XHTML

HTML結構分為(wèi)用于顯示灰星星div#big_rate、亮星星div#big_rate_up、分數(shù)span#s及span#g和(hé)提示信息div#my_rate。

CSS

.rate{width:600px; margin:100px auto; font-size:14px; position:relative; padding:10px 0;}
.rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; 
top:0; left:100px; margin-left:140px;}
.rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;}
.rate p span.g {font-size:22px; display:block; float:left; color:#DD5400;}
.big_rate {width:140px; height:28px; text-align:left; position:absolute; top:3px; left:85px; 
display:inline-block; background:url(star.gif) left bottom repeat-x;}
.big_rate span {display:inline-block; width:24px; height:28px; position:relative; z-index:1000;
 cursor:pointer; overflow:hidden;}
.big_rate_up {width:140px; height:28px; position:absolute; top:0; left:0;
 background:url(star.gif) left top;}
#my_rate{ position:absolute; margin-top:40px; margin-left:100px}
#my_rate span{color:#dd5400; font-weight:bold}

jQuery

我們先來(lái)寫一個(gè)函數(shù)get_rate()來(lái)處理(lǐ)評分的前端交互。

function get_rate(rate){
    ....do some thing
}

函數(shù)get_rate(rate),需要傳遞一個(gè)參數(shù)：rate，用來(lái)表示平均分值。接着在函數(shù)裏要處理(lǐ)參數(shù)rate:

rate=rate.toString();
	var s;
	var g;
	$("#g").show();
	if (rate.length>=3){
		s=10;	
		g=0;
		$("#g").hide();
	}else if(rate=="0"){
		s=0;
		g=0;
	}else{
		s=rate.substr(0,1);
		g=rate.substr(1,1);
	}
	$("#s").text(s);
	$("#g").text("."+ g);

将平均分值rate轉換成格式如:6.8，用于前端顯示平均分。

接下來(lái)，當我們鼠标滑向星星時(shí)，會(huì)産生(shēng)一個(gè)動畫(huà)效果，亮星星的寬度會(huì)随着鼠标滑向變化，分數(shù)值也會(huì)随之變化。

$(".big_rate_up").animate({width:(parseInt(s)+parseInt(g)/10) * 14,height:26},1000);
$(".big_rate span").each(function(){
		$(this).mouseover(function(){
			$(".big_rate_up").width($(this).attr("rate") * 14 );
			$("#s").text($(this).attr("rate"));
			$("#g").text("");
		}).click(function(){
			...ajax異步提交給後台處理(lǐ)
		})
})

上(shàng)面的代碼不難理(lǐ)解，需要說明(míng)的是為(wèi)什麽寬度要乘以14呢？因為(wèi)圖片的寬度是28，總共5張圖片表示滿分10分，算(suàn)出來(lái)單位分值（1分）所占寬度為(wèi)（5*28）/10=14。

在單擊星星時(shí)，需要向後台地址發送一個(gè)ajax請(qǐng)求，與後台交互。

var score = $(this).attr("rate");
$("#my_rate").html("您的評分："+score+"");
	$.ajax({
		 type: "POST",
		 url: "post.php",
		 data:"score="+score,
		 success: function(msg){
			if(msg==1){
				$("#my_rate").html("您已經評過分了！");
			}else if(msg==2){
				$("#my_rate").html("您評過分了！");
			}else{
				get_rate(msg);
			}
		}
	});

不難看出，當單擊星星時(shí)，前端以POST方式向後台程序post.php發送ajax請(qǐng)求，傳遞參數(shù)score即所評分數(shù)。後台程序在确定評分數(shù)了，進行(xíng)相應處理(lǐ)，根據處理(lǐ)結果向前端發送不同的處理(lǐ)信息。

還(hái)有(yǒu)不要忘了，當鼠标離開(kāi)星星的時(shí)候應該還(hái)原分數(shù)值：

$(".big_rate").mouseout(function(){
	$("#s").text(s);
	$("#g").text("."+ g);
	$(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14);
})

完成了函數(shù)get_rate()，我們隻需要在頁面載入時(shí)調用就OK。

$(function(){
	get_rate(88);
});

PHP

post.php程序需要處理(lǐ)的有(yǒu)：接收前端發送過來(lái)的分數(shù)值，通(tōng)過cookie判斷用戶IP和(hé)評分時(shí)間(jiān)，防止重複評分。

include_once ('connect.php'); //連接數(shù)據庫
$score = $_POST['score'];
if (isset ($score)) {
	$cookiestr = getip();
	$time = time();
	if (isset ($_COOKIE['person']) && $_COOKIE['person'] == $cookiestr) {
		echo "1";
	}
	elseif (isset ($_COOKIE['rate_time']) && ($time -intval($_COOKIE['rate_time'])) < 600) {
		echo "2";
	} else {
		$query = mysql_query("update raty set voter=voter+1,total=total+'$score' where id=1");
		$query = mysql_query("select * from raty where id=1");
		$rs = mysql_fetch_array($query);
		$aver = $rs['total'] / $rs['voter'];
		$aver = round($aver, 1) * 10;
		//設置COOKIE
		setcookie("person", $cookiestr, time() + 3600);
		setcookie("rate_time", time(), time() + 3600);
		echo $aver;
	}
}

很(hěn)顯然，當用戶提交過一次評分後，程序會(huì)記錄用戶的IP和(hé)時(shí)間(jiān)，以防止重複提交，當用戶是第一次評分時(shí)，程序執行(xíng)操作(zuò)，将評分值加入數(shù)據表，并計(jì)算(suàn)平均分返回給前端調用。

關于如何獲取用戶IP的方法getip()在DEMO中已經有(yǒu)了，這裏不做(zuò)重點介紹，請(qǐng)大(dà)家(jiā)自行(xíng)下載。

最後附上(shàng)mysql表結構：

CREATE TABLE IF NOT EXISTS `raty` (
  `id` int(11) NOT NULL auto_increment,
  `voter` int(10) NOT NULL default '0' COMMENT '評分次數(shù)',
  `total` int(11) NOT NULL default '0' COMMENT '總分',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

如對本例有(yǒu)任何看法請(qǐng)與本人(rén)聯系，歡迎指教。