快捷導(dǎo)航

jQuery+PHP星級評分實現(xiàn)方法

更新時間：2015年10月02日 09:02:59 投稿：lijiao

很多網(wǎng)站都應(yīng)用了星級評分效果，讓用戶可以對正在瀏覽的文章、電影、資源等進(jìn)行評分，讓網(wǎng)站增添了幾分互動效果。本文將講解如何使用jQuery和PHP來實現(xiàn)星級評分效果。

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

過渡動畫顯示評分操作。
及時更新平均得分和用戶所評的分?jǐn)?shù)。
后臺限制用戶重復(fù)評分操作，并在前端及時顯示。
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結(jié)構(gòu)分為用于顯示灰星星div#big_rate、亮星星div#big_rate_up、分?jǐn)?shù)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
我們先來寫一個函數(shù)get_rate()來處理評分的前端交互。

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

函數(shù)get_rate(rate),需要傳遞一個參數(shù)：rate，用來表示平均分值。接著在函數(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，用于前端顯示平均分。
接下來，當(dāng)我們鼠標(biāo)滑向星星時，會產(chǎn)生一個動畫效果，亮星星的寬度會隨著鼠標(biāo)滑向變化，分?jǐn)?shù)值也會隨之變化。

$(".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。
在單擊星星時，需要向后臺地址發(fā)送一個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>您已經(jīng)評過分了！</span>"); 
      }else if(msg==2){ 
        $("#my_rate").html("<span>您評過分了！</span>"); 
      }else{ 
        get_rate(msg); 
      } 
    } 
  });

不難看出，當(dāng)單擊星星時，前端以POST方式向后臺程序post.php發(fā)送ajax請求，傳遞參數(shù)score即所評分?jǐn)?shù)。后臺程序在確定評分?jǐn)?shù)了，進(jìn)行相應(yīng)處理，根據(jù)處理結(jié)果向前端發(fā)送不同的處理信息。
還有不要忘了，當(dāng)鼠標(biāo)離開星星的時候應(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()，我們只需要在頁面載入時調(diào)用就OK。

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

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

include_once ('connect.php'); //連接數(shù)據(jù)庫 
$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)用戶提交過一次評分后，程序會記錄用戶的IP和時間，以防止重復(fù)提交，當(dāng)用戶是第一次評分時，程序執(zhí)行操作，將評分值加入數(shù)據(jù)表，并計算平均分返回給前端調(diào)用。
關(guān)于如何獲取用戶IP的方法getip()在DEMO中已經(jī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 '評分次數(shù)', 
 `total` int(11) NOT NULL default '0' COMMENT '總分', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

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

您可能感興趣的文章: