本例達到的效果:
轉場動畫顯示評分操作。
及時更新平均分數和用戶評論的分數。
後台限制使用者重複評分操作,並在前端及時顯示。
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星級評分實現方法,希望對大家的學習有所幫助。