php 评星,jQuery+PHP星级评分实现方法

搜索热词

本例实现的效果：

过渡动画显示评分操作。

及时更新平均得分和用户所评的分数。

后台限制用户重复评分操作，并在前端及时显示。

XHTML

HTML结构分为用于显示灰星星div#big_rate、亮星星div#big_rate_up、分数span#s及span#g和提示信息div#my_rate。

CSS

jQuery

我们先来写一个函数get_rate()来处理评分的前端交互。

函数get_rate(rate),需要传递一个参数：rate，用来表示平均分值。接着在函数里要处理参数rate:

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

将平均分值rate转换成格式如:6.8，用于前端显示平均分。

接下来，当我们鼠标滑向星星时，会产生一个动画效果，亮星星的宽度会随着鼠标滑向变化，分数值也会随之变化。

SEOver(function(){

$(".big_rate_up").width($(this).attr("rate") * 14 );

$("#s").text($(this).attr("rate"));

$("#g").text("");

}).click(function(){

...ajax异步提交给后台处理

})

})

上面的代码不难理解，需要说明的是为什么宽度要乘以14呢？因为图片的宽度是28，总共5张图片表示满分10分，算出来单位分值(1分)所占宽度为(5*28)/10=14。

在单击星星时，需要向后台地址发送一个ajax请求，与后台交互。

score = $(this).attr("rate");

$("#my_rate").html("您的评分：PHP",data:"score="+score,success: function(msg){

if(msg==1){

$("#my_rate").html("您已经评过分了！");

}else if(msg==2){

$("#my_rate").html("您评过分了！");

}else{

get_rate(msg);

}

}

});

不难看出，当单击星星时，前端以POST方式向后台程序post.PHP发送ajax请求，传递参数score即所评分数。后台程序在确定评分数了，进行相应处理，根据处理结果向前端发送不同的处理信息。

还有不要忘了，当鼠标离开星星的时候应该还原分数值：

PHP;">

$(".big_rate").mouSEOut(function(){

$("#s").text(s);

$("#g").text("."+ g);

$(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14);

})

完成了函数get_rate()，我们只需要在页面载入时调用就OK。

PHP程序需要处理的有：接收前端发送过来的分数值，通过cookie判断用户IP和评分时间，防止重复评分。

PHP;">

include_once ('connect.PHP'); //连接数据库

$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'])) < 600) {

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 = $rs['total'] / $rs['voter'];

$aver = round($aver,1) * 10;

//设置COOKIE

setcookie("person",$cookiestr,time() + 3600);

setcookie("rate_time",time(),time() + 3600);

echo $aver;

}

}

很显然，当用户提交过一次评分后，程序会记录用户的IP和时间，以防止重复提交，当用户是第一次评分时，程序执行操作，将评分值加入数据表，并计算平均分返回给前端调用。

关于如何获取用户IP的方法getip()在DEMO中已经有了，这里不做重点介绍，请大家自行下载。

最后附上MysqL表结构：

sql;">

CREATE TABLE IF NOT EXISTS `raty` (

`id` int(11) NOT NULL auto_increment,`voter` int(10) NOT NULL default '0' COMMENT '评分次数',`total` int(11) NOT NULL default '0' COMMENT '总分',PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

以上就是jQuery+PHP星级评分实现方法，希望对大家的学习有所帮助。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。