搜索熱詞

本例實(shí)現(xiàn)的效果：

過(guò)渡動(dòng)畫(huà)顯示評(píng)分操作。

及時(shí)更新平均得分和用戶所評(píng)的分?jǐn)?shù)。

后臺(tái)限制用戶重復(fù)評(píng)分操作，并在前端及時(shí)顯示。

XHTML

HTML結(jié)構(gòu)分為用于顯示灰星星div#big_rate、亮星星div#big_rate_up、分?jǐn)?shù)span#s及span#g和提示信息div#my_rate。

CSS

jQuery

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

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

=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轉(zhuǎn)換成格式如:6.8，用于前端顯示平均分。

接下來(lái)，當(dāng)我們鼠標(biāo)滑向星星時(shí)，會(huì)產(chǎn)生一個(gè)動(dòng)畫(huà)效果，亮星星的寬度會(huì)隨著鼠標(biāo)滑向變化，分?jǐn)?shù)值也會(huì)隨之變化。

SEOver(function(){

$(".big_rate_up").width($(this).attr("rate") * 14 );

$("#s").text($(this).attr("rate"));

$("#g").text("");

}).click(function(){

...ajax異步提交給后臺(tái)處理

})

})

上面的代碼不難理解，需要說(shuō)明的是為什么寬度要乘以14呢？因?yàn)閳D片的寬度是28，總共5張圖片表示滿分10分，算出來(lái)單位分值(1分)所占寬度為(5*28)/10=14。

在單擊星星時(shí)，需要向后臺(tái)地址發(fā)送一個(gè)ajax請(qǐng)求，與后臺(tái)交互。

score = $(this).attr("rate");

$("#my_rate").html("您的評(píng)分：PHP",data:"score="+score,success: function(msg){

if(msg==1){

$("#my_rate").html("您已經(jīng)評(píng)過(guò)分了！");

}else if(msg==2){

$("#my_rate").html("您評(píng)過(guò)分了！");

}else{

get_rate(msg);

}

}

});

不難看出，當(dāng)單擊星星時(shí)，前端以POST方式向后臺(tái)程序post.PHP發(fā)送ajax請(qǐng)求，傳遞參數(shù)score即所評(píng)分?jǐn)?shù)。后臺(tái)程序在確定評(píng)分?jǐn)?shù)了，進(jìn)行相應(yīng)處理，根據(jù)處理結(jié)果向前端發(fā)送不同的處理信息。

還有不要忘了，當(dāng)鼠標(biāo)離開(kāi)星星的時(shí)候應(yīng)該還原分?jǐn)?shù)值：

PHP;">

$(".big_rate").mouSEOut(function(){

$("#s").text(s);

$("#g").text("."+ g);

$(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14);

})

完成了函數(shù)get_rate()，我們只需要在頁(yè)面載入時(shí)調(diào)用就OK。

PHP程序需要處理的有：接收前端發(fā)送過(guò)來(lái)的分?jǐn)?shù)值，通過(guò)cookie判斷用戶IP和評(píng)分時(shí)間，防止重復(fù)評(píng)分。

PHP;">

include_once ('connect.PHP'); //連接數(shù)據(jù)庫(kù)

$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;

//設(shè)置COOKIE

setcookie("person",$cookiestr,time() + 3600);

setcookie("rate_time",time(),time() + 3600);

echo $aver;

}

}

很顯然，當(dāng)用戶提交過(guò)一次評(píng)分后，程序會(huì)記錄用戶的IP和時(shí)間，以防止重復(fù)提交，當(dāng)用戶是第一次評(píng)分時(shí)，程序執(zhí)行操作，將評(píng)分值加入數(shù)據(jù)表，并計(jì)算平均分返回給前端調(diào)用。

關(guān)于如何獲取用戶IP的方法getip()在DEMO中已經(jīng)有了，這里不做重點(diǎn)介紹，請(qǐng)大家自行下載。

最后附上MysqL表結(jié)構(gòu)：

sql;">

CREATE TABLE IF NOT EXISTS `raty` (

`id` int(11) NOT NULL auto_increment,`voter` int(10) NOT NULL default '0' COMMENT '評(píng)分次數(shù)',`total` int(11) NOT NULL default '0' COMMENT '總分',PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

以上就是jQuery+PHP星級(jí)評(píng)分實(shí)現(xiàn)方法，希望對(duì)大家的學(xué)習(xí)有所幫助。

總結(jié)

如果覺(jué)得編程之家網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將編程之家網(wǎng)站推薦給程序員好友。

本圖文內(nèi)容來(lái)源于網(wǎng)友網(wǎng)絡(luò)收集整理提供，作為學(xué)習(xí)參考使用，版權(quán)屬于原作者。

總結(jié)

以上是生活随笔為你收集整理的php评星,jQuery+PHP星级评分实现方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。