jQuery PHP-Sternebewertungsimplementierung method

jQuery PHP-Sternebewertungsimplementierung method_jquery

WBOY

Freigeben： 2016-05-16 15:37:36

Original

1788 Leute haben es durchsucht

Der in diesem Beispiel erzielte Effekt:

Übergangsanimation, die die Bewertungsaktion zeigt.
Aktualisieren Sie die durchschnittlichen und vom Benutzer bewerteten Ergebnisse zeitnah.
Der Hintergrund verhindert, dass Benutzer wiederholte Bewertungsvorgänge ausführen, und zeigt diese zeitnah im Frontend an.
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>

Nach dem Login kopieren

Die HTML-Struktur ist in Gray Star div#big_rate, Bright Star div#big_rate_up, Scores span#s und span#g und Prompt Information div#my_rate unterteilt.
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}

Nach dem Login kopieren

jQuery
Schreiben wir zunächst eine Funktion get_rate(), um die Front-End-Interaktion der Bewertung zu verarbeiten.

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

Nach dem Login kopieren

Die Funktion get_rate(rate) muss einen Parameter übergeben: rate, der zur Darstellung der durchschnittlichen Punktzahl verwendet wird. Als nächstes muss der Parameter Rate in der Funktion verarbeitet werden:

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

Nach dem Login kopieren

Konvertieren Sie die durchschnittliche Punktzahl in ein Format wie: 6,8, das zur Anzeige der durchschnittlichen Punktzahl im Frontend verwendet wird.
Wenn wir als Nächstes die Maus in Richtung des Sterns bewegen, wird ein Animationseffekt erzeugt, während sich die Breite des hellen Sterns ändert, und auch der Punktewert ändert sich entsprechend.

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

Nach dem Login kopieren

Der obige Code ist nicht schwer zu verstehen. Es muss erklärt werden, warum die Breite mit 14 multipliziert werden sollte. Da die Breite des Bildes 28 beträgt, ergeben insgesamt 5 Bilder eine volle Punktzahl von 10 Punkten. Die berechnete Breite der Einheitspunktzahl (1 Punkt) beträgt (5*28)/10=14.
Wenn Sie auf den Stern klicken, müssen Sie eine Ajax-Anfrage an die Hintergrundadresse senden, um mit dem Hintergrund zu interagieren.

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

Nach dem Login kopieren

Es ist nicht schwer zu erkennen, dass das Frontend beim Klicken auf einen Stern im POST-Modus eine Ajax-Anfrage an das Hintergrundprogramm post.php sendet und dabei den Parameter Score übergibt, der der Score ist. Nach der Ermittlung der Punktzahl führt das Hintergrundprogramm eine entsprechende Verarbeitung durch und sendet basierend auf den Verarbeitungsergebnissen unterschiedliche Verarbeitungsinformationen an das Frontend.
Und vergessen Sie nicht, der Punktestand sollte wiederhergestellt sein, wenn die Maus den Stern verlässt:

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

Nach dem Login kopieren

Die Funktion get_rate() ist abgeschlossen, wir müssen sie nur aufrufen, wenn die Seite geladen ist.

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

Nach dem Login kopieren

PHP
Das Programm post.php muss Folgendes verarbeiten: Empfangen des vom Front-End gesendeten Bewertungswerts, Bestimmen der Benutzer-IP und Bewertungszeit mithilfe von Cookies sowie Verhindern einer wiederholten Bewertung.

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

Nach dem Login kopieren

Wenn der Benutzer einmal eine Bewertung abgibt, zeichnet das Programm natürlich die IP-Adresse und die Uhrzeit des Benutzers auf, um wiederholte Übermittlungen zu verhindern. Wenn der Benutzer zum ersten Mal eine Bewertung abgibt, führt das Programm Vorgänge aus und fügt den Bewertungswert zur Datentabelle hinzu. und berechnet Die durchschnittliche Punktzahl wird an den Frontend-Aufruf zurückgegeben.
Die Methode getip() zum Erhalten der IP des Benutzers ist bereits in der DEMO verfügbar. Sie wird hier nicht vorgestellt. Bitte laden Sie sie selbst herunter.
Hängen Sie abschließend die MySQL-Tabellenstruktur an:

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;

Nach dem Login kopieren

Das Obige ist die Implementierungsmethode für die jQuery-PHP-Sternebewertung. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird.