jQuery+PHP实现星级评分效果

码农公社  210.net.cn   210= 1024  10月24日一个重要的节日--码农(程序员)节

jQuery+PHP实现星级评分效果,评分功能比较常用,例如商城平台就会有个评分功能,本实例就来说说实现方法。


Jq脚本如下:


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

    }) 

}


然后直接调用该方法即可:

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




php后台脚本如下:


ajax.php接收前端发送过来的分数值,通过cookie判断用户IP和评分时间,防止重复评分。

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


raty表结构:


1 CREATE TABLE IF NOT EXISTS `raty` (  
2   `id` int(11) NOT NULL auto_increment,  
3   `voter` int(10) NOT NULL default '0' COMMENT '评分次数',  
4   `total` int(11) NOT NULL default '0' COMMENT '总分',  
5   PRIMARY KEY  (`id`)  
6 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;


最后记得在raty评分表里面加一条数据。

评论