
jQuery PHP implements the star rating effect commonly used in shopping malls. After we purchase goods on the mall platform, there will be a rating function. This example will explain the implementation method.

First we add the displayed gray star p#big_rate, bright star p#big_rate_up, fraction span#s and span#g and prompt message p#my_rate to .rate .
Then we write a method get_rate() to get the rating:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | function get_rate(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);
$( ".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 () {
var score = $(this).attr( "rate" );
$( "#my_rate" ).html( "您的评分:<span>" + score + "</span>" );
$.ajax({
type: "POST" ,
url: "ajax.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);
}
}
});
})
}) $( ".big_rate" ).mouseout( function () {
$( "#s" ).text(s);
$( "#g" ).text( "." + g);
$( ".big_rate_up" ).width((parseInt(s) + parseInt(g) / 10) * 14);
})
}
|
Copy after login
Then just call the method directly:
1 | get_rate(<?php echo $aver ; ?>);
|
Copy after login
ajax.php receives the score value sent from the front end and determines the user IP and scoring time through cookies to prevent repeated scoring.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $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'])) < 60) {
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 = 0;
if ( $rs ) {
$aver = $rs ['total'] / $rs ['voter'];
$aver = round ( $aver , 1) * 10;
}
setcookie( "person" , $cookiestr , time() + 3600 * 365);
setcookie( "rate_time" , time(), time() + 3600 * 365);
echo $aver ;
}
}
|
Copy after login
raty table structure:
1 2 3 4 5 6 | 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
Finally, remember to add a piece of data to the raty score table.
This article comes from php Chinese website, php tutorial column, welcome to learn!
The above is the detailed content of jQuery+PHP implements the star rating effect commonly used in shopping malls. For more information, please follow other related articles on the PHP Chinese website!