jQuery PHP スター評価の実装 method_jquery

この例で達成される効果:

評価アクションを示す遷移アニメーション。
平均スコアとユーザー評価スコアをタイムリーに更新します。
バックグラウンドは、ユーザーが評価操作を繰り返すことを制限し、フロントエンドにタイムリーに評価操作を表示します。
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.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); 

平均スコア率を 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 リクエストを送信し、スコアであるパラメーター スコアを渡すことは難しくありません。スコアを決定した後、バックグラウンドプログラムは対応する処理を実行し、処理結果に基づいてさまざまな処理情報をフロントエンドに送信します。
そして忘れないでください、マウスが星から離れるとスコアは復元されるはずです:

$(".big_rate").mouseout(function(){ 
  $("#s").text(s); 
  $("#g").text("."+ g); 
  $(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14); 
}) 

関数 get_rate() は完了しました。ページがロードされたときに呼び出すだけで済みます。

$(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() はデモですでに利用可能です。ここでは紹介しませんので、自分でダウンロードしてください。
最後に、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のスター評価の実装方法であり、皆様の学習のお役に立てば幸いです。