Chinaunix首页 | 论坛 | 博客
  • 博客访问: 394735
  • 博文数量: 25
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 125
  • 用 户 组: 普通用户
  • 注册时间: 2018-07-07 22:36
文章分类
文章存档

2020年(9)

2019年(14)

2018年(2)

我的朋友

分类: PHP

2020-01-20 09:27:05

jQuery+PHP实现购物商城常用的星级评分效果,我们在商城平台购买商品后,会有个评分功能,本实例就来说说实现方法。

首先我们在.rate里面加入显示的灰星星div#big_rate、亮星星div#big_rate_up、分数span#s及span#g和提示信息div#my_rate。
接着我们写一个获取评分的方法get_rate() :
  1. function get_rate(rate) {
  2.     rate = rate.toString();
  3.     var s;
  4.     var g;
  5.     $("#g").show();
  6.     if (rate.length >= 3) {
  7.         s = 10;
  8.         g = 0;
  9.         $("#g").hide();
  10.     } else if (rate == "0") {
  11.         s = 0;
  12.         g = 0;
  13.     } else {
  14.         s = rate.substr(0, 1);
  15.         g = rate.substr(1, 1);
  16.     }
  17.     $("#s").text(s);
  18.     $("#g").text("." + g);
  19.     $(".big_rate_up").animate({
  20.         width: (parseInt(s) + parseInt(g) / 10) * 14,
  21.         height: 26
  22.     },
  23.     1000);
  24.     $(".big_rate span").each(function() {
  25.         $(this).mouseover(function() {
  26.             $(".big_rate_up").width($(this).attr("rate") * 14);
  27.             $("#s").text($(this).attr("rate"));
  28.             $("#g").text("");
  29.         }).click(function() {
  30.             var score = $(this).attr("rate");
  31.             $("#my_rate").html("您的评分:" + score + "");
  32.             $.ajax({
  33.                 type: "POST",
  34.                 url: "ajax.php",
  35.                 data: "score=" + score,
  36.                 success: function(msg) {
  37.                     //alert(msg);
  38.                     if (msg == 1) {
  39.                         $("#my_rate").html("您已经评过分了!");
  40.                     } else if (msg == 2) {
  41.                         $("#my_rate").html("您评过分了!");
  42.                     } else {
  43.                         get_rate(msg);
  44.                     }
  45.                 }
  46.             });
  47.         })
  48.     }) $(".big_rate").mouseout(function() {
  49.         $("#s").text(s);
  50.         $("#g").text("." + g);
  51.         $(".big_rate_up").width((parseInt(s) + parseInt(g) / 10) * 14);
  52.     })
  53. }

然后直接调用该方法即可:
  1. get_rate(<?php echo $aver; ?>);

ajax.php接收前端发送过来的分数值,通过cookie判断用户IP和评分时间,防止重复评分。
  1. $score = $_POST['score'];
  2. if (isset($score)) {
  3.     $cookiestr = getip();
  4.     $time = time();
  5.     if (isset($_COOKIE['person']) && $_COOKIE['person'] == $cookiestr) {
  6.         echo "1";
  7.     } elseif (isset($_COOKIE['rate_time']) && ($time - intval($_COOKIE['rate_time'])) < 60) {
  8.         echo "2";
  9.     } else {
  10.         $query = mysql_query("update raty set voter=voter+1,total=total+'$score' where id=1");
  11.         $query = mysql_query("select * from raty where id=1");
  12.         $rs = mysql_fetch_array($query);
  13.         $aver = 0;
  14.         if ($rs) {
  15.             $aver = $rs['total'] / $rs['voter'];
  16.             $aver = round($aver, 1) * 10;
  17.         }
  18.         //设置COOKIE
  19.         setcookie("person", $cookiestr, time() + 3600 * 365);
  20.         setcookie("rate_time", time(), time() + 3600 * 365);
  21.         echo $aver;
  22.     }
  23. }

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评分表里面加一条数据。
本文转自: 转载请注明出处!
阅读(1429) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~