PHP中怎么利用jQuery實(shí)現(xiàn)一個(gè)星級(jí)評(píng)分效果

本篇文章給大家分享的是有關(guān)PHP中怎么利用jQuery實(shí)現(xiàn)一個(gè)星級(jí)評(píng)分效果，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

XHTML




<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結(jié)構(gòu)分為用于顯示灰星星p#big_rate、亮星星p#big_rate_up、分?jǐn)?shù)span#s及span#g和提示信息p#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)處理評(píng)分的前端交互。




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




函數(shù)get_rate(rate),需要傳遞一個(gè)參數(shù)：rate，用來(lái)表示平均分值。接著在函數(shù)里要處理參數(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轉(zhuǎn)換成格式如:6.8，用于前端顯示平均分。




接下來(lái)，當(dāng)我們鼠標(biāo)滑向星星時(shí)，會(huì)產(chǎn)生一個(gè)動(dòng)畫效果，亮星星的寬度會(huì)隨著鼠標(biāo)滑向變化，分?jǐn)?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異步提交給后臺(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)交互。




var score = $(this).attr("rate"); $("#my_rate").html("您的評(píng)分：<span>"+score+"</span>"); $.ajax({ type: "POST", url: "post.php", data:"score="+score, success: function(msg){ if(msg==1){ $("#my_rate").html("<span>您已經(jīng)評(píng)過分了！</span>"); }else if(msg==2){ $("#my_rate").html("<span>您評(píng)過分了！</span>"); }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)離開星星的時(shí)候應(yīng)該還原分?jǐn)?shù)值：




$(".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。




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




PHP







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




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)用戶提交過一次評(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)：




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;

以上就是PHP中怎么利用jQuery實(shí)現(xiàn)一個(gè)星級(jí)評(píng)分效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。