php mysql 星级评分_jQuery+PHP实现星级评分
本例实现的效果:
过渡动画显示评分操作。
及时更新平均得分和用户所评的分数。
后台限制用户重复评分操作,并在前端及时显示。
XHTML
HTML结构分为用于显示灰星星div#big_rate、亮星星div#big_rate_up、分数span#s及span#g和提示信息div#my_rate。
CSS
.rate{width:600px; margin:100px auto; font-size:14px; position:relative; padding:10px 0;}
.rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute;
top:0; left:100px; margin-left:140px;}
.rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;}
.rate p span.g {font-size:22px; display:block; float:left; color:#DD5400;}
.big_rate {width:140px; height:28px; text-align:left; position:absolute; top:3px; left:85px;
display:inline-block; background:url(star.gif) left bottom repeat-x;}
.big_rate span {display:inline-block; width:24px; height:28px; position:relative; z-index:1000;
cursor:pointer; overflow:hidden;}
.big_rate_up {width:140px; height:28px; position:absolute; top:0; left:0;
background:url(star.gif) left top;}
#my_rate{ position:absolute; margin-top:40px; margin-left:100px}
#my_rate span{color:#dd5400; font-weight:bold}
jQuery
我们先来写一个函数get_rate()来处理评分的前端交互。
function get_rate(rate){
....do some thing
}
函数get_rate(rate),需要传递一个参数:rate,用来表示平均分值。接着在函数里要处理参数rate:
rate=rate.toString();
var s;
var g;
$("#g").show();
if (rate.length>=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,用于前端显示平均分。
接下来,当我们鼠标滑向星星时,会产生一个动画效果,亮星星的宽度会随着鼠标滑向变化,分数值也会随之变化。
$(".big_rate_up").animate({width:(parseInt(s)+parseInt(g)/10) * 14,height:26},1000);
$(".big_rate span").each(function(){
$(this).mouseover(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请求,与后台交互。
var score = $(this).attr("rate");
$("#my_rate").html("您的评分:"+score+"");
$.ajax({
type: "POST",
url: "post.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即所评分数。后台程序在确定评分数了,进行相应处理,根据处理结果向前端发送不同的处理信息。
还有不要忘了,当鼠标离开星星的时候应该还原分数值:
$(".big_rate").mouseout(function(){
$("#s").text(s);
$("#g").text("."+ g);
$(".big_rate_up").width((parseInt(s)+parseInt(g)/10) * 14);
})
完成了函数get_rate(),我们只需要在页面载入时调用就OK。
$(function(){
get_rate(88);
});
PHP
post.php程序需要处理的有:接收前端发送过来的分数值,通过cookie判断用户IP和评分时间,防止重复评分。
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表结构:
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;
如对本例有任何看法请与本人联系,欢迎指教。
php mysql 星级评分_jQuery+PHP实现星级评分相关推荐
- php mysql 星级评分_jQuery+PHP实现星级评分效果
码农公社 210.net.cn 210= 1024 10月24日一个重要的节日--码农(程序员)节 jQuery+PHP实现星级评分效果,评分功能比较常用,例如商城平台就会有个评分功能,本实例就 ...
- php mysql 星级评分_jQuery+PHP星级评分实现方法_jquery
本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate.亮星星d ...
- 评论星级 php,JS实现评价星级
这次给大家带来JS实现评价星级,JS实现评价星级的注意事项有哪些,下面就是实战案例,一起来看一下. 虽然简单,还是有几个注意的地方: 1. 未点击时的hover效果,星星会随鼠标移动亮起来喔. 2. ...
- apache评分表的意义_APACHE评分系统及评分表
<APACHE评分系统及评分表>由会员分享,可在线阅读,更多相关<APACHE评分系统及评分表(2页珍藏版)>请在人人文库网上搜索. 1.APACHE评分系统急性生理学及慢性健 ...
- 评分模型前奏:启发式评分模型开发
模型是对策略的补充,可以具体量化每一位客户的风险值.信贷评分卡是风控领域应用最广泛的模型,不论是零售信贷.小微信贷还是对公等的众多业务领域,都试着想用评分模型来量化客群的风险. 但想要开发相关的评分模 ...
- 计算机平面设计评分标准,竞赛各专业评分标准.DOC
竞赛各专业评分标准 附件3:????????? 竞赛各专业评分标准 一.计算机操作竞赛评分标准 评审项目分值评分标准得分计算机操作技术竞赛汉字录入151.汉字和标点必须与样稿一致,符号.标点均按一个字 ...
- 多媒体计算机音乐大赛评分表,歌唱比赛的评分标准
很完善的评分标准 歌唱比赛的评分标准 扣分项目(10分) 1. 外在形象(1分) 着装打扮形象(0.3分):仪态举止形象(0.2分):整体台风及演唱印象(0.5分): 2. 作品完整度(1分) 歌词出 ...
- 金融风控-- >申请评分卡模型-- >申请评分卡介绍
从这篇博文开始,我将总结金融风控中的另外一个模型:申请评分卡模型.这篇博文将主要来介绍申请评分卡的一些基本概念. 本篇博文将以以下四个主题来进行介绍说明: 信用风险和评分卡模型的基本概念 申请评分卡在 ...
- java实现星级评分功能_JavaScript实现星级评分
JavaScript星级评分 *{margin:0;padding:0;} .wrapper{height:20px;padding:5px;width:130px;margin:100px auto ...
最新文章
- eBay的Elasticsearch性能调优实践
- JavaCC首页、文档和下载 - 语法分析生成器 - 开源中国社区
- 洛谷 P2756 飞行员配对方案问题 (二分图/网络流,最佳匹配方案)
- 在离线环境中发布.NET Core至Windows Server 2008
- windows和linux存储float,C语言float型数据在内存中的储存方式
- 19日下午三点直播:DevOps体系中数据库端的四大问题及解决之道
- 国人自研开源项目,一款简单易用的 GitLab 替代品
- unbalanced enable irq
- 使用接口实现打印机功能
- 加强生物保护 绿日同学公益组织“国际生物多样性日“宣传活动
- SQLAlchemy中的Django风格的数据库路由器
- C语言实现单链表头插法
- win10-LTSC2019装机必备操作和软件备忘录
- C++学习笔记之数字输入及错误处理
- 07-提取字符串中的数字数组
- 用java web start来发布jbpm(三)
- laravel jwt attempt 总是返回false
- 红队培训班作业 | 五种免杀bypass火绒360姿势横向测评:哪款更适合你?
- Lucene 中	.fdx 和 .fdt 和.tis和.tii 还有.cfs含义
- 系统巡检指令之db2数据库表空间使用情况检查