jQuery+PHP星級評等實現方法_jquery

本例實現的效果：

過渡動畫顯示評分操作。
及時更新平均得分和使用者所評的分數。
後台限制使用者重複評分操作，並在前端及時顯示。
XHTML

<div class="rate">   <div class="big_rate">     <span rate="2"> </span>     <span rate="4"> </span>     <span rate="6"> </span>     <span rate="8"> </span>     <span rate="10"> </span>     <div style="width:45px;" class="big_rate_up"></div>   </div>   <p><span id="s" class="s"></span><span id="g" class="g"></span></p>   <div id="my_rate"></div> </div> 

HTML結構分為用於顯示灰星星div#big_rate、亮星星div#big_rate_up、分數span#s及span#g和提示資訊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
我們先來寫一個函數get_rate()來處理評分的前端互動。

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

函數get_rate(rate),需要傳遞一個參數：rate，用來表示平均分值。接著在函數裡要處理參數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，用於最上層顯示平均分。
接下來，當我們滑鼠滑向星星時，會產生一個動畫效果，亮星星的寬度會隨著滑鼠滑向變化，分數值也會隨之變化。

$(".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非同步提交給幕後處理     }) }) 

上面的代碼不難理解，需要說明的是為什麼寬度要乘以14呢？因為圖片的寬度是28，總共5張圖片表示滿分10分，算出來單位分值（1分）所佔寬度為（5*28）/10=14。
在單擊星星時，需要向後台地址發送一個ajax請求，與後台互動。

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

不難看出，當單擊星星時，前端以POST方式向背景程式post.php發送ajax請求，傳遞參數score即所評分數。背景程式在確定評分數了，進行相應處理，根據處理結果向前端發送不同的處理資訊。
還有不要忘了，當滑鼠離開星星的時候應該還原分數值：

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

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

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

PHP
post.php程式需要處理的有：接收前端發送過來的分數值，通過cookie判斷使用者IP和評分時間，防止重複評分。

include_once ('connect.php'); //串連資料庫 $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;   } } 

很顯然，當使用者提交過一次評分後，程式會記錄使用者的IP和時間，以防止重複提交，當使用者是第一次評分時，程式執行操作，將評分值加入資料表，並計算平均分返回給前端調用。
關於如何擷取使用者IP的方法getip()在DEMO中已經有了，這裡不做重點介紹，請大家自行下載。
最後附上mysql表結構：

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

以上就是jQuery+PHP星級評等實現方法，希望對大家的學習有所協助。