php+mysql+html實現五角星評論功能

weixin_33866037發表於2018-07-24

五角星評論功能經常在一些文章內容底部評論見到，就比如淘寶上的星級評論，原理都差不多，
html部分

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星級評分</title>
<link href="start.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="start.js" ></script>
<script type="text/javascript">
$(function(){
    get_rate_a(<?php echo $a_score;?>,'a');
    get_rate_b(<?php echo $b_score;?>,'b');
    get_rate_c(<?php echo $c_score;?>,'c');
    get_rate_d(<?php echo $d_score;?>,'d');
    get_rate_e(<?php echo $e_score;?>,'e');
});
</script>
</head>
<body>
<div id="main" class="main">
  <div class="rate_a">
       <em>視訊是否全面展示了整個手術流程</em>
     <div class="big_rate_a" >
        <span rate_a="1">&nbsp;</span>
        <span rate_a="2">&nbsp;</span>
        <span rate_a="3">&nbsp;</span>
        <span rate_a="4">&nbsp;</span>
        <span rate_a="5">&nbsp;</span>
        <div style="width:0px;" class="big_rate_up_a"></div>
     </div>
     <p><span id="s_a" class="s_a"></span></p>
     <div id="my_rate_a"></div>
     <span class="pf" id="span_count_a">(<?php echo $a_rs['a_total_num']==null?0:$a_rs['a_total_num'];?>人評分，平均分為<?php echo $a_rs['a_avg_score']==null?0:$a_rs['a_avg_score'];?>)</span>
  </div>

 <div class="rate_b">
     <em>手術操作是否滿足疾病治療的要求</em>
     <div class="big_rate_b">
        <span rate_b="1">&nbsp;</span>
        <span rate_b="2">&nbsp;</span>
        <span rate_b="3">&nbsp;</span>
        <span rate_b="4">&nbsp;</span>
        <span rate_b="5">&nbsp;</span>
        <div style="width:0px;" class="big_rate_up_b"></div>
     </div>
     <p><span id="s_b" class="s_b"></span></p>
     <div id="my_rate_b"></div>
     <span class="pf" id="span_count_b">(<?php echo $b_rs['b_total_num']==null?0:$b_rs['b_total_num'];?>人評分，平均分為<?php echo $b_rs['b_avg_score']==null?0:$b_rs['b_avg_score'];?>)</span>
  </div>

  <div class="rate_c">
       <em>手術操作的器械使用是否恰當</em>
     <div class="big_rate_c">
        <span rate_c="1">&nbsp;</span>
        <span rate_c="2">&nbsp;</span>
        <span rate_c="3">&nbsp;</span>
        <span rate_c="4">&nbsp;</span>
        <span rate_c="5">&nbsp;</span>
        <div style="width:0px;" class="big_rate_up_c"></div>
     </div>
     <p><span id="s_c" class="s_c"></span></p>
     <div id="my_rate_c"></div>
     <span class="pf" id="span_count_c">(<?php echo $c_rs['c_total_num']==null?0:$c_rs['c_total_num'];?>人評分，平均分為<?php echo $c_rs['c_avg_score']==null?0:$c_rs['c_avg_score'];?>)</span>
  </div>

  <div class="rate_d">
      <em>手術操作是否符合相同療效下最小損傷的概念</em>
     <div class="big_rate_d">
        <span rate_d="1">&nbsp;</span>
        <span rate_d="2">&nbsp;</span>
        <span rate_d="3">&nbsp;</span>
        <span rate_d="4">&nbsp;</span>
        <span rate_d="5">&nbsp;</span>
        <div style="width:0px;" class="big_rate_up_d"></div>
     </div>
     <p><span id="s_d" class="s_d"></span></p>
     <div id="my_rate_d"></div> 
     <span class="pf" id="span_count_d">(<?php echo $d_rs['d_total_num']==null?0:$d_rs['d_total_num'];?>人評分，平均分為<?php echo $d_rs['d_avg_score']==null?0:$d_rs['d_avg_score'];?>)</span>
  </div>
  <div class="rate_e">
      <em>如存在意外損傷，其是否處理得當</em>
     <div class="big_rate_e">
        <span rate_e="1">&nbsp;</span>
        <span rate_e="2">&nbsp;</span>
        <span rate_e="3">&nbsp;</span>
        <span rate_e="4">&nbsp;</span>
        <span rate_e="5">&nbsp;</span>
        <div style="width:0px;" class="big_rate_up_e"></div>
     </div>
     <p><span id="s_e" class="s_e"></span></p>
     <div id="my_rate_e"></div>
     <span class="pf" id="span_count_e">(<?php echo $e_rs['e_total_num']==null?0:$e_rs['e_total_num'];?>人評分，平均分為<?php echo $e_rs['e_avg_score']==null?0:$e_rs['e_avg_score'];?>)</span>
  </div>
</div>
</body>
</html>

index.php

<?php
include_once('connect.php');
$vid = 3;
$uid = 5;
//查詢初始值
$query=mysql_query("select `id`,`a_score`,`b_score`,`c_score`,`d_score`,`e_score` from start_info where uid=$uid and vid=$vid ");
$rs=mysql_fetch_array($query);
$a_score = 0;
$b_score = 0;
$c_score = 0;
$d_score = 0;
$e_score = 0;

if (isset($rs['a_score'])){
    $a_score=$rs['a_score'];
}
if (isset($rs['b_score'])){
    $b_score=$rs['b_score'];
}
 if (isset($rs['c_score'])){
     $c_score=$rs['c_score'];
 }

 if (isset($rs['d_score'])){
     $d_score=$rs['d_score'];
 }

 if (isset($rs['e_score'])){
     $e_score=$rs['e_score'];
 }

$a_query = mysql_query("select a_total_num, ROUND(a_total_score/a_total_num,2) as a_avg_score from start_count  where a_total_score  <> 0 and vid=$vid");
$a_rs = mysql_fetch_array($a_query);

$b_query = mysql_query("select b_total_num, ROUND(b_total_score/b_total_num,2) as b_avg_score from start_count  where b_total_score  <> 0 and vid=$vid");
$b_rs = mysql_fetch_array($b_query);

$c_query = mysql_query("select c_total_num, ROUND(c_total_score/c_total_num,2) as c_avg_score from start_count  where c_total_score  <> 0 and vid=$vid");
$c_rs = mysql_fetch_array($c_query);

$d_query = mysql_query("select d_total_num, ROUND(d_total_score/d_total_num,2) as d_avg_score from start_count  where d_total_score  <> 0 and vid=$vid");
$d_rs = mysql_fetch_array($d_query);

$e_query = mysql_query("select e_total_num, ROUND(e_total_score/e_total_num,2) as e_avg_score from start_count  where e_total_score  <> 0 and vid=$vid");
$e_rs = mysql_fetch_array($e_query);

?>

start.js部分原始碼

//五角星評分
//TODO 增加新方法時  get_rate_a需要改
function get_rate_a(rate,rate_type){
    rate=rate.toString();
    var s = rate+"分";
    $("#s_"+rate_type).text(s);
    $(".big_rate_up_"+rate_type).animate({width:rate*28});
    $(".big_rate_"+rate_type+" span").each(function(){
        if(rate>0){//如果評過了就不再往下執行
             $(".big_rate_"+rate_type+" span").css("cursor","default");//講5角星的手勢樣式去掉
             $("#my_rate_"+rate_type).html("<span>您已經評過分了，您的評分是"+rate+"分</span>");
            return;
        } 
        $(this).mouseover(function(){
            $(".big_rate_up_"+rate_type).width($(this).attr("rate_"+rate_type) * 28 );//顯示選亮的星星
            $("#s_"+rate_type).text($(this).attr("rate_"+rate_type)+"分");//顯示你選的分數
        }).click(function(){
            $(".big_rate_"+rate_type+" span").unbind("mouseover");//禁用mouseover事件
            $(".big_rate_"+rate_type+" span").unbind("click");//禁用click事件
            $(".big_rate_"+rate_type+" span").css("cursor","default");//講5角星的手勢樣式去掉
            var score = $(this).attr("rate_"+rate_type);//顯示評分
            $.ajax({
               type: "POST",
               url: "action.php",
               data:rate_type+"_score="+score,
               success: function(msg){
                   eval("var msg_s = " +msg);//設定物件
                   msg_score = msg_s.a_score;
                   msg_total_num = msg_s.a_total_num;
                   msg_avg_score = msg_s.a_avg_score;
                   if(msg_score>0){
                      $("#my_rate_"+rate_type).html("<span>評分成功，您的評分是"+msg_score+"分！</span>");
                      $("#span_count_"+rate_type).text("("+msg_total_num+"人評分，平均分為"+msg_avg_score+")");
                   }
               }
            });
        })
    })
}

action.php用來處理post過來的資料

<?php
 include_once ('connect.php');
$a_score = 0;
$b_score = 0;
$c_score = 0;
$d_score = 0;
$e_score = 0;
if (isset($_POST['a_score'])){
    $a_score= $_POST['a_score'];
}
if (isset($_POST['b_score'])){
    $b_score=$_POST['b_score'];
}

if (isset($_POST['c_score'])){
    $c_score=$_POST['c_score'];
}

if (isset($_POST['d_score'])){
    $d_score=$_POST['d_score'];
}

if (isset($_POST['e_score'])){
    $e_score=$_POST['e_score'];
}
$vid = 3;
$uid = 5;

if (isset ($vid) && isset ($uid)) {
    $query_info_id_sql = mysql_query("select id from start_info where uid=$uid and vid=$vid");
    $query_info_id_rs = mysql_fetch_array($query_info_id_sql);
    // 如果星星資訊表裡面沒有資料，就插入
    if(!$query_info_id_rs){
        // 插入info表
        $ins_info_sql = "insert into start_info(`uid`,`vid`,`a_score`,`b_score`,`c_score`,`d_score`,`e_score`) values($uid,$vid,$a_score,$b_score,$c_score,$d_score,$e_score)";
        mysql_query($ins_info_sql);
        // 查詢info表
        $query_info_sql = mysql_query("select `a_score`,`b_score`,`c_score`,`d_score`,`e_score` from start_info where uid=$uid and vid=$vid");
        $query_info_rs = mysql_fetch_array($query_info_sql);
        // 查詢count表
        $query_count_sql = mysql_query("SELECT `id`, `vid`, `a_total_score`, `b_total_score`, `c_total_score`, `d_total_score`, `e_total_score`, `a_total_num`, `b_total_num`, `c_total_num`, `d_total_num`, `e_total_num` FROM `start_count` WHERE vid=$vid");
        $query_count_rs = mysql_fetch_array($query_count_sql);

        if(!$query_count_rs) {
            // 插入count表
            $ins_count_sql = "";
            if ($a_score > 0){
                $a_total_score = $query_count_rs['a_total_score'] + $a_score; // 最新總分
                $a_total_num = $query_count_rs['a_total_num'] + 1; // 最新總數
                $ins_count_sql = "INSERT INTO `start_count` (`vid`, `a_total_score`, `a_total_num`) VALUES ($vid, $a_total_score, $a_total_num)";
                mysql_query($ins_count_sql);
            }
            if ($b_score > 0){
                $b_total_score = $query_count_rs['b_total_score'] + $b_score; // 最新總分
                $b_total_num = $query_count_rs['b_total_num'] + 1; // 最新總數
                $ins_count_sql = "INSERT INTO `start_count` (`vid`, `b_total_score`, `b_total_num`) VALUES ($vid, $b_total_score, $b_total_num)";
                mysql_query($ins_count_sql);
            }
            if ($c_score > 0){
                $c_total_score = $query_count_rs['c_total_score'] + $c_score; // 最新總分
                $c_total_num = $query_count_rs['c_total_num'] + 1; // 最新總數
                $ins_count_sql = "INSERT INTO `start_count` (`vid`, `c_total_score`, `c_total_num`) VALUES ($vid, $c_total_score, $c_total_num)";
                mysql_query($ins_count_sql);
            }
            if ($d_score > 0){
                $d_total_score = $query_count_rs['d_total_score'] + $d_score; // 最新總分
                $d_total_num = $query_count_rs['d_total_num'] + 1; // 最新總數
                $ins_count_sql = "INSERT INTO `start_count` (`vid`, `d_total_score`, `d_total_num`) VALUES ($vid, $d_total_score, $d_total_num)";
                mysql_query($ins_count_sql);
            }
            if ($e_score > 0){
                $e_total_score = $query_count_rs['e_total_score'] + $e_score; // 最新總分
                $e_total_num = $query_count_rs['e_total_num'] + 1; // 最新總數
                $ins_count_sql = "INSERT INTO `start_count` (`vid`, `e_total_score`, `e_total_num`) VALUES ($vid, $e_total_score, $e_total_num)";
                mysql_query($ins_count_sql);
            }
        }else{
            if($a_score > 0){
                $update_count_sql = mysql_query("update start_count set a_total_score=a_total_score+$a_score,a_total_num=a_total_num+1 where vid=$vid");
            }elseif($b_score > 0){
                $update_count_sql = mysql_query("update start_count set b_total_score=b_total_score+$b_score,b_total_num=b_total_num+1 where vid=$vid");
            }elseif ($c_score > 0){
                $update_count_sql = mysql_query("update start_count set c_total_score=c_total_score+$c_score,c_total_num=c_total_num+1 where vid=$vid");
            }elseif ($d_score > 0){
                $update_count_sql = mysql_query("update start_count set d_total_score=d_total_score+$d_score,d_total_num=d_total_num+1 where vid=$vid");
            }elseif ($e_score > 0){
                $update_count_sql = mysql_query("update start_count set e_total_score=e_total_score+$e_score,e_total_num=e_total_num+1 where vid=$vid");
            }
        }

        // 查詢count表
        $query_count_sql = mysql_query("SELECT `id`, `vid`, `a_total_score`, `b_total_score`, `c_total_score`, `d_total_score`, `e_total_score`, `a_total_num`, `b_total_num`, `c_total_num`, `d_total_num`, `e_total_num`, ROUND(a_total_score/a_total_num,2) as a_avg_score, ROUND(b_total_score/b_total_num,2) as b_avg_score, ROUND(c_total_score/c_total_num,2) as c_avg_score, ROUND(d_total_score/d_total_num,2) as d_avg_score, ROUND(e_total_score/e_total_num,2) as e_avg_score FROM `start_count` WHERE vid=$vid");
        $query_count_rs = mysql_fetch_array($query_count_sql);

        // 將2個陣列合並$query_info_rs、$query_count_rs
        $rs = array_merge($query_info_rs, $query_count_rs);

        echo json_encode($rs);  
    } else {
        if($a_score > 0){
            $update_info_sql = mysql_query("update start_info set a_score=$a_score where uid=$uid and vid=$vid");
            $update_count_sql = mysql_query("update start_count set a_total_score=a_total_score+$a_score,a_total_num=a_total_num+1 where vid=$vid");
        }elseif($b_score > 0){
            $update_info_sql = mysql_query("update start_info set b_score=$b_score where uid=$uid and vid=$vid");
            $update_count_sql = mysql_query("update start_count set b_total_score=b_total_score+$b_score,b_total_num=b_total_num+1 where vid=$vid");
        }elseif ($c_score > 0){
            $update_info_sql = mysql_query("update start_info set c_score=$c_score where uid=$uid and vid=$vid");
            $update_count_sql = mysql_query("update start_count set c_total_score=c_total_score+$c_score,c_total_num=c_total_num+1 where vid=$vid");
        }elseif ($d_score > 0){
            $update_info_sql = mysql_query("update start_info set d_score=$d_score where uid=$uid and vid=$vid");
            $update_count_sql = mysql_query("update start_count set d_total_score=d_total_score+$d_score,d_total_num=d_total_num+1 where vid=$vid");
        }elseif ($e_score > 0){
            $update_info_sql = mysql_query("update start_info set e_score=$e_score where uid=$uid and vid=$vid");
            $update_count_sql = mysql_query("update start_count set e_total_score=e_total_score+$e_score,e_total_num=e_total_num+1 where vid=$vid");
        }

        // 查詢info表
        $query_info_sql = mysql_query("select `a_score`,`b_score`,`c_score`,`d_score`,`e_score` from start_info where uid=$uid and vid=$vid");
        $query_info_rs = mysql_fetch_array($query_info_sql);

        // 查詢count表
        $query_count_sql = mysql_query("SELECT `id`, `vid`, `a_total_score`, `b_total_score`, `c_total_score`, `d_total_score`, `e_total_score`, `a_total_num`, `b_total_num`, `c_total_num`, `d_total_num`, `e_total_num`, ROUND(a_total_score/a_total_num,2) as a_avg_score, ROUND(b_total_score/b_total_num,2) as b_avg_score, ROUND(c_total_score/c_total_num,2) as c_avg_score, ROUND(d_total_score/d_total_num,2) as d_avg_score, ROUND(e_total_score/e_total_num,2) as e_avg_score FROM `start_count` WHERE vid=$vid");
        $query_count_rs = mysql_fetch_array($query_count_sql);

        // 將2個陣列合並$query_info_rs、$query_count_rs
        $rs = array_merge($query_info_rs, $query_count_rs);

        echo json_encode($rs);  
    }
}

Java實現評論回覆功能
2020-11-03
Java
「擴充」實現評論 @ 多人通知功能
2018-06-13
教你如何用 MongoDB 實現評論榜功能
2019-09-10
MongoDB
PHP無限級評論回覆功能實現
2020-11-14
PHP
思否評論區 @ 人的功能實現
2023-02-27
react 學習--結合bootstrap實現評論功能
2016-10-24
Reactboot
評論模組 – 後端資料庫設計及功能實現
2019-03-03
後端資料庫
評論模組 - 後端資料庫設計及功能實現
2018-11-07
後端資料庫
關於實現論壇的回覆評論
2021-10-19
可行的二級評論實現
2021-09-30
jQuery-五角星評分案例
2020-11-13
jQuery
Jquery實現微博分享評論表情特效
2019-05-11
jQuery特效
使用者評論程式碼實現
2020-12-08
Steam實裝按遊戲時長過濾評論功能
2019-09-27
遊戲
3 條 sql 是實現知乎評論，7 條 sql 實現點贊 + 評論，且可擴充套件
2018-10-21
SQL套件
Django搭建個人部落格：用django-mptt實現多級評論功能
2019-05-04
Django
簡易 Vue 評論框架的實現————父元件的實現
2018-01-05
Vue框架元件
Asp.Net實現評論蓋樓(含Ajax實現方式)
2011-07-28
ASP.NET
評論功能完成，順便總結下開發評論的經驗
2018-02-11
用ASP實現論壇的UBB功能 (轉)
2007-12-02
評論回覆功能，總結開發-Java
2020-10-31
Java
資料庫設計——評論回覆功能
2022-11-24
資料庫
[打怪升級]小程式評論回覆和發貼功能實戰（一）
2019-07-11
[打怪升級]小程式評論回覆和發帖功能實戰（二）
2019-08-02
Laravel-Module 模組開發一：評論模組實現
2019-05-06
Laravel
20行程式碼實現電影評論情感分析
2018-03-09
行程
jQuery 實現 Ctrl+Enter 快捷鍵發表評論
2011-12-26
jQuery
WordPress增加評論回覆的郵件通知功能
2019-04-04
PHPAjax實現頁面無重新整理發表評論
2012-11-18
PHP
為hexo部落格新增基於gitment評論功能
2018-07-24
HexoGit
利用IOS畫圖功能畫出五角星，並且可以調整五角星的填充範圍
2013-07-02
iOS
獲得JD商品評論 API 如何實現實時資料獲取
2023-12-27
API
LazadaAPI介面解析，實現獲得lazada商品評論列表
2023-09-21
API
PHP+MySQL設計高效發表評論留言功能
2020-03-03
PHPMySql
VuePress 部落格優化之增加 Vssue 評論功能
2022-03-10
Vue優化
九、Abp vNext 基礎篇丨評論聚合功能
2021-09-18
VuePress 部落格優化之增加 Valine 評論功能
2022-03-09
Vue優化
MongoDB 在評論中臺的實踐
2021-03-01
MongoDB

php+mysql+html實現五角星評論功能

相關文章