jQuery PHP star rating implementation method

jQuery PHP star rating implementation method_jquery

WBOY

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

Original

1788 people have browsed it

The effect achieved in this example:

Transition animation showing rating action.
Update average scores and user-rated scores in a timely manner.
The background restricts users from repeating rating operations and displays them in a timely manner on the 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>

Copy after login

The HTML structure is divided into gray star div#big_rate, bright star div#big_rate_up, scores span#s and span#g and prompt information 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}

Copy after login

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

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

Copy after login

The function get_rate(rate) needs to pass a parameter: rate, which is used to represent the average score. Next, the parameter rate must be processed in the function:

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

Copy after login

Convert the average score rate into a format such as: 6.8, which is used to display the average score on the front end.
Next, when we slide the mouse towards the star, an animation effect will be generated. The width of the bright star will change as the mouse slides, and the score value will also change accordingly.

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

Copy after login

The above code is not difficult to understand. What needs to be explained is why the width should be multiplied by 14? Because the width of the picture is 28, a total of 5 pictures represents a full score of 10 points. The calculated width of the unit score (1 point) is (5*28)/10=14.
When clicking 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("您的评分：<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); 
      } 
    } 
  });

Copy after login

It is not difficult to see that when a star is clicked, the front end sends an ajax request to the background program post.php in POST mode, passing the parameter score, which is the score. After determining the score, the background program performs corresponding processing and sends different processing information to the front end based on the processing results.
And don’t forget, the score 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); 
})

Copy after login

The function get_rate() is completed, we only need to call it when the page is loaded.

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

Copy after login

PHP
The post.php program needs to process: receiving the score value sent by the front end, determining the user IP and scoring time through cookies, and preventing repeated scoring.

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

Copy after login

Obviously, when the user submits a rating once, the program will record the user's IP and time to prevent repeated submissions. When the user rates for the first time, the program performs operations, adds the rating value to the data table, and calculates The average score is returned to the frontend call.
The method getip() on how to obtain the user's IP is already available in the DEMO. It will not be introduced here. Please download it 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 '评分次数', 
 `total` int(11) NOT NULL default '0' COMMENT '总分', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Copy after login

The above is the jQuery PHP star rating implementation method. I hope it will be helpful to everyone's learning.