jQuery PHP implémentation du classement par étoiles method_jquery

L'effet obtenu dans cet exemple :

Animation de transition montrant l'action de notation.
Mettez à jour les scores moyens et les scores évalués par les utilisateurs en temps opportun.
L'arrière-plan empêche les utilisateurs de répéter les opérations de notation et les affiche en temps opportun sur le front-end.
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> 

La structure HTML est divisée en étoiles grises div#big_rate, étoiles brillantes div#big_rate_up, scores span#s et span#g et informations rapides 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
Écrivons d'abord une fonction get_rate() pour gérer l'interaction frontale de la notation.

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

La fonction get_rate(rate) doit passer un paramètre : rate, qui sert à représenter le score moyen. Ensuite, le paramètre taux doit être traité dans la fonction :

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

Convertissez le taux de score moyen dans un format tel que : 6,8, qui est utilisé pour afficher le score moyen sur le front-end.
Ensuite, lorsque nous faisons glisser la souris vers l'étoile, un effet d'animation sera généré. La largeur de l'étoile brillante changera à mesure que la souris glisse, et la valeur du score changera également en conséquence.

$(".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异步提交给后台处理 
    }) 
}) 

Le code ci-dessus n'est pas difficile à comprendre. Ce qu'il faut expliquer, c'est pourquoi la largeur doit être multipliée par 14 ? Étant donné que la largeur de l'image est de 28, un total de 5 images représente un score complet de 10 points. La largeur calculée du score unitaire (1 point) est (5*28)/10=14.
Lorsque vous cliquez sur l'étoile, vous devez envoyer une requête ajax à l'adresse de l'arrière-plan pour interagir avec l'arrière-plan.

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); 
      } 
    } 
  }); 

Il n'est pas difficile de voir que lorsqu'on clique sur une étoile, le front-end envoie une requête ajax au programme d'arrière-plan post.php en mode POST, en passant le paramètre score, qui est le score. Après avoir déterminé le score, le programme d'arrière-plan effectue le traitement correspondant et envoie différentes informations de traitement au frontal en fonction des résultats du traitement.
Et n'oubliez pas, le score doit être rétabli lorsque la souris quitte l'étoile :

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

La fonction get_rate() est terminée, il suffit de l'appeler au chargement de la page.

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

PHP
Le programme post.php doit traiter : recevoir la valeur de score envoyée par le front-end, déterminer l'adresse IP de l'utilisateur et le temps de notation via les cookies, et empêcher les notations répétées.

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

Évidemment, lorsque l'utilisateur soumet une note une fois, le programme enregistrera l'adresse IP et l'heure de l'utilisateur pour éviter des soumissions répétées. Lorsque l'utilisateur évalue pour la première fois, le programme effectue des opérations, ajoute la valeur de la note au tableau de données, et calcule Le score moyen est renvoyé à l'appel frontend.
La méthode getip() permettant d'obtenir l'adresse IP de l'utilisateur est déjà disponible dans la DEMO. Elle ne sera pas présentée ici. Veuillez la télécharger vous-même.
Enfin, attachez la structure de la table 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; 

Ce qui précède est la méthode de mise en œuvre du classement par étoiles jQuery PHP. J'espère qu'elle sera utile à l'apprentissage de chacun.