Jquery+php Star Scoring Method _jquery

This example implements the effect:

The gradient animation shows the scoring operation.
Update the average score and the score of the user in time.
Background limit user repeat scoring operation, and in the front end timely display.
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= "Ten" > </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> 

The HTML structure is divided into gray star Div#big_rate, bright Star div#big_rate_up, fractional span#s and SPAN#G and hint information div#my_rate.
CSS

 rate{width:600px margin:100px auto; font-size:14px; Position:relative 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
Let's start by writing a function get_rate () to handle the front-end interaction of the score.

function Get_rate (rate) { 
  .... Do some thing 
} 

function get_rate (rate), you need to pass a parameter: rate, to represent the average score. Then in the function to process the parameter 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); 

The average score rate is converted to a format such as: 6.8 for the front end display average score.
Next, when we slide the mouse to the stars, we will produce an animated effect, the width of the bright stars will change with the mouse, the fractional value will also change.

$ (". Big_rate_up"). Animate ({width: (parseint (s) +parseint (g)/10) * 14,height:26},1000); 
$ (". Big_rate span"). each (the function () { 
    $ (this). MouseOver (function () { 
      $ (". Big_rate_up"). Width (a). attr ("rate"); 
      $ ("#s"). Text ($ (this). attr ("rate")); 
      $ ("#g"). Text (""); 
    Click (function () { 
      ... Ajax asynchronously submitted to background processing}) 
} 

The above code is not difficult to understand, the need to explain why the width is multiplied by 14? Because the width of the picture is 28, a total of 5 pictures for a full score of 10 points, calculate the unit score (1) of the width of (5*28)/10=14.
When you click the Star, you need to send an AJAX request to the background address to interact with the background.

var score = $ (this). attr ("rate"); 
$ ("#my_rate"). HTML ("Your rating:<span>" +score+ "</span>"); 
  $.ajax ({ 
     type: "POST", 
     URL: "post.php", 
     data: "Score=" +score, 
     success:function (msg) { 
      if (msg== 1) { 
        $ ("#my_rate"). HTML ("<span> you've gone overboard!" </span> "); 
      } else if (msg==2) { 
        $ ("#my_rate"). HTML ("<span> you went overboard!" </span> "); 
      } else{ 
        get_rate (msg);}} 
  ); 

It is easy to see that when the star is clicked, the front end sends the AJAX request to the Daemon post.php by post, passing the parameter score that is the score number. Background program in the determination of the number of scores, the corresponding processing, according to the processing results to the front end to send different processing information.
And don't forget, when the mouse leaves the stars, you should restore the values:

$ (". Big_rate"). Mouseout (function () { 
  $ ("#s"). Text (s); 
  $ ("#g"). Text ("." + g); 
  $ (". Big_rate_up"). Width ((parseint (s) +parseint (g)/10); 
}) 

After completing the function get_rate (), we only need to call on the page when loading is OK.

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

Php
Post.php program needs to deal with: Receive front-end sent over the score value, through cookies to determine the user IP and scoring time, to prevent repeated scoring.

 include_once (' connect.php ');//Connection Database $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 '])) < {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; 
    Set cookie Setcookie ("person", $cookiestr, Time () + 3600); 
    Setcookie ("Rate_time", Time (), time () + 3600); 
  Echo $aver; } 
} 

Obviously, when a user submits a rating, the program records the user's IP and time to prevent repeated submissions, when the user is the first time to score, the program performs the operation, adds the score value to the datasheet, and calculates the average score returned to the front-end call.
about how to obtain the User IP method GetIP () has already had in the demo, here does not do the key introduction, please everybody to download.
Finally attach the MySQL table structure:

CREATE TABLE IF not EXISTS ' Raty ' ( 
 ' id ' int (one) not null auto_increment, 
 ' voter ' int (a) NOT null default ' 0 ' COM ment ' scoring Times ', 
 ' total ' int (one) not NULL default ' 0 ' COMMENT ' score ', 
 PRIMARY KEY (' id ') 
engine=myisam default CHA Rset=utf8; 

The above is the Jquery+php Star score realization method, hope to be helpful to everybody's study.