溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關PHP中怎么利用jQuery實現一個星級評分效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
<p class="rate">
<p class="big_rate">
<span rate="2"> </span>
<span rate="4"> </span>
<span rate="6"> </span>
<span rate="8"> </span>
<span rate="10"> </span>
<p class="big_rate_up"></p>
</p>
<p><span id="s" class="s"></span><span id="g" class="g"></span></p>
<p id="my_rate"></p>
</p>
HTML結構分為用于顯示灰星星p#big_rate、亮星星p#big_rate_up、分數span#s及span#g和提示信息p#my_rate。
.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}
我們先來寫一個函數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);
});
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;
以上就是PHP中怎么利用jQuery實現一個星級評分效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
