jQuery+PHP implements the star rating effect commonly used in shopping malls

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:

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) { 
                    //alert(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); 
    }) 
}

Then just call the method directly:

get_rate(<?php echo $aver; ?>);

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.

$score = $_POST['score']; 
if (isset($score)) { 
    $cookiestr = getip(); 
    $time = time(); 
    if (isset($_COOKIE['person']) && $_COOKIE['person'] == $cookiestr) { 
        echo "1"; 
    } elseif (isset($_COOKIE[&#39;rate_time&#39;]) && ($time - intval($_COOKIE[&#39;rate_time&#39;])) < 60) { 
        echo "2"; 
    } else { 
        $query = mysql_query("update raty set voter=voter+1,total=total+&#39;$score&#39; where id=1"); 
        $query = mysql_query("select * from raty where id=1"); 
        $rs = mysql_fetch_array($query); 
        $aver = 0; 
        if ($rs) { 
            $aver = $rs[&#39;total&#39;] / $rs[&#39;voter&#39;]; 
            $aver = round($aver, 1) * 10; 
        } 
        //设置COOKIE 
        setcookie("person", $cookiestr, time() + 3600 * 365); 
        setcookie("rate_time", time(), time() + 3600 * 365); 
        echo $aver; 
    } 
}

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

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!