电影星星评分实现

js代码

// 实现星星评分功能
$(function(){
  //  前端特效
  $('#rank_pic').on('mouseover', 'img', function(){
    // 把当前图片左边的所有图片变成金色[1,2] $(this).prevAll()获取之前的所有兄弟src是属性的内容
    $(this).prevAll().attr('src',function(msg, src){
      src = src.replace('4','2'); // 把4替换成2
      return src.replace('3','1'); // 把3替换成1
    });
    // 把当前图片替换成金色[1,2]
    $(this).attr('src',function(msg, src){
      src = src.replace('4','2'); // 把4替换成2
      return src.replace('3','1'); // 把3替换成1
    });
    // 把当前图片左边的所有图片变成灰色[3,4] $(this).nextAll()获取所有的后边的兄弟
    $(this).nextAll().attr('src',function(msg, src){
      src = src.replace('2','4'); // 把2替换成4
      return src.replace('1','3'); // 把1替换成3
    });
  });

  // ajax更新评分值和评分人数
  $('#rank_pic').on('click','img', function(){
    var cur   = $(this).index();
    var data  = {
      'aid'   : $('#rank_pic').data('aid'), // 获取 #rank_pic的自定义属性 data-aid
      'score' : (cur+1)/2,
    };
    $.post('/plus/score.php', data, function(msg){
      if( msg.status ){
        // 更新页面中的评分值
        // parseFloat 把字符串转成小数
        // toFixed 保留浮点数的小数点后两位[是数字对象中的方法，字符串没有这个方法]
        $('#rank').html( parseFloat(msg.data.score).toFixed(2) );
        $('#rank_num').html(msg.data.score_rec);
        alert('评分成功！');
      }else{
        alert(msg.data.message);
      }
      // 解除评分功能的鼠标事件
      $('#rank_pic').off('click');
      $('#rank_pic').off('mouseover');
    },'json');
  });

  // 页面加载完成以后，获取当前电影的评分和评分人数
    var data  = {
      'aid'   : $('#rank_pic').data('aid'), // 获取 #rank_pic的自定义属性 data-aid
    };
    $.post('/plus/score.php', data, function(msg){
      if( msg.status ){
        // 更新页面中的评分值
        $('#rank').html( parseFloat(msg.data.score).toFixed(2) );
        $('#rank_num').html(msg.data.score_rec);
      }
    },'json');
});

php代码

GetOne("SELECT * FROM `dede_addonmovie` WHERE `aid` = $aid");
    // var_dump($data);die;
    // 如果没有发送评分值过来，则默认查询当前aid对应的电影评分
    if( $score <= 0 ){
      $message = [
        'status' => true,
        'data'   => [
          'score_rec' => $data['pfrs'],
          'score' => $data['pingfen'],
        ],
      ];
      echo json_encode($message);die;
    }

            // 使用redis实现评分次数的限制
            // $ip = $_SERVER['REMOTE_ADDR'];
            // $redis = new Redis();
            // $redis->connect('127.0.0.1');
            // // 从list列表提取对应下标数据
            // $key = $redis->get($ip.'-'.date('Y-md') );
            // if( $key < 5){
            //   $redis->set($ip.'-'.date('Y-md'), $key+1);
            // }else{
            //   $message = [
            //     'status' => false,
            //     'data'   => [
            //       'message' => '您已经评分了',
            //     ],
            //   ];
            //   echo json_encode($message);die;
            // }

    // 把评分人数和评分值，存储数据库中并返回给前端
    $old_score = $data['pingfen'];         // 旧评分[平均分]
    $old_score_rec = $data['pfrs']; // 旧评分人数
    $new_score_rec = $old_score_rec+1;   // 新评分人数
    // 新的平均分 = (旧平均分 * 旧的人数 + 新的评分) / 新评分人数
    $new_score = ( $old_score * $old_score_rec + $score ) /  $new_score_rec;
    $sql = "UPDATE `dede_addonmovie` SET `pingfen`=$new_score, `pfrs`=$new_score_rec WHERE `aid`= $aid";
    $res = $dsql->ExecuteNoneQuery2($sql);
    if( $res ){
      $message = [
        'status' => true,
        'data'   => [
          'score_rec' => $new_score_rec,
          'score' => $new_score,
        ],
      ];
    }else{
      $message = [
        'status' => false,
        'data'   => [],
      ];
    }
    echo json_encode($message);die;
  }