当前位置：首页 → 问答吧 → php+jquery 星级评分程序, js,让php更精彩一点

php+jquery 星级评分程序, js,让php更精彩一点

时间：2010-07-16

来源：互联网

经常一些影视站，游戏等等下载站，都会让用户对某个资源进行评分，酷炫的评分效果，会给网站带来额外意想不到的收获。

图片资源来自SOSO，大家也可以参考腾讯写的JQ，但你搞不懂他的思想，看起来会比较稍微那么一点不舒服。

接下来，开始献丑小弟自己的了，把自己刚写的一个评分小例子搬上来给大家借鉴一下。

首先 HTML ：

<li>游戏评分：
<div>
总评分：<span id="showpf"><script type="text/javascript" src="www.xxx.com/showinfo.php?action=pingfen&gid=<?=$arcid?>&pdid=1"></script></span>
<p id="rate_span"></p>
<div id="pfnum">
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="1分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="2分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="3分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="4分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="5分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="6分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="7分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="8分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="9分,点击进行评分!" />
<img src="http://inncache.soso.com/xsoso/images/empty_star.gif" width="28" title="<?=$arcid?>" height="28" class="ratestar_img" alt="10分,点击进行评分!" />
</div>
<span style="font-size:36px;" id="bigrate_span"><script type="text/javascript" src="www.xxx.com/showinfo.php?action=pingfen&gid=<?=$arcid?>&pdid=1"></script></span>
</div>
</li>

复制代码

HTML 注释：
<?=$arcid?> 文章ID
pdid=1 这个大家不用管，这是我区分游戏，软件，和新闻加的一个频道ID
showinfo.php 显示当前评分这个就不搬出来了，就是查询出你数据库现在这个游戏的评分，至于数据库呆会另外一个文件会详细讲解，请继续往下看。

现在开始上JQ了：

$(function(){
//目前评分状况
var spoint = parseInt($("#showpf").text());
var avarankstr = '';
if(spoint <= 4){
avarankstr="(垃圾中的战斗机)";
}else if(spoint <= 7){
avarankstr="(凑合着过日子吧,可以试试)";
}else if(spoint <= 9){
avarankstr="(很好,强烈推荐)";
}else{
avarankstr="(非常完美,绝世佳作)";
}
//显示根据评分得出的中文描述
$("#rate_span").html(avarankstr);
//循环出目前的星级
$("#pfnum img").each(function(i){
if(i <= spoint-1){
$(this).attr("src","http://inncache.soso.com/xsoso/images/newxw/full_star.gif");
}
//缓存一个星星数据,添加鼠标经过和离开动作,鼠标离开则还原到原有评分星级
$(this).data("point",(i+1));
$(this).hover(function(){
var point=$(this).data("point");
$.fn.drawpoint(point);
$("#bigrate_span").html(point);
},function(){
$.fn.drawpoint(spoint);
$("#bigrate_span").html(spoint);
$("#rate_span").html(avarankstr);
});
});
//点击进行评分
$("#pfnum img").click(function(){
var indexpf = $(this).index()+1;
var gid = $(this).attr("title");
//这个地方大家注意下,因为我之前是要跨域，所以用了getJSON，如果没跨域的话就直接 .get 就可以了。
$.getJSON('http://m.bbb.com/countdown.php?action=pingfen&pdid=1&field_id='+gid+'&pf='+indexpf+'&callback=?',function(data){
if(data.pf=='a'){
alert("这个游戏你已经评分过了");
}else if(data.pf=='b'){
alert("五分钟内只允许评分一次");
}else if(data.pf=='c'){
alert("网络发生未知错误,请稍后再试");
}else{
$("#showpf").text(data.pf);
spoint = data.pf;
$.fn.drawpoint(data.pf);
alert("您成功的评分了一个游戏");
alert(data.pf);
}
});
});
//星级处理方法
$.fn.drawpoint=function(point){
if(point <= 4){
avarankstr="(垃圾中的战斗机)";
}else if(point <= 7){
avarankstr="(凑合着过日子吧,可以试试)";
}else if(point <= 9){
avarankstr="(很好,强烈推荐)";
}else{
avarankstr="(非常完美,绝世佳作)";
}
$("#rate_span").html(avarankstr);
$("#pfnum img").each(function(i){
if(i <= point-1){
$(this).attr("src","http://inncache.soso.com/xsoso/images/newxw/full_star.gif");
}else{
$(this).attr("src","http://inncache.soso.com/xsoso/images/newxw/empty_star.gif");
}
});
}
});

复制代码

最后PHP处理文件

//统计评分
function countpf($field_id,$pdid,$pf){
global $db;
$field_id = intval($field_id);
$pdid = intval($pdid);
$pf = intval($pf);
$tableName = 'otherinfo';
$rs = $db->query("select * from $tableName where gid=$field_id and pdid=$pdid");
//如果之前没有评分过, !rs也可以
if($db->num_rows($rs) < 1){
$db->query("insert into $tableName values(NULL,$field_id,$pdid,0,0,0,$pf,1,0)");
$r_pf = $pf;
}
//否则重新计算
else{
$result = $db->fetch_array($rs);
$pfnum = $result['pfnum']; //评分人数
$pfnum++;
$pf = $pf+$result['pf']; //相加之前的评分
$r_pf = ceil($pf/$pfnum); //去整，小数点评分没弄，大家可以自己弄弄
$db->query("update $tableName set pf=$pf,pfnum=$pfnum where id=$result[id]");
}
return $r_pf; //返回现在评分
}
if($_GET['action'] == 'pingfen' && $_GET['field_id'] && $_GET['pdid'] && $_GET['pf'] && isset($_REQUEST['callback'])){
//获取用户IP和文章ID，方法自己找一个。
$cookiestr = get_onlineip().$_GET['field_id'];
//这个文章是否已经被评过
if(isset($_COOKIE['pfperson']) && $_COOKIE['pfperson']==$cookiestr){
$str = 'a';
}
//防止恶意评分,每五分钟才可以评一次
elseif(isset($_COOKIE['pftime']) && (time()-intval($_COOKIE['pftime']) <= 300)){
$str = 'b';
}else{
//设置COOKIE
set_cookie("pfperson",$cookiestr,time()+3600*365);
set_cookie("pftime",time(),time()+3600*365);
//处理评分
$str = countpf($_GET['field_id'],$_GET['pdid'],$_GET['pf']);
}
//如果没跨域的话，直接 echo $str, 不用输出JSON格式
$callback = $_REQUEST['callback'];
$arr = array('pf' => $str);
$json = json_encode($arr);
$json = $callback . '(' . $json . ')';
echo $json;
}else{
exit;
}

复制代码

数据库： id,pdid, gid, pf, pfnum 全部int型。
附件我就不整理了，大家复制一下吧。
JQ版本 1.4
PHP 5.2.6

就这么多了，看不明白的可以回帖留言，懂了的，可以自己再做修正，例如可以把JQ写成一个插件，方便以后调用。也希望写过此类程序的朋友给你的参考出来分享一下.

作者: joeshow 发布时间: 2010-07-16

很好，很强大！第一次做沙发！

作者: huajian15 发布时间: 2010-07-17

没怎么看的仔细，不过LZ值得学习

作者: shixuebao 发布时间: 2010-07-17

发现一个错误，评分不能及时显示，spoint = data.pf; 忘记修改全局变量值了，已经修改。