jQuery+PHP+MySQL实现星级评分

本文主要介绍使用jQuery+PHP+MySQL实现星际评论

在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用jQuery实现五星好评功能。
一、页面布局代码：

                <div class="rate">
                    <div class="big_rate">
                        <span rate="2">&nbsp;</span>
                        <span rate="4">&nbsp;</span>
                        <span rate="6">&nbsp;</span>
                        <span rate="8">&nbsp;</span>
                        <span rate="10">&nbsp;</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>

二、页面样式代码：

        <style type="text/css">
            .rate{width:600px; margin:100px auto; color:#51555c; 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(images/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(images/star.gif) left top;}
            #my_rate{ position:absolute; margin-top:40px; margin-left:100px}
            #my_rate span{color:#dd5400; font-weight:bold}
        </style>

三、jquery代码
引入jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

ajax传输代码（核心代码）
<!--wxfollow start-->

<script type="text/javascript">
            $(function() {
                get_rate(<?php echo $aver; ?>);
            });
            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);
                })
            }
        </script>

<!--wxfollow end-->
四、用到的PHP文件代码
ajax.php
<!--wxfollow start-->

<?php

/**
 * @处理评分
 */
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'])) < 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;
        }
        //设置COOKIE
        setcookie("person", $cookiestr, time() + 3600 * 365);
        setcookie("rate_time", time(), time() + 3600 * 365);
        echo $aver;
    }
}

function getip() {
    if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")) {
        $ip = getenv("HTTP_CLIENT_IP");
    } else
    if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")) {
        $ip = getenv("HTTP_X_FORWARDED_FOR");
    } else
    if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")) {
        $ip = getenv("REMOTE_ADDR");
    } else
    if (isset($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")) {
        $ip = $_SERVER['REMOTE_ADDR'];
    } else {
        $ip = "unknown";
    }
    return ($ip);
}

?>

<!--wxfollow end-->
connect.php

<?php
/**
 * @数据库链接
*/
$host="localhost";
$db_user="root";
$db_pass="123456";
$db_name="demo";
$timezone="Asia/Shanghai";
$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");
header("Content-Type: text/html; charset=utf-8");
?>

五、数据库表结构
raty表结构

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 AUTO_INCREMENT=2 ;

六、用到素材

直接另存为star.gif保存到运行目录下的images下即可
七、运行效果：