The effect achieved by this example:

The transition animation shows the scoring operation.

Update the average score and user-reviewed scores in a timely manner.

The background restricts users from repeating scoring operations,And displayed in time on the front end.


    <span rate="2"></span>
    <span rate="4"></span>
    <span rate="6"></span>
    <span rate="8"></span>
    <span rate="10"></span>

The html structure is divided into div #big_rate for displaying gray stars, div #big_rate_up for bright stars, span #s and span #g, and prompt information div #my_rate.


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


Let's first write a function get_rate () to handle the scoring front-end interaction.

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

The function get_rate (rate) needs to pass one parameter:rate, which is used to represent the average score.Then we need to handle the parameter rate in the function:

rate=rate.tostring ();
  var s;
  var g;
  $("#g"). show ();
  if (rate.length>= 3) {
    $("#g"). hide ();
  } else if (rate == "0") {
  } else {
    s=rate.substr (0,1);
    g=rate.substr (1,1);
  $("#s"). text (s);
  $("#g"). text ("." + g);

The average score rate is converted into a format such as:6.8, which is used to display the average score in the front end.

Next, as we mouse over the stars,Will produce an animation effect,The width of the bright star changes as you move the mouse.The score value also changes.

$(". 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 asynchronously submitted to background processing

The above code is not difficult to understand,Need to explain why the width is multiplied by 14?Because the width of the picture is 28, a total of 5 pictures represent a perfect score of 10, and the calculated unit width (1 point) is (5 * 28)/10=14.

When clicking on the stars,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 have overrated!&/;span>");
      } else if (msg == 2) {
        $("#my_rate"). html ("<span>You overrated!</span>");
      } else {
        get_rate (msg);

not difficult to see,When you click on the stars,The front end sends an ajax request to the background program post.php in post mode, passing the parameter score as the number of ratings.The background program is determining the number of ratings.Proceed accordinglySend different processing information to the front end according to the processing result.

And do n’t forget,The point value should be restored when the mouse leaves the star:

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

With the function get_rate () completed, we only need to call it when the page loads.

$(function () {
  get_rate (88);


The post.php program needs to process:receive the score value sent from the front end,Determine user ip and rating time through cookies,Prevent duplicate scoring.

include_once ("connect.php");//Connect to the 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"]))&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;
    //Set cookies
    setcookie ("person", $cookiestr, time () + 3600);
    setcookie ("rate_time", time (), time () + 3600);
    echo $aver;

Obviously, when a user submits a rating,The program will record the user's IP and time to prevent duplicate submissions,When the user is rating for the first time,The program performs the operation,Add score values ​​to the data table,And calculate the average score and return to the front-end call.

The method getip () on how to get the user's IP is already available in the demo.I wo n’t focus on it here.Please download it by yourself.

Finally, attach the mysql table structure:

create table if not exists `raty` (
 `id` int (11) not null auto_increment, `voter` int (10) not null default" 0 "comment" Number of ratings ", `total` int (11) not null default" 0 "comment" Total Score ", primary key (`id`)
) engine=myisam default charset=utf8;
  • Previous Simple Web voting program code implemented by JSP
  • Next Usage and explanation of Closure class in PHP